Skip to content

Commit 4fe17c4

Browse files
ataibarkaiataibarkai
committed
core docs: specify all ways of customizing the ui in dedicatd guides
1 parent 49289d8 commit 4fe17c4

9 files changed

Lines changed: 107 additions & 16 deletions

File tree

‎docs/content/docs/(root)/guides/custom-look-and-feel/built-in-ui-components.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
title: "Built-in Copilot UI"
3+
description: "An overview of the built-in Copilot UI components."
4+
---
5+
import ConnectCopilotUI from "@/snippets/copilot-ui.mdx";
6+
7+
# Setting up the built-in UI components
8+
9+
<ConnectCopilotUI components={props.components} />

docs/content/docs/(root)/guides/custom-look-and-feel.mdx renamed to docs/content/docs/(root)/guides/custom-look-and-feel/customize-built-in-ui-components.mdx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
---
2-
title: "Custom Look & Feel"
3-
description: "Learn how to customize the look and feel of CopilotKit in your app."
2+
title: "Customize the built-in components"
3+
description: "Customize the look and feel of the built-in Copilot UI components."
44
---
55
import { CopilotKitCSS, InteractiveCSSInspector } from "@/components/react/copilotkit-css";
66

7+
## CSS Variables
8+
79
<CopilotKitCSS />
810

9-
## CSS Variables
10-
CopilotKit uses CSS variables to make it easay to customize the look and feel of the components. Hover over the interactive UI elements below to see the available CSS variables.
11+
CopilotKit uses CSS variables to make it easay to customize the look and feel of the components.<br/>
12+
Hover over the interactive UI elements below to see the available CSS variables.
1113

12-
<InteractiveCSSInspector />
14+
<Callout type="info">
15+
Hover over the interactive UI elements below to see the available CSS variables.
16+
</Callout>
1317

14-
## Customize CopilotKit Appearance
18+
<InteractiveCSSInspector />
1519

1620
You can override / customize the CSS, customize the icons, customize labels, swap out react components, and use headless UI. See below.
1721

@@ -48,7 +52,7 @@ For example:
4852
}
4953
```
5054

51-
### Custom Icons
55+
## Custom Icons
5256

5357
You can customize the icons by passing the `icons` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component.
5458

@@ -64,7 +68,7 @@ Below is a list of customizable icons:
6468
- `regenerateIcon`: The icon to use for the regenerate button.
6569
- `pushToTalkIcon`: The icon to use for push to talk.
6670

67-
### Custom Labels
71+
## Custom Labels
6872

6973
To customize labels, pass the `labels` property to the `CopilotSidebar`, `CopilotPopup` or `CopilotChat` component.
7074

@@ -76,7 +80,7 @@ Below is a list of customizable labels:
7680
- `stopGenerating`: The label to display on the stop button.
7781
- `regenerateResponse`: The label to display on the regenerate button.
7882

79-
### Swapping Out Components
83+
## Swapping Out Components
8084

8185
To completely customize the look and feel of CopilotKit, you can swap out the components of the chat window.
8286

@@ -129,4 +133,4 @@ export function CustomResponseButton({ onClick, inProgress }: ResponseButtonProp
129133

130134
## Headless UI (Full Customizability)
131135

132-
Finally, as a reminder, CopilotKit also supports [Headless UI]() for full customizability and programmatic control.
136+
Finally, as a reminder, CopilotKit also supports [Headless UI](/guides/custom-look-and-feel/headless-ui) for full customizability and programmatic control.

‎docs/content/docs/(root)/guides/custom-look-and-feel/headless-ui.mdx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: "Headless Copilot UI"
3+
description: "Fully customize your Copilot's UI from the ground up using headless UI"
4+
---
5+
6+
The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components.
7+
8+
CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability.
9+
10+
```tsx
11+
import { useCopilotChat } from "@copilotkit/react-core";
12+
import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
13+
14+
export function CustomChatInterface() {
15+
const {
16+
visibleMessages,
17+
appendMessage,
18+
setMessages,
19+
deleteMessage,
20+
reloadMessages,
21+
stopGeneration,
22+
isLoading,
23+
} = useCopilotChat();
24+
25+
const sendMessage = (content: string) => {
26+
appendMessage(new TextMessage({ content, role: Role.User }));
27+
};
28+
29+
return (
30+
<div>
31+
{/* Implement your custom chat UI here */}
32+
</div>
33+
);
34+
}
35+
```

‎docs/content/docs/(root)/guides/custom-look-and-feel/meta.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"title": "Customize Look & Feel",
3+
"pages": [
4+
"built-in-ui-components",
5+
"customize-built-in-ui-components",
6+
"headless-ui"
7+
]
8+
}

‎docs/content/docs/(root)/quickstart.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@ import ConnectCopilotUI from "@/snippets/copilot-ui.mdx";
3232
</Step>
3333
<Step>
3434
### Connect Copilot UI
35+
You are almost there!
36+
Now it's time to setup your Copilot UI.
37+
3538
<ConnectCopilotUI components={props.components} />
3639
</Step>
3740
</Steps>

‎docs/content/docs/coagents/chat-ui/chat-with-agent.mdx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
---
2-
title: Implementing agent chat
2+
title: Chat with an agent
33
---
44

5+
No need to do anything else -- chat with an agent JustWorks!
6+
7+
You can use any of the built-in Copilot

‎docs/content/docs/coagents/chat-ui/meta.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"title": "chat-ui",
33
"pages": [
4+
"chat-with-agent",
45
"render-agent-state",
56
"hitl"
67
]

‎docs/snippets/copilot-ui.mdx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11

2-
You are almost there!
3-
Now it's time to setup your Copilot UI.
2+
import HeadlessUI from "@/snippets/headless-ui.mdx";
43

54
First, import the default styles in your root component (typically `layout.tsx`) :
65

@@ -93,8 +92,8 @@ import "@copilotkit/react-ui/styles.css";
9392
</Tab>
9493
<Tab value="Headless UI">
9594
The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components.
96-
97-
CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI can be implemented with the headless UI, providing deep customizability.
95+
96+
CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability.
9897

9998
```tsx
10099
import { useCopilotChat } from "@copilotkit/react-core";
@@ -122,6 +121,5 @@ import "@copilotkit/react-ui/styles.css";
122121
);
123122
}
124123
```
125-
126124
</Tab>
127125
</Tabs>

‎docs/snippets/headless-ui.mdx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components.
2+
3+
CopilotKit also offers **fully custom headless UI**, through the `useCopilotChat` hook. Everything built with the built-in UI (and more) can be implemented with the headless UI, providing deep customizability.
4+
5+
```tsx
6+
import { useCopilotChat } from "@copilotkit/react-core";
7+
import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
8+
9+
export function CustomChatInterface() {
10+
const {
11+
visibleMessages,
12+
appendMessage,
13+
setMessages,
14+
deleteMessage,
15+
reloadMessages,
16+
stopGeneration,
17+
isLoading,
18+
} = useCopilotChat();
19+
20+
const sendMessage = (content: string) => {
21+
appendMessage(new TextMessage({ content, role: Role.User }));
22+
};
23+
24+
return (
25+
<div>
26+
{/* Implement your custom chat UI here */}
27+
</div>
28+
);
29+
}
30+
```

0 commit comments

Comments
 (0)