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.

Specify `"use client"` (Next.js App Router)

This is only necessary if you are using Next.js with the App Router.

YourComponent.tsx

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

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.

Next Steps

Check out the useCopilotChatSuggestions reference for more details.

Copilot Suggestions

Specify "use client" (Next.js App Router)

Simple Usage

Dependency Management

Next Steps

On this page

Specify `"use client"` (Next.js App Router)