#How to use useCopilotChatSuggestions

1 messages · Page 1 of 1 (latest)

half hinge
#

Hi, I want when starting a chat, the bot will show suggestion like image as an initial state, but I can't find a specific example for using useCopilotChatSuggestions. Can someone guide me?

Screenshot_2025-04-02_at_11.12.52.png
carmine compass
#

You can place the useCopilotChatSuggestions hook in a component that loads with your chat interface.
Something like:

"use client"

import { CopilotPopup } from "@copilotkit/react-ui";
import { useCopilotChatSuggestions } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export default function ChatWithSuggestions() {
  // Generate suggestions when the component loads
  useCopilotChatSuggestions({
    instructions: "Suggest helpful initial questions the user might want to ask.",
    minSuggestions: 2,
    maxSuggestions: 4,
  });

  return (
    <CopilotPopup
      labels={{
        title: "AI Assistant",
        initial: "How can I help you today?",
      }}
    />
  );
}
tacit ridge
#

It would be nice if we could actually control the suggestions, rather than have them generated by the LLM. I'd like to use this for "quick actions" that invoke tools, for example

carmine compass
#

@tacit ridge, you're correct, the chat suggestions are set up to allow the LLM to make suggestions but you can implement custom "quick actions" using other hooks, particularly useCopilotAction.

The useCopilotAction hook allows you to define custom actions that can be triggered in your application. This would be more appropriate for implementing predefined "quick actions" that invoke specific tools.

This starts to get customized

useCopilotAction({
  name: "YourQuickAction",
  available: "remote",
  parameters: [
    {
      name: "actionParameter",
      type: "string",
      description: "Parameter for the action",
      required: true,
    },
  ], 
  renderAndWaitForResponse: ({ args, status, respond }) => (
    <YourCustomComponent 
      args={args}
      status={status}
      respond={respond}
    />
  ),
});
tacit ridge
#

How would this be triggered?

carmine compass
eternal elbow
#

I'm also having issues with using useCopilotChatSuggestions. I followed the simple example (no dependency management): https://docs.copilotkit.ai/reference/hooks/useCopilotChatSuggestions

Like your suggestion above, I have a custom component that loads the CopilotSidebar and in that component I'm calling useCopilotChatSuggestions() with instructions and a min/max suggestions count (2, 5)

The error I get is Error: extract() failed: No function call occurred

When I try to debug this, I am assuming the issue is that the available tools is an empty array, even though the prompt refers to the extract function the model should call.

Here's the generated prompt I see in the trace log:

prompt="<|user|>Human: \nPlease act as an efficient, competent, conscientious, and industrious professional assistant.\n\nHelp the user achieve their goals, and you do so in a way that is as efficient as possible, without unnecessary fluff, but also without sacrificing professionalism.\nAlways be polite and respectful, and prefer brevity over verbosity.\n\nThe user has provided you with the following context:\n\nSuggest helpful initial questions the user might want to ask.\n\nProduce between 2 and 5 suggestions.\n\nAvailable tools: []\n\n\n\n\n\n\n\n\nThey have also provided you with a function called extract you MUST call to initiate actions on their behalf.\n\nPlease assist them as best you can.\n\nThis is not a conversation, so please do not ask questions. Just call the function without saying anything else.\n\nHuman: \nThe user has given you the following task to complete:\n\n\nSuggest what the user could say next. Provide clear, highly relevant suggestions. Do not literally suggest function calls. \n\n\nAny additional messages provided are for providing context only and should not be used to ask questions or engage in conversation.\n<|end|><|assistant|>"

Any ideas @carmine compass ?

useCopilotChatSuggestions

The useCopilotChatSuggestions hook generates suggestions in the chat window based on real-time app state.

wind cedar
#

Hi @eternal elbow, The error "extract() failed: No function call occurred" and the empty "Available tools: []" in your prompt indicate that the extract function is not registered as an available action/tool in the Copilot context.

The useCopilotChatSuggestions hook expects that the functions (actions) the prompt refers to (like extract) are registered in the Copilot context's actions map. If no such function is registered, the available tools list is empty, causing the error.

eternal elbow
#

Hmm. Would like to confirm because I'm seeing the system prompt and the tools being injected by CopilotKit that shows a tool definition for extract() which I did not provide. I have logged the message in the route.ts file (attached) and you can see the dump in the message.txt file that shows the tool definition and the System prompt being passed to Langchain by CopilotKit.

Can you please review and let me know what might be going on. I'm simply trying to get the basic example of useCopilotChatSuggestions() working without any bells or whistles added (yet). Is it because I'm not using OpenAI?

📎 message.txt