Copilot Suggestions
Learn how to auto-generate suggestions in the chat window based on real time application state.
useCopilotChatSuggestions is experimental. The interface is not final and can change without notice.
useCopilotChatSuggestions is a React hook that generates suggestions in the chat window based on real time application state.
Simple Usage
import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
export function MyComponent() {
useCopilotChatSuggestions(
{
instructions: "Suggest the most relevant next actions.",
minSuggestions: 1,
maxSuggestions: 2,
},
[relevantState],
);
}Dependency Management
import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
export function MyComponent() {
useCopilotChatSuggestions(
{
instructions: "Suggest the most relevant next actions.",
minSuggestions: 1,
maxSuggestions: 2,
},
[relevantState],
);
}In the example above, the suggestions are generated based on the given instructions.
The hook monitors relevantState, and updates suggestions accordingly whenever it changes.
Specify "use client" (Next.js App Router)
This is only necessary if you are using Next.js with the App Router.
"use client"Like other React hooks such as useState and useEffect, this is a client-side hook.
If you're using Next.js with the App Router, you'll need to add the "use client" directive at the top of any file using this hook.
Next Steps
- Check out how to customize the suggestions look.
- Check out the useCopilotChatSuggestions reference for more details.
