import { useCopilotChat }
  from "@copilotkit/react-core";

const { appendMessage } = useCopilotChat();
appendMessage({ content: "Hello, world!", role: "user", id: "1" });

useCopilotChat is a React hook that lets you directly interact with the Copilot instance. Use to implement a fully custom UI (headless UI) or to programmatically interact with the Copilot instance managed by the default UI.

import { useCopilotChat }
  from "@copilotkit/react-core";

const { appendMessage } = useCopilotChat();
appendMessage({ content: "Hello, world!", role: "user", id: "1" });

useCopilotChat returns an object with the following properties:

  • visibleMessages: An array of messages that are currently visible in the chat.
  • appendMessage: A function to append a message to the chat.
  • setMessages: A function to set the messages in the chat.
  • deleteMessage: A function to delete a message from the chat.
  • reloadMessages: A function to reload the messages from the API.
  • stopGeneration: A function to stop the generation of the next message.
  • isLoading: A boolean indicating if the chat is loading.

​
Parameters

id
string

A unique identifier for the chat. If not provided, a random one will be generated. When provided, the useChat hook with the same id will have shared states across components.

headers
Record<string, string> | Headers

HTTP headers to be sent with the API request.

body
object

Extra body object to be sent with the API request. @example Send a sessionId to the API along with the messages.

useChat({
  body: {
    sessionId: '123',
  }
})
initialMessages
Message[]

System messages of the chat. Defaults to an empty array.

makeSystemMessage
SystemMessageFunction

A function to generate the system message. Defaults to defaultSystemMessage.

useCopilotActionuseCopilotChatSuggestions