/** * `useCopilotChatHeadless_c` is for building fully custom UI (headless UI) implementations. * * * Sign up for free on [Copilot Cloud](https://cloud.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 * * ```tsx * import { CopilotKit } from "@copilotkit/react-core"; * import { useCopilotChatHeadless_c } from "@copilotkit/react-core"; * * export function App() { * return ( * * * * ); * } * * export function YourComponent() { * const { messages, sendMessage, isLoading } = useCopilotChatHeadless_c(); * * const handleSendMessage = async () => { * await sendMessage({ * id: "123", * role: "user", * content: "Hello World", * }); * }; * * return ( *
* {messages.map(msg =>
{msg.content}
)} * *
* ); * } * ``` * * ### Working with Suggestions * * ```tsx * 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 ( *
* {suggestions.map(suggestion => ( * * ))} * *
* ); * } * ``` * * ## 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 * */ import { useEffect } from "react"; import { useCopilotContext } from "../context/copilot-context"; import { useCopilotChatInternal, defaultSystemMessage, UseCopilotChatOptions as UseCopilotChatOptions_c, UseCopilotChatReturn as UseCopilotChatReturn_c, MCPServerConfig, } from "./use-copilot-chat_internal"; import { ErrorVisibility, Severity, CopilotKitError, CopilotKitErrorCode, styledConsole, } from "@copilotkit/shared"; // Non-functional fallback implementation const createNonFunctionalReturn = (): UseCopilotChatReturn_c => ({ visibleMessages: [], messages: [], sendMessage: async () => {}, appendMessage: async () => {}, setMessages: () => {}, deleteMessage: () => {}, reloadMessages: async () => {}, stopGeneration: () => {}, reset: () => {}, isLoading: false, isAvailable: false, runChatCompletion: async () => [], mcpServers: [], setMcpServers: () => {}, suggestions: [], setSuggestions: () => {}, generateSuggestions: async () => {}, resetSuggestions: () => {}, isLoadingSuggestions: false, interrupt: null, }); /** * Enterprise React hook that provides complete chat functionality for fully custom UI implementations. * Includes all advanced features like direct message access, suggestions array, interrupt handling, and MCP support. * * **Requires a publicApiKey** - Sign up for free at https://cloud.copilotkit.ai/ * * @param options - Configuration options for the chat * @returns Complete chat interface with all enterprise features * * @example * ```tsx * const { messages, sendMessage, suggestions, interrupt } = useCopilotChatHeadless_c(); * ``` */ function useCopilotChatHeadless_c( options: UseCopilotChatOptions_c = {}, ): UseCopilotChatReturn_c { const { copilotApiConfig, setBannerError } = useCopilotContext(); // Check if publicApiKey is available const hasPublicApiKey = Boolean(copilotApiConfig.publicApiKey); // Always call the internal hook (follows rules of hooks) const internalResult = useCopilotChatInternal(options); // Set banner error when no public API key is provided useEffect(() => { if (!hasPublicApiKey) { setBannerError( new CopilotKitError({ message: // add link to documentation here "You're using useCopilotChatHeadless_c, a premium-only feature, which offers extensive headless chat capabilities. To continue, you'll need to provide a free public license key.", code: CopilotKitErrorCode.MISSING_PUBLIC_API_KEY_ERROR, severity: Severity.WARNING, visibility: ErrorVisibility.BANNER, }), ); styledConsole.logCopilotKitPlatformMessage(); } else { setBannerError(null); // Clear banner when API key is provided } }, [hasPublicApiKey]); // Removed setBannerError dependency // Return internal result if publicApiKey is available, otherwise return fallback if (hasPublicApiKey) { return internalResult; } // Return non-functional fallback when no publicApiKey return createNonFunctionalReturn(); } export { defaultSystemMessage, useCopilotChatHeadless_c }; export type { UseCopilotChatOptions_c, UseCopilotChatReturn_c, MCPServerConfig, }; const noKeyWarning = () => { styledConsole.logCopilotKitPlatformMessage(); };