useCopilotChatSuggestions - Copilotkit

{ /*

ATTENTION! DO NOT MODIFY THIS FILE!
This page is auto-generated. If you want to make any changes to this page, changes must be made at:
packages/react-ui/src/hooks/use-copilot-chat-suggestions.tsx */ }

<Callout type="warning"> `useCopilotChatSuggestions` is still supported, but we recommend migrating to [`useConfigureSuggestions`](/reference/v2/hooks/useConfigureSuggestions) and [`useSuggestions`](/reference/v2/hooks/useSuggestions) from the v2 API. </Callout>

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.

shell

npm install @copilotkit/react-core @copilotkit/react-ui

Simple Usage

tsx

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

tsx

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.