Markdown Rendering - Copilotkit

import { Frame } from "@/components/react/frame"

When rendering an assistant message, CopilotKit uses react-markdown under the hood. This allows us to render rich text with links, headers and other UI components.

If you wish to modify this behavior, you can either enrich and override the individual markdown components, or replace the entire <AssistantMessage /> entirely. This is useful for displaying elements within the assistant answer text, such as source citing, reasoning steps etc.

Here's how it can be done:

Replacing/Providing the markdown components with your own

We will be adding a chip component. Similar to the one available with ChatGPT when sources are cited. <Steps> <Step> First, let's create a chip component

tsx

import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar, ComponentsMap } from "@copilotkit/react-core/v2";
import "@copilotkit/react-ui/v2/styles.css";
// We will include the styles in a separate css file, for convenience
import "./styles.css";

function YourComponent() {
    const customMarkdownTagRenderers: ComponentsMap<{ "reference-chip": { href: string } }> = {
        // You can make up your own tags, or use existing, valid HTML ones!
        "reference-chip": ({ children, href }) => {
            return (
                <a
                href={href}
                target="_blank"
                rel="noopener noreferrer"
                className="w-fit border rounded-xl py-1 px-2 text-xs" // Classes list trimmed for brevity
                >
                    {children}
                    <LinkIcon className="w-3.5 h-3.5" />
                </a>
            );
        },
    };

    return (
        <CopilotKit>
          <CopilotSidebar
            markdownTagRenderers={customMarkdownTagRenderers}
          />
        </CopilotKit>
    )
}

</Step> <Step> Now, let's add styles to the component ```css .reference-chip { display: inline-flex; align-items: center; justify-content: center; background-color: #f0f1f2; color: #444; border-radius: 12px; padding: 2px 8px; font-size: 0.8rem; font-weight: 500; text-decoration: none; margin: 0 2px; border: 1px solid #e0e0e0; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } ``` </Step> </Steps>

Replacing the entire markdown renderer

If you wish to avoid the markdown renderer altogether, you can replace the <AssistantMessage /> component, which is the one to use it. See Custom Sub-Components