Generative UI

The Generative UI feature allows you to dynamically render React components in the copilot chat window. The components will be updated in real-time as the arguments are streamed.

Rendering a UI Component

Generative UI is achieved through the useCopilotAction hook. The hook accepts a render method. Whatever is returned from this method will be rendered in the copilot chat window.

In the example below, we take one of the actions we added in the Todo List Copilot Tutorial and add a generative UI element to it:

useCopilotAction({
  name: "deleteTask",
  description: "Deletes a task from the todo list",
  parameters: [
    {
      name: "id",
      type: "number",
      description: "The id of the task",
      required: true,
    },
  ],
  handler: ({ id }) => {
    deleteTask(id);
  },
  render: ({ status, args }) => (
    <div className="flex justify-center items-center text-sm">
      {status !== "complete" && <p>Deleting task with ID {args.id}...</p>}
      <div className="flex gap-2">
        <span>✅</span>
        <span className="font-semibold">Task with ID {args.id} deleted.</span>
      </div>
    </div>
  ),
});

And here is the code for the action:

Rendering a Waiting Message

Sometimes, you might want to display a simple text message to let the user know that the action is in progress. To do this, simply return a string from the render method. For example:

useCopilotAction({
  ...,
  render: "Processing..."
});

Reference

For more information on the useCopilotAction hook and specifically the render method, please refer to the useCopilotAction reference page.