ContextQMD
Back to Copilotkit

Prebuilt Components

showcase/shell-docs/src/content/snippets/shared/basics/prebuilt-components.mdx

1.57.03.1 KB
Original Source

import { IframeSwitcher } from "@/components/content";

CopilotKit ships three prebuilt chat components that connect directly to your 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, you already have one of these set up. </Callout>

<IframeSwitcher id="agentic-chat-example" exampleUrl={https://feature-viewer.copilotkit.ai/${props.framework || "langgraph"}/feature/agentic_chat?sidebar=false&chatDefaultOpen=false} codeUrl={https://feature-viewer.copilotkit.ai/${props.framework || "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
import "@copilotkit/react-ui/v2/styles.css";

CopilotChat

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

tsx
// [!code word:CopilotChat]
import { CopilotChat } from "@copilotkit/react-core/v2";

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

CopilotSidebar

Wraps your main content and provides a collapsible sidebar chat.

tsx
// [!code word:CopilotSidebar]
import { CopilotSidebar } from "@copilotkit/react-core/v2";

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

CopilotPopup

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

tsx
// [!code word:CopilotPopup]
import { CopilotPopup } from "@copilotkit/react-core/v2";

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

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-blue-500",
    sendButton: "bg-blue-600 hover:bg-blue-700",
  }}
  // Customize nested message slots
  messageView={{
    assistantMessage: "bg-blue-50 rounded-xl p-2",
    userMessage: "bg-blue-100 rounded-xl",
  }}
/>