The built-in Copilot UI can be customized in many ways -- both through css and by passing in custom sub-components.
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.
```tsx
import { useCopilotChat } from "@copilotkit/react-core";
import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
export function CustomChatInterface() {
const {
visibleMessages,
appendMessage,
setMessages,
deleteMessage,
reloadMessages,
stopGeneration,
isLoading,
} = useCopilotChat();
const sendMessage = (content: string) => {
appendMessage(new TextMessage({ content, role: Role.User }));
};
return (
{/* Implement your custom chat UI here */}
);
}
```
```tsx
// [!code word:CopilotPopup]
import { CopilotPopup } from "@copilotkit/react-ui";
export function YourApp() {
return (
<>
```tsx
// [!code word:CopilotSidebar]
import { CopilotSidebar } from "@copilotkit/react-ui";
export function YourApp() {
return (
```tsx
// [!code word:CopilotChat]
import { CopilotChat } from "@copilotkit/react-ui";
export function YourComponent() {
return (