@copilotkit/shared

CopilotKit - Shared

✨ Why CopilotKit?

• Minutes to integrate - Get started quickly with our CLI
• Framework agnostic - Works with React, Next.js, AGUI and more
• Production-ready UI - Use customizable components or build with headless UI
• Built-in security - Prompt injection protection
• Open source - Full transparency and community-driven

🧑‍💻 Real life use cases

Deploy deeply-integrated AI assistants & agents that work alongside your users inside your applications.

🖥️ Code Samples

Drop in these building blocks and tailor them to your needs.

Build with Headless APIs and Pre-Built Components

// Headless UI with full control
const { visibleMessages, appendMessage, setMessages, ... } = useCopilotChat();

// Pre-built components with deep customization options (CSS + pass custom sub-components)
<CopilotPopup
  instructions={"You are assisting the user as best as you can. Answer in the best way possible given the data you have."}
  labels={{ title: "Popup Assistant", initial: "Need any help?" }}
/>

// Frontend actions + generative UI, with full streaming support
useCopilotAction({
  name: "appendToSpreadsheet",
  description: "Append rows to the current spreadsheet",
  parameters: [
    { name: "rows", type: "object[]", attributes: [{ name: "cells", type: "object[]", attributes: [{ name: "value", type: "string" }] }] }
  ],
  render: ({ status, args }) => <Spreadsheet data={canonicalSpreadsheetData(args.rows)} />,
  handler: ({ rows }) => setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, ...canonicalSpreadsheetData(rows)] }),
});

Integrate In-App CoAgents with LangGraph

// Share state between app and agent
const { agentState } = useCoAgent({
  name: "basic_agent",
  initialState: { input: "NYC" }
});

// agentic generative UI
useCoAgentStateRender({
  name: "basic_agent",
  render: ({ state }) => <WeatherDisplay {...state.final_response} />,
});

// Human in the Loop (Approval)
useCopilotAction({
  name: "email_tool",
  parameters: [
    {
      name: "email_draft",
      type: "string",
      description: "The email content",
      required: true,
    },
  ],
  renderAndWaitForResponse: ({ args, status, respond }) => {
    return (
      <EmailConfirmation
        emailContent={args.email_draft || ""}
        isExecuting={status === "executing"}
        onCancel={() => respond?.({ approved: false })}
        onSend={() =>
          respond?.({
            approved: true,
            metadata: { sentAt: new Date().toISOString() },
          })
        }
      />
    );
  },
});

// intermediate agent state streaming (supports both LangGraph.js + LangGraph python)
const modifiedConfig = copilotKitCustomizeConfig(config, {
  emitIntermediateState: [
    {
      stateKey: "outline",
      tool: "set_outline",
      toolArgument: "outline",
    },
  ],
});
const response = await ChatOpenAI({ model: "gpt-4o" }).invoke(
  messages,
  modifiedConfig,
);

🏆 Featured Examples

Trusted Inspector metadata

@copilotkit/shared exports the versioned InspectorMetadataV1 contract and parseInspectorMetadataV1() parser. A Copilot Runtime can use this contract to send project and license context to the Inspector:

interface InspectorMetadataV1 {
  readonly schemaVersion: 1;
  readonly identity?: {
    readonly organizationName: string;
    readonly projectName: string;
  };
  readonly plan?: { readonly code: string; readonly label: string };
  readonly license?: {
    readonly state: "valid" | "none" | "expired" | "unknown";
  };
  readonly action?:
    | { readonly kind: "manage_plan"; readonly url: string }
    | { readonly kind: "renew"; readonly url: string }
    | { readonly kind: "enable_intelligence"; readonly url: string };
  readonly usage?: {
    readonly used: number;
    readonly limit:
      | { readonly kind: "finite"; readonly value: number }
      | { readonly kind: "unlimited" }
      | { readonly kind: "unknown" };
    readonly expiringSoonCount?: number;
  };
}

Every optional module is independent. The parser drops an invalid identity, plan, license, action, or usage module without hiding valid sibling modules. It returns undefined when the top-level value is not a plain object with schemaVersion: 1.

Action URLs are treated as trusted navigation only after parsing. They must use HTTPS, or HTTP on localhost, 127.0.0.1, or [::1]; URLs with credentials, a query string, or a fragment are rejected. Consumers use the accepted URL as supplied and must not derive a destination from identity or plan values.

The optional usage.expiringSoonCount field lets V1 producers report a known count. Older producers may omit it; absence remains valid V1 usage, while 0 is a known count and stays distinct from absence. The parser drops a malformed, inherited, or accessor-backed expiry leaf without removing used, limit, or valid sibling modules. Older V1 consumers ignore the additive field, so producers and consumers do not need a V2 schema or lock-step deployment.

RuntimeInfo.inspectorMetadata?: boolean is the capability signal. Clients only request the optional metadata route when a runtime reports inspectorMetadata: true in its runtime-info response.

Documentation

To get started with CopilotKit, please check out the documentation.

Event and attachment conversion

createAttachmentContent from @copilotkit/shared builds the same AG-UI attachment content part used by the React, Angular, and Vue chat components. It preserves the source and merges the filename into metadata, with explicit metadata taking precedence.

The Node-only @copilotkit/shared/event-transforms entry exports OpenGenerativeUIMiddleware, the existing upstream A2UIMiddleware, and transformRecordedEvents(input, events, options). The latter applies the same converters to one recorded, pre-middleware AG-UI run without executing tools or contacting an agent. Enable converters explicitly with openGenerativeUI: true and/or a2ui: { ...originalRuntimeOptions }. Pass the recorded input, including prior messages and catalog context, to preserve live conversion behavior.

The result includes the original events and generated activities in runtime order. The caller owns persistence IDs, historical timestamps, and provenance. A2UI can generate random message IDs for synthetic tool results; an importer that needs deterministic IDs must assign them before saving. Do not process already transformed histories a second time. This entry does not include MCP execution or recreate runtime configuration absent from the recording.