copilotkit__copilotkit/docs/snippets/shared/basics/prebuilt-components.mdx

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>

<OpsPlatformCTA
  variant="inline"
  title="Want users to resume conversations across sessions?"
  body="Persistent threads ship with the Enterprise Intelligence Platform. Try it for free."
  surface="docs_prebuilt_components"
/>

<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 title="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 title="page.tsx"
// [!code word:CopilotChat]
import { CopilotChat } from "@copilotkit/react-core/v2";

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

<img src="https://cdn.copilotkit.ai/docs/copilotkit/images/copilotchat-example.gif" alt="CopilotChat example" className="w-full rounded-lg my-4" />

### CopilotSidebar

Wraps your main content and provides a collapsible sidebar chat.

```tsx title="page.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>
  );
}
```

<img src="https://cdn.copilotkit.ai/docs/copilotkit/images/sidebar-example.gif" alt="CopilotSidebar example" className="w-full rounded-lg my-4" />


### CopilotPopup

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

```tsx title="page.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>
  );
}
```

<img src="https://cdn.copilotkit.ai/docs/copilotkit/images/popup-example.gif" alt="CopilotPopup example" className="w-full rounded-lg my-4" />

## Customization

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

```tsx title="page.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",
  }}
/>
```