ContextQMD
Back to Copilotkit

Prebuilt Components

showcase/shell-docs/src/content/docs/integrations/langgraph/prebuilt-components.mdx

1.57.03.3 KB
Original Source

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.

<Callout type="info"> If you've completed the [quickstart](/langgraph/quickstart), you already have one of these set up. </Callout>

<IframeSwitcher id="agentic-chat-example" exampleUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat?sidebar=false&chatDefaultOpen=false" codeUrl="https://feature-viewer.copilotkit.ai/langgraph/feature/agentic_chat?view=code&sidebar=false&codeLayout=tabs" exampleLabel="Demo" codeLabel="Code" height="700px" />

Setup

Import the default styles in your root layout:

tsx

CopilotChat

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

tsx
// [!code word:CopilotChat]

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.

tsx
// [!code word:CopilotSidebar]

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.

tsx
// [!code word:CopilotPopup]

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:

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