useCopilotChatHeadless_c.mdx

title	useCopilotChatHeadless_c

{ /*

• ATTENTION! DO NOT MODIFY THIS FILE!
• This page is auto-generated. If you want to make any changes to this page, changes must be made at:
• packages/react-core/src/hooks/use-copilot-chat-headless_c.ts */ } useCopilotChatHeadless_c is for building fully custom UI (headless UI) implementations.

Sign up for free on [Copilot Cloud](https://dashboard.operations.copilotkit.ai) to get your public license key or read more about premium features.

Usage is generous, free to get started, and works with either self-hosted or Copilot Cloud environments.

Key Features

• Fully headless: Build your own fully custom UI's for your agentic applications.
• Advanced Suggestions: Direct access to suggestions array with full control
• Interrupt Handling: Support for advanced interrupt functionality
• MCP Server Support: Model Context Protocol server configurations
• Chat Controls: Complete set of chat management functions
• Loading States: Comprehensive loading state management

Usage

Basic Setup

import { CopilotKit } from "@copilotkit/react-core";
import { useCopilotChatHeadless_c } from "@copilotkit/react-core";
 
export function App() {
  return (
    <CopilotKit publicApiKey="your-free-public-license-key">
      <YourComponent />
    </CopilotKit>
  );
}
 
export function YourComponent() {
  const { messages, sendMessage, isLoading } = useCopilotChatHeadless_c();
 
  const handleSendMessage = async () => {
    await sendMessage({
      id: "123",
      role: "user",
      content: "Hello World",
    });
  };
 
  return (
    <div>
      {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
      <button onClick={handleSendMessage} disabled={isLoading}>
        Send Message
      </button>
    </div>
  );
}

Working with Suggestions

import { useCopilotChatHeadless_c, useCopilotChatSuggestions } from "@copilotkit/react-core";
 
export function SuggestionExample() {
  const {
    suggestions,
    setSuggestions,
    generateSuggestions,
    isLoadingSuggestions
  } = useCopilotChatHeadless_c();
 
  // Configure AI suggestion generation
  useCopilotChatSuggestions({
    instructions: "Suggest helpful actions based on the current context",
    maxSuggestions: 3
  });
 
  return (
    <div>
      {suggestions.map(suggestion => (
        <button key={suggestion.title}>{suggestion.title}</button>
      ))}
      <button onClick={generateSuggestions} disabled={isLoadingSuggestions}>
        Generate Suggestions
      </button>
    </div>
  );
}

Return Values

The following properties are returned from the hook:

The messages currently in the chat in AG-UI format Send a new message to the chat and trigger AI response Replace all messages in the chat with new array Remove a specific message by ID from the chat Regenerate the response for a specific message by ID Stop the current message generation process Clear all messages and reset chat state completely Whether the chat is currently generating a response Manually trigger chat completion for advanced usage Array of Model Context Protocol server configurations Update MCP server configurations for enhanced context Current suggestions array for reading or manual control Manually set suggestions for custom workflows Trigger AI-powered suggestion generation using configured settings Clear all current suggestions and reset generation state Whether suggestions are currently being generated Interrupt content for human-in-the-loop workflows