Generative UI

Specify `"use client"` (Next.js App Router)

This is only necessary if you are using Next.js with the App Router.

YourComponent.tsx

"use client"

Like other React hooks such as useState and useEffect, this is a client-side hook. If you're using Next.js with the App Router, you'll need to add the "use client" directive at the top of any file using this hook.

Render custom react components in the chat UI

useCopilotAction can be used with a render function and without a handler to display information or UI elements within the chat.

Here's an example to render a calendar meeting.

import { useCopilotAction } from "@copilotkit/react-core"; 
 
useCopilotAction({ 
  name: "showCalendarMeeting",
  description: "Displays calendar meeting information",
  parameters: [
    {
      name: "date",
      type: "string",
      description: "Meeting date (YYYY-MM-DD)",
      required: true
    },
    {
      name: "time",
      type: "string",
      description: "Meeting time (HH:mm)",
      required: true
    },
    {
      name: "meetingName",
      type: "string",
      description: "Name of the meeting",
      required: false
    }
  ],

  render: ({ status, args }) => {  
    const { date, time, meetingName } = args;
 
    if (status === 'inProgress') {
      return <LoadingView />; // Your own component for loading state
    } else {
      const meetingProps: CalendarMeetingCardProps = {
        date: date,
        time,
        meetingName
      };
      return <CalendarMeetingCardComponent {...meetingProps} />;
    }
  },
});

Test it out!

After defining the action with a render method, ask the copilot to perform the task. For example, you can now ask the copilot to "show tasks" and see the custom UI component rendered in the chat interface.

You can read more about the useCopilotAction hook here.

Generative UI

Specify "use client" (Next.js App Router)

Render custom react components in the chat UI

Test it out!

On this page

Specify `"use client"` (Next.js App Router)