CopilotKit

useConfigureSuggestions

React hook for configuring chat suggestions

Overview

useConfigureSuggestions is a React hook that registers a suggestions configuration with the CopilotKit core. It supports two modes: static suggestions (a fixed list) and dynamic suggestions (generated by the agent based on instructions).

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

The configuration is automatically registered on mount and removed on unmount. When the configuration changes, suggestions are reloaded automatically.

Signature

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

function useConfigureSuggestions(
  config: SuggestionsConfigInput | null | undefined,
  deps?: ReadonlyArray<unknown>,
): void;

Parameters

Prop

Type

Prop

Type

Usage

Static Suggestions

function WelcomeSuggestions() {
  useConfigureSuggestions({
    suggestions: [
      { title: "Get started", message: "Help me get started with my project" },
      { title: "Show examples", message: "Show me some example use cases" },
      {
        title: "Documentation",
        message: "Where can I find the documentation?",
      },
    ],
    available: "before-first-message",
  });

  return null;
}

Dynamic Suggestions

function SmartSuggestions() {
  useConfigureSuggestions({
    instructions:
      "Suggest follow-up questions based on the conversation so far. " +
      "Focus on actionable next steps the user might want to take.",
    maxSuggestions: 3,
    minSuggestions: 1,
    available: "after-first-message",
  });

  return null;
}

Dynamic Suggestions with Dependencies

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

const TOPICS = ["general", "technical", "business"];

function ContextualSuggestions() {
  const [topic, setTopic] = useState("general");

  useConfigureSuggestions(
    {
      instructions: `Generate suggestions related to the topic: ${topic}`,
      maxSuggestions: 3,
    },
    [topic],
  );

  return (
    <View style={{ flexDirection: "row", gap: 8 }}>
      {TOPICS.map((value) => (
        <TouchableOpacity key={value} onPress={() => setTopic(value)}>
          <Text style={{ fontWeight: topic === value ? "700" : "400" }}>
            {value}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

Conditionally Disabling Suggestions

function ConditionalSuggestions({ enabled }: { enabled: boolean }) {
  useConfigureSuggestions(
    enabled
      ? {
          suggestions: [{ title: "Help", message: "I need help" }],
        }
      : null,
  );

  return null;
}

Targeting a Specific Agent

function AgentSpecificSuggestions() {
  useConfigureSuggestions({
    instructions: "Suggest data analysis tasks the user can perform.",
    maxSuggestions: 4,
    providerAgentId: "analyst",
    consumerAgentId: "analyst",
    available: "always",
  });

  return null;
}

Behavior

  • Automatic Registration: The configuration is registered with the core on mount and removed on unmount. This ensures clean lifecycle management.
  • Change Detection: The hook serializes the configuration to JSON for comparison. If the serialized value changes, the old config is removed and the new one is registered, triggering a reload.
  • Dependency Tracking: When a deps array is provided, any change in its values triggers a suggestion reload, even if the serialized config itself has not changed.
  • Config Discrimination: The hook distinguishes between dynamic and static configs by checking for the presence of the instructions property. If instructions is present, it is treated as a dynamic config.
  • Disabled State: Passing null, undefined, or a config with available: "disabled" will remove any previously registered configuration and produce no suggestions.
  • isLoading Normalization: For static suggestions, the isLoading field defaults to false if not explicitly provided.

Related