copilotkit__copilotkit/docs/snippets/component-examples.mdx

import { Tabs, Tab } from "fumadocs-ui/components/tabs";

<Tabs groupId="component" items={["CopilotChat", "CopilotSidebar", "CopilotPopup", "Headless UI"]}>
  <Tab value="CopilotPopup">

    `CopilotPopup` is a convenience wrapper for `CopilotChat` that lives at the same level as your main content in the view hierarchy. It provides **a floating chat interface** that can be toggled on and off.

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

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

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

  </Tab>
  <Tab value="CopilotSidebar">
    `CopilotSidebar` is a convenience wrapper for `CopilotChat` that wraps your main content in the view hierarchy. It provides a **collapsible and expandable sidebar** chat interface.

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

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

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

  </Tab>
  <Tab value="CopilotChat">
    `CopilotChat` is a flexible chat interface component that **can be placed anywhere in your app** and can be resized as you desire.

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

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

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

  </Tab>
  <Tab value="Headless UI">
    The built-in Copilot UI can be customized in many ways -- both through CSS and by using the slot system for component replacement.

    CopilotKit also offers **fully custom headless UI**, through the `useAgent` and `useCopilotKit` hooks. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability.

    ```tsx
    import { useAgent } from "@copilotkit/react-core/v2";
    import { useCopilotKit } from "@copilotkit/react-core/v2";
    import { randomUUID } from "@copilotkit/shared/v2";

    export function CustomChatInterface() {
      const { agent } = useAgent();
      const { copilotkit } = useCopilotKit();

      const sendMessage = async (content: string) => {
        agent.addMessage({
          id: randomUUID(),
          role: "user",
          content,
        });
        await copilotkit.runAgent({ agent });
      };

      return (
        <div>
          {/* Implement your custom chat UI here */}
        </div>
      );
    }
    ```
  </Tab>
</Tabs>