copilotkit--copilotkit/examples/v2/vue/demo/server/utils/runtime.ts

import { MCPAppsMiddleware } from "@ag-ui/mcp-apps-middleware";
import {
  BasicAgent,
  CopilotRuntime,
  InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { TranscriptionServiceOpenAI } from "@copilotkit/voice";
import OpenAI from "openai";
import { AbstractAgent, EventType } from "@ag-ui/client";
import type { BaseEvent, RunAgentInput } from "@ag-ui/client";
import { Observable } from "rxjs";

const determineModel = () => {
  if (process.env.OPENAI_API_KEY?.trim()) {
    return "openai/gpt-4o";
  }
  if (process.env.ANTHROPIC_API_KEY?.trim()) {
    return "anthropic/claude-sonnet-4.5";
  }
  if (process.env.GOOGLE_API_KEY?.trim()) {
    return "google/gemini-2.5-pro";
  }
  return "openai/gpt-4o";
};

const createTranscriptionService = () => {
  if (!process.env.OPENAI_API_KEY?.trim()) {
    return undefined;
  }
  return new TranscriptionServiceOpenAI({
    openai: new OpenAI({ apiKey: process.env.OPENAI_API_KEY }),
  });
};

/**
 * Minimal demo agent that drives the `/a2ui-demo` route.
 *
 * First run  → emits an A2UI surface with a "Confirm" button.
 * Button click → runAgent fires again with forwardedProps.a2uiAction set,
 *                and the agent replies with a confirmation text message.
 *
 * Mirrors `DemoButtonAgent` in the React demo's
 * `src/app/api/copilotkit/[[...slug]]/route.ts`.
 */
class DemoButtonAgent extends AbstractAgent {
  run(input: RunAgentInput): Observable<BaseEvent> {
    return new Observable((observer) => {
      const emit = (event: BaseEvent) => observer.next(event);

      emit({
        type: EventType.RUN_STARTED,
        threadId: input.threadId,
        runId: input.runId,
      } as BaseEvent);

      const a2uiAction = (input.forwardedProps as Record<string, unknown>)
        ?.a2uiAction;

      if (a2uiAction) {
        const msgId = crypto.randomUUID();
        emit({
          type: EventType.TEXT_MESSAGE_START,
          messageId: msgId,
          role: "assistant",
        } as BaseEvent);
        emit({
          type: EventType.TEXT_MESSAGE_CONTENT,
          messageId: msgId,
          delta: `✅ Confirmed! (thread: ${input.threadId}) — if you can read this, the fix is working.`,
        } as BaseEvent);
        emit({
          type: EventType.TEXT_MESSAGE_END,
          messageId: msgId,
        } as BaseEvent);
      } else {
        const activityId = crypto.randomUUID();
        emit({
          type: EventType.ACTIVITY_SNAPSHOT,
          messageId: activityId,
          activityType: "a2ui-surface",
          content: {
            // Canonical A2UI v0.9 content key + operation format (matches
            // @ag-ui/a2ui-middleware, @copilotkit/vue's A2UIMessageRenderer,
            // @a2ui/web_core, and the Python SDK). The root component must
            // have id "root".
            a2ui_operations: [
              {
                version: "v0.9",
                createSurface: {
                  surfaceId: "demo-surface",
                  catalogId:
                    "https://a2ui.org/specification/v0_9/basic_catalog.json",
                },
              },
              {
                version: "v0.9",
                updateComponents: {
                  surfaceId: "demo-surface",
                  components: [
                    {
                      id: "root",
                      component: "Column",
                      children: ["prompt-text", "confirm-btn"],
                    },
                    {
                      id: "prompt-text",
                      component: "Text",
                      text: "Click the button to trigger a response:",
                      variant: "body",
                    },
                    {
                      id: "btn-label",
                      component: "Text",
                      text: "Confirm",
                    },
                    {
                      id: "confirm-btn",
                      component: "Button",
                      child: "btn-label",
                      variant: "primary",
                      action: { event: { name: "confirm" } },
                    },
                  ],
                },
              },
            ],
          },
        } as BaseEvent);

        const msgId = crypto.randomUUID();
        emit({
          type: EventType.TEXT_MESSAGE_START,
          messageId: msgId,
          role: "assistant",
        } as BaseEvent);
        emit({
          type: EventType.TEXT_MESSAGE_CONTENT,
          messageId: msgId,
          delta:
            "Click the button above. Without the fix, the confirmation message won't appear here.",
        } as BaseEvent);
        emit({
          type: EventType.TEXT_MESSAGE_END,
          messageId: msgId,
        } as BaseEvent);
      }

      emit({ type: EventType.RUN_FINISHED } as BaseEvent);
      observer.complete();
    });
  }

  clone(): AbstractAgent {
    return new DemoButtonAgent();
  }
}

export const createDefaultRuntime = () =>
  new CopilotRuntime({
    agents: {
      default: new BasicAgent({
        model: determineModel(),
        prompt: "You are a helpful AI assistant.",
        temperature: 0.7,
      }),
      "demo-button": new DemoButtonAgent(),
    },
    runner: new InMemoryAgentRunner(),
    transcriptionService: createTranscriptionService(),
    a2ui: {},
  });

/**
 * Catalog-on-provider runtime: same DemoButtonAgent, but the runtime has NO
 * `a2ui` config. A2UI is meant to switch on purely from the client passing
 * `a2ui.catalog` to the provider (which forwards `a2uiCatalogAvailable`).
 * Used by `/a2ui-catalog` to validate the #5774 fix in isolation.
 */
export const createCatalogOnlyRuntime = () =>
  new CopilotRuntime({
    agents: {
      "demo-button": new DemoButtonAgent(),
    },
    runner: new InMemoryAgentRunner(),
  });

export const createMcpRuntime = () => {
  const agent = new BasicAgent({
    model: determineModel(),
    prompt: "You are a helpful AI assistant with access to MCP apps and tools.",
    temperature: 0.7,
  }).use(
    new MCPAppsMiddleware({
      mcpServers: [
        { type: "http", url: "http://localhost:3101/mcp" },
        { type: "http", url: "http://localhost:3102/mcp" },
        { type: "http", url: "http://localhost:3103/mcp" },
        { type: "http", url: "http://localhost:3104/mcp" },
        { type: "http", url: "http://localhost:3105/mcp" },
        { type: "http", url: "http://localhost:3106/mcp" },
        { type: "http", url: "http://localhost:3107/mcp" },
        { type: "http", url: "http://localhost:3108/mcp" },
        { type: "http", url: "http://localhost:3109/mcp" },
        { type: "http", url: "http://localhost:3110/mcp" },
        { type: "http", url: "http://localhost:3111/mcp" },
        { type: "http", url: "http://localhost:3112/mcp" },
      ],
    }),
  );

  return new CopilotRuntime({
    agents: { default: agent },
    runner: new InMemoryAgentRunner(),
  });
};