Skip to content

prebuilt-components.mdx

Latest commit

 

History

History
123 lines (97 loc) · 3.33 KB

prebuilt-components.mdx

File metadata and controls

123 lines (97 loc) · 3.33 KB
Raw

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.

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

<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:

import "@copilotkit/react-ui/v2/styles.css";

CopilotChat

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

// [!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?",
      }}
    />
  );
}

CopilotChat example

CopilotSidebar

Wraps your main content and provides a collapsible sidebar chat.

// [!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>
  );
}

CopilotSidebar example

CopilotPopup

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

// [!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>
  );
}

CopilotPopup example

Customization

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

<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",
  }}
/>