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.

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:

    <CopilotKit runtimeUrl="/api/copilotkit" agent="agentic_chat">
      <div className="flex justify-center items-center h-screen w-full">
        <div className="h-full w-full max-w-4xl">
          <Chat />
        </div>
      </div>
    </CopilotKit>

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

  useConfigureSuggestions({
    suggestions: [
      { title: "Write a sonnet", message: "Write a short sonnet about AI." },
    ],
    available: "always",
  });

Get started by choosing your AI backend

The chat components work with any AI backend. Pick your integration to get started.