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 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.

```jsx useCopilotChat Example import { useCopilotChat } from "@copilotkit/react-core"; import { Role, TextMessage } from "@copilotkit/runtime-client-gql";

const { appendMessage } = useCopilotChat(); appendMessage( new TextMessage({ content: "Hello World", role: Role.User, }), );

</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`.