Chat Components

Pre-built components for agentic chat

CopilotKit's chat components give you a fully functional, customizable AI chat interface out of the box. They handle streaming, generative UI, and deep customization so you can focus on your agent's behavior, not UI plumbing.

<video src="https://cdn.copilotkit.ai/docs/copilotkit/images/coagents/agentic-chat-ui.mp4" className="rounded-lg shadow-xl" loop playsInline controls autoPlay muted />

<InlineDemo demo="agentic-chat" />

What it looks like in code

The live agentic-chat cell above is built from a single, small page. Wrap your UI in <CopilotKit> once (it wires the runtime, session, and agent registry) and drop <CopilotChat> wherever the chat should go:

<Snippet region="provider-setup" title="frontend/src/app/page.tsx — CopilotKit provider" />

Inside the chat, the useConfigureSuggestions hook lets you show contextual starter prompts. The example below uses it to seed a simple "Write a sonnet" suggestion:

<Snippet region="configure-suggestions" title="frontend/src/app/page.tsx — starter suggestions" /> <IntegrationGrid path="chat" description="The chat components work with any AI backend. Pick your integration to get started." />