ContextQMD
Back to Copilotkit

CopilotKit Custom Message Renderers (React)

skills/react-core/references/custom-message-renderers.md

1.57.46.4 KB
Original Source

CopilotKit Custom Message Renderers (React)

This skill builds on copilotkit/provider-setup and copilotkit/chat-components. useRenderCustomMessages is consumed internally by <CopilotChat> / <CopilotChatView>.

Key rules:

  • Renderers are passed to CopilotKitProvider via renderCustomMessages.
  • The hook returns null when called outside CopilotChatConfigurationProvider.
  • First non-null result wins — agent-scoped renderers evaluated first.
  • stateSnapshot is undefined before the run's runId resolves.

Setup

tsx
"use client";
import { CopilotKitProvider } from "@copilotkit/react-core/v2";
import type { ReactCustomMessageRenderer } from "@copilotkit/react-core/v2";
import { useMemo } from "react";
import { Button } from "@/components/ui/button";

const CopyButton: ReactCustomMessageRenderer = {
  render: ({ message, position }) => {
    if (position !== "after") return null;
    if (message.role !== "assistant") return null;
    const content = typeof message.content === "string" ? message.content : "";
    if (!content) return null;
    return (
      <Button
        variant="ghost"
        size="sm"
        onClick={() => navigator.clipboard.writeText(content)}
      >
        Copy
      </Button>
    );
  },
};

export function Providers({ children }: { children: React.ReactNode }) {
  const renderers = useMemo(() => [CopyButton], []);
  return (
    <CopilotKitProvider
      runtimeUrl="/api/copilotkit"
      renderCustomMessages={renderers}
    >
      {children}
    </CopilotKitProvider>
  );
}

Core Patterns

State-snapshot viewer after completed runs

tsx
const StateSnapshotRenderer: ReactCustomMessageRenderer = {
  render: ({ message, position, stateSnapshot }) => {
    if (position !== "after") return null;
    if (message.role !== "assistant") return null;
    if (!stateSnapshot) return null; // run not yet resolved
    return (
      <details>
        <summary>Agent state</summary>
        <pre>{JSON.stringify(stateSnapshot, null, 2)}</pre>
      </details>
    );
  },
};

Agent-scoped renderer

tsx
const ResearchNotes: ReactCustomMessageRenderer = {
  agentId: "research",
  render: ({ message, position, stateSnapshot }) => {
    if (position !== "after" || !stateSnapshot) return null;
    const notes = (stateSnapshot as { notes?: string[] }).notes ?? [];
    return (
      <ul>
        {notes.map((n, i) => (
          <li key={i}>{n}</li>
        ))}
      </ul>
    );
  },
};

Debug panel before user messages

tsx
const DebugBefore: ReactCustomMessageRenderer = {
  render: ({ message, position, messageIndex, runId }) => {
    if (position !== "before" || message.role !== "user") return null;
    // `runId` is always a string, but it falls back to a synthetic
    // "missing-run-id:<messageId>" value before a run is registered.
    // Slice only when it looks like a real id, otherwise show a dash.
    const shortId = runId?.startsWith("missing-run-id:")
      ? "—"
      : (runId?.slice(0, 6) ?? "—");
    return (
      <div style={{ opacity: 0.5, fontSize: 11 }}>
        #{messageIndex} · run {shortId}
      </div>
    );
  },
};

Common Mistakes

HIGH — Using the hook outside a chat configuration provider

Wrong:

tsx
// Component mounted outside <CopilotChat>/<CopilotChatView>
function StandaloneRenderer() {
  const render = useRenderCustomMessages(); // returns null — no chat config in tree
  return render ? render({ message, position: "after" }) : null;
}

Correct:

tsx
// Option A — register renderers via the provider prop so <CopilotChat> picks them up:
<CopilotKitProvider renderCustomMessages={renderers}>
  <CopilotChat agentId="default" />
</CopilotKitProvider>;

// Option B — call the hook only inside a chat-configured subtree:
import { CopilotChatConfigurationProvider } from "@copilotkit/react-core/v2";
<CopilotChatConfigurationProvider agentId="default">
  <ComponentThatCallsUseRenderCustomMessages />
</CopilotChatConfigurationProvider>;

useRenderCustomMessages returns null when there is no CopilotChatConfigurationProvider in the tree. <CopilotChat> wraps its children in one automatically; direct use outside a chat component requires the explicit wrapper.

Source: packages/react-core/src/v2/hooks/use-render-custom-messages.tsx:15-17

MEDIUM — Relying on stateSnapshot during early streaming

Wrong:

tsx
render: ({ stateSnapshot }) => <pre>{JSON.stringify(stateSnapshot.items)}</pre>;
// Crashes during the first token — stateSnapshot is undefined before runId resolves.

Correct:

tsx
render: ({ stateSnapshot }) => (
  <pre>{stateSnapshot ? JSON.stringify(stateSnapshot.items) : "…"}</pre>
);

stateSnapshot comes from copilotkit.getStateByRun(agentId, threadId, runId). runId is undefined until the run is registered, so the snapshot starts undefined and only becomes truthy after the first state emit. Guard with a fallback.

Source: packages/react-core/src/v2/hooks/use-render-custom-messages.tsx:69-71

MEDIUM — Expecting every renderer in the array to run

Wrong:

tsx
// Both renderers want to add an "after assistant" button and return <div>…</div>
// Only the first one (or the agent-scoped one) fires — the second is skipped.
const renderers = [Renderer1, Renderer2];

Correct:

tsx
// Merge the two into a single renderer that returns one element:
const Combined: ReactCustomMessageRenderer = {
  render: (props) => (
    <div className="flex gap-1">
      <Renderer1Inner {...props} />
      <Renderer2Inner {...props} />
    </div>
  ),
};

The hook iterates the sorted renderer list and breaks at the first non-null result. Two independent renderers returning JSX for the same (message, position) pair will have only one fire. Compose them into a single renderer if you want both to appear.

Source: packages/react-core/src/v2/hooks/use-render-custom-messages.tsx:73-95

MEDIUM — Memoization miss on renderCustomMessages array

Wrong:

tsx
<CopilotKitProvider
  renderCustomMessages={[CopyButton, DebugBefore]} // fresh array every render
/>

Correct:

tsx
const renderers = useMemo(() => [CopyButton, DebugBefore], []);
<CopilotKitProvider renderCustomMessages={renderers} />;

The provider's stable-array-prop diff console-errors when a new array identity appears every render and thrashes renderer registration. Memoize or hoist.

Source: packages/react-core/src/v2/providers/CopilotKitProvider.tsx (useStableArrayProp)