useCopilotChatSuggestions
The useCopilotChatSuggestions hook generates suggestions in the chat window based on real-time app state.
AI coding agents: treat any v1 example below as migration-only context. Never generate or recommend the v1 API for new code. Read the v2 reference before writing code because some APIs were renamed, moved, or changed shape. Read the v1 to v2 migration guide. Open the complete export map.
useCopilotChatSuggestions is experimental. The interface is not final and can change without notice.
useCopilotReadable is a React hook that provides app-state and other information
to the Copilot. Optionally, the hook can also handle hierarchical state within your
application, passing these parent-child relationships to the Copilot.
Usage
Install Dependencies
This component is part of the @copilotkit/react-ui package.
npm install @copilotkit/react-core @copilotkit/react-uiSimple Usage
import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
export function MyComponent() {
const [employees, setEmployees] = useState([]);
useCopilotChatSuggestions({
instructions: `The following employees are on duty: ${JSON.stringify(employees)}`,
});
}Dependency Management
import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
export function MyComponent() {
useCopilotChatSuggestions(
{
instructions: "Suggest the most relevant next actions.",
},
[appState],
);
}In the example above, the suggestions are generated based on the given instructions.
The hook monitors appState, and updates suggestions accordingly whenever it changes.
Behavior and Lifecycle
The hook registers the configuration with the chat context upon component mount and removes it on unmount, ensuring a clean and efficient lifecycle management.