Prebuilt Components

CopilotKit ships three prebuilt chat components that connect directly to your LangGraph agent. Each is a wrapper around CopilotChat with a different layout — pick the one that fits your app and you're done.

If you've completed the quickstart, you already have one of these set up.

Want users to resume conversations across sessions?

Persistent threads ship with the Enterprise Intelligence Platform. Try it for free.

Get Intelligence free

Setup#

Import the default styles in your root layout:

layout.tsx

CopilotChat#

A flexible chat component that can be placed anywhere in your app and sized as needed.

page.tsx


export function YourComponent() {
  return (
    <CopilotChat
      labels={{
        modalHeaderTitle: "Your Assistant",
        welcomeMessageText: "Hi! How can I assist you today?",
      }}
    />
  );
}

CopilotSidebar#

Wraps your main content and provides a collapsible sidebar chat.

page.tsx


export function YourApp() {
  return (
    <CopilotSidebar
      defaultOpen={true}
      labels={{
        modalHeaderTitle: "Sidebar Assistant",
        welcomeMessageText: "How can I help you today?",
      }}
    >
      <YourMainContent />
    </CopilotSidebar>
  );
}

CopilotPopup#

A floating chat bubble that sits alongside your content and toggles open/closed.

page.tsx


export function YourApp() {
  return (
    <>
      <YourMainContent />
      <CopilotPopup
        labels={{
          modalHeaderTitle: "Popup Assistant",
          welcomeMessageText: "Need any help?",
        }}
      />
    </>
  );
}

Customization#

All three components support the slot system for deep customization — from Tailwind classes to full component replacement:

page.tsx

<CopilotChat
  // Style slots with Tailwind classes
  input={{
    textArea: "text-lg",
    sendButton: "bg-blue-600 hover:bg-blue-700",
  }}
  // Customize nested message slots
  messageView={{
    assistantMessage: {
      className: "bg-gray-50 rounded-xl p-4",
      toolbar: "border-t mt-2",
    },
    userMessage: "bg-blue-100 rounded-xl",
  }}
  // Hide elements by returning null
  scrollView={{
    feather: () => null,
  }}
/>

Next Steps#

Custom Look & Feel — Theme, restyle, or go fully headless with the slot system
Programmatic Control — Drive your agent from code with useAgent and copilotkit.runAgent()

Prebuilt Components

Setup#

CopilotChat#

CopilotSidebar#

CopilotPopup#

Customization#

Next Steps#

On this page