Full-Stack Template

Chat UI
Out of the Box

Production-ready chat interface with React components + Cloudflare Agent backend. Works immediately. Customize everything.

npx agentpacks add chat-ui-starter
React + TypeScript
Cloudflare Workers
Resumable Streaming

AI Assistant

Powered by Cloudflare Workers AI

Online
Hello! I'm your AI assistant powered by Cloudflare Workers AI. How can I help you today?
Can you explain how resumable streaming works?
**Resumable streaming** is a powerful feature that ensures your chat experience survives network interruptions. Here's how it works: 1. **Durable Objects** persist each chunk as it's generated 2. **Client reconnects** automatically resume from the last received chunk 3. **No lost tokens** - even if you close and reopen the browser This means users never see incomplete responses, and you never pay for lost tokens. Pretty neat! 🚀

What's Included

Everything you need to ship a chat experience in minutes

Resumable Streaming

Survives disconnects and browser refreshes. No lost tokens.

Session Persistence

Conversations saved in Durable Objects. Pick up where you left off.

Edge Runtime

Runs on Cloudflare Workers. Global, fast, and cost-effective.

Full TypeScript

Type-safe from hook to worker. Fully customizable.

Architecture

Clean separation between UI components, state management, and backend

React Components

@saas-starter/components

  • ChatSection
  • ChatThread
  • ChatComposer
  • ChatMessage

useAgentChat Hook

ChatHandler interface

  • messages, status
  • sendMessage()
  • stop(), reload()
  • Error handling

Cloudflare Worker

AIChatAgent

  • Workers AI (LLaMA)
  • Durable Objects
  • Resumable streaming
  • Session persistence

Code Examples

Everything is TypeScript. Fully typed, fully customizable.

import { ChatSection, ChatThread } from '@saas-starter/components';
import { useAgentChat } from './hooks/useAgentChat';

export default function ChatPage() {
  const handler = useAgentChat({
    agent: 'https://chat-ui-agent.YOUR.workers.dev',
  });

  return (
    <ChatSection handler={handler} className="h-screen">
      <ChatThread
        welcomeHeading="Hello! 👋"
        welcomeSubheading="How can I help you today?"
        suggestions={[
          { title: "Explain", label: "how this works" },
          { title: "Help me", label: "write some code" },
        ]}
      />
    </ChatSection>
  );
}

Files Included

One command, complete project structure

📁chat-ui-starter/
📄hooks/useAgentChat.ts— React hook
📁worker/
📄index.ts— Cloudflare Worker
📄wrangler.toml— Deploy config
📁app/chat/
📄page.tsx— Example page
📄README.md— Setup guide

Ready to Ship?

Get the chat-ui-starter pack and deploy your chat interface in minutes.

npx agentpacks add chat-ui-starter
Pro PackGet Pro Access