useCopilotChat.mdx

title	useCopilotChat
description	A hook for accessing Copilot's chat API.

{/* GENERATE-DOCS path=packages/react-core/src/hooks/use-copilot-chat.ts hook=useCopilotChat */}

useCopilotChat is a React hook that provides access to the Copilot chat API. You can use it to programmatically send or edit messages in a chat.

It is the building block of the chat components that come with CopilotKit. If you are looking for a headless option for building chat UIs, this is the hook you want to use.

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

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

</RequestExample>

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

<ResponseField name="id" type="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.
</ResponseField>

<ResponseField name="headers" type="Record<string, string> | Headers" >
HTTP headers to be sent with the API request.
</ResponseField>

<ResponseField name="body" type="object" >
Extra body object to be sent with the API request.
@example
Send a `sessionId` to the API along with the messages.
```js
useChat({
  body: {
    sessionId: '123',
  }
})

System messages of the chat. Defaults to an empty array. A function to generate the system message. Defaults to `defaultSystemMessage`.