CopilotKit

useSuggestions

React hook for accessing chat suggestions

Overview

useSuggestions is a React hook that provides access to the current chat suggestions for a given agent. It subscribes to suggestion changes and automatically re-renders when suggestions are updated, cleared, or reloaded.

Re-exported from @copilotkit/react-core/v2. It is identical to the React (V2) useSuggestions; only the import path differs.

Suggestions are configured via useConfigureSuggestions and can be either static (predefined) or dynamic (generated by the agent).

Signature

import { useSuggestions } from "@copilotkit/react-native";

function useSuggestions(options?: UseSuggestionsOptions): UseSuggestionsResult;

Parameters

Prop

Type

Return Value

Prop

Type

Usage

Basic Usage

import { Text, View } from "react-native";

function SuggestionsList() {
  const { suggestions, isLoading } = useSuggestions();

  if (isLoading) {
    return <Text>Loading suggestions...</Text>;
  }

  return (
    <View>
      {suggestions.map((suggestion, i) => (
        <View key={i}>
          <Text style={{ fontWeight: "bold" }}>{suggestion.title}</Text>
          <Text>{suggestion.message}</Text>
        </View>
      ))}
    </View>
  );
}

With Reload and Clear Controls

import { Text, TouchableOpacity, View } from "react-native";

function SuggestionsPanel() {
  const { suggestions, reloadSuggestions, clearSuggestions, isLoading } =
    useSuggestions();

  return (
    <View>
      <View>
        <TouchableOpacity onPress={reloadSuggestions} disabled={isLoading}>
          <Text>Refresh</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={clearSuggestions}>
          <Text>Clear</Text>
        </TouchableOpacity>
      </View>
      {suggestions.map((suggestion, i) => (
        <TouchableOpacity key={i} disabled={suggestion.isLoading}>
          <Text>{suggestion.title}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

Targeting a Specific Agent

import { Text, View } from "react-native";

function AgentSuggestions() {
  const { suggestions } = useSuggestions({ agentId: "support-agent" });

  return (
    <View>
      <Text>Support Agent Suggestions</Text>
      {suggestions.map((s, i) => (
        <Text key={i}>{s.title}</Text>
      ))}
    </View>
  );
}

Behavior

  • Automatic Subscription: The hook subscribes to suggestion change events on the core instance and re-renders whenever suggestions are added, removed, or updated for the resolved agent.
  • Agent Resolution: The agentId is resolved in the following order of precedence: explicit agentId option, agentId from the nearest CopilotChatConfigurationProvider, then the default agent ID ("default").
  • Loading State: isLoading becomes true when a dynamic suggestion reload begins and returns to false when generation completes.
  • Initial State: On mount, the hook synchronously reads the current suggestions from the core instance, so there is no unnecessary loading flash for static suggestions.

Related