ContextQMD
Back to Copilotkit

Copilot Suggestions

showcase/shell-docs/src/content/snippets/shared/guides/copilot-suggestions.mdx

1.57.01.8 KB
Original Source

import UseClientCalloutSnippet from "@/snippets/use-client-callout.mdx";

<Callout type="warn"> useCopilotChatSuggestions is experimental. The interface is not final and can change without notice. </Callout>

useCopilotChatSuggestions is a React hook that generates suggestions in the chat window based on real time application state.

<Frame> </Frame> <Steps> <Step> ### Simple Usage
tsx
import { useCopilotChatSuggestions } from "@copilotkit/react-core/v2"; // [!code highlight]

export function MyComponent() {
  // [!code highlight:8]
  useCopilotChatSuggestions(
    {
      instructions: "Suggest the most relevant next actions.",
      minSuggestions: 1,
      maxSuggestions: 2,
    },
    [relevantState],
  );
}
</Step> <Step> ### Dependency Management
tsx
import { useCopilotChatSuggestions } from "@copilotkit/react-core/v2";

export function MyComponent() {
  useCopilotChatSuggestions(
    {
      instructions: "Suggest the most relevant next actions.",
      minSuggestions: 1,
      maxSuggestions: 2,
    },
    [relevantState], // [!code highlight]
  );
}

In the example above, the suggestions are generated based on the given instructions. The hook monitors relevantState, and updates suggestions accordingly whenever it changes.

</Step> <Step> <UseClientCalloutSnippet components={props.components} /> </Step> </Steps>

Next Steps