CopilotKit

This guide assumes the application already has a working CopilotKit chat. First, follow the backend setup guide to configure the agent to return OpenUI Lang. Then replace CopilotKit's assistantMessage.markdownRenderer slot with the OpenUI Lang renderer.

Render OpenUI Lang

src/components/chat.tsx

"use client";

import { CopilotChat } from "@copilotkit/react-core/v2";
import { Renderer } from "@openuidev/react-lang";
import { openuiLibrary } from "@openuidev/react-ui";

function OpenUIRenderer({ content }: { content: string }) {
  return <Renderer response={content} library={openuiLibrary} />;
}

export function Chat() {
  return (
    <CopilotChat
      messageView={{
        assistantMessage: {
          markdownRenderer: OpenUIRenderer,
        },
      }}
    />
  );
}

content is the accumulated agent response supplied by CopilotKit.

Continue with The Renderer for the complete API.

Render OpenUI Lang

On this page