mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Sam Julien
fabaedc705
Renames the docs CTA tracking event from `cta_clicked` to `try_for_free_clicked` to match the per-event custom event names used on the marketing website, and uses a single `location` string property in place of the previous `surface` / `variant` / `target` / `page_path` shape. Surface identifiers are normalized to underscored snake_case to match the location values already used on the website. Same change applies to the docs navbar handler that fires when a visitor clicks the Free Developer Access link.
124 lines
3.3 KiB
Plaintext
124 lines
3.3 KiB
Plaintext
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 CopilotKit 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",
|
|
}}
|
|
/>
|
|
```
|