Back to Copilotkit

Headless Ui

showcase/shell-docs/src/content/snippets/headless-ui.mdx

1.57.0814 B
Original Source

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/v2";
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 <div></div>;
}