CopilotKit/a2ui-renderer

在 CopilotKit v2 中渲染 A2UI（Agent-to-UI 声明式界面）。通过 CopilotRuntime({ a2ui: {...} }) 启用运行时，然后通过 <CopilotKit a2ui={{ theme }}> 启用 provider。通过 /info 自动激活，不要手动传入 renderActivityMessages。createA2UIMessageRenderer 由 @copilotkit/react-core/v2 提供；底层原语（A2UIProvider、A2UIRenderer、createCatalog）由 @copilotkit/a2ui-renderer 提供。涵盖主题定制、createSurface 去重、action-bridge 的 try/finally 清理。当代理发出 A2UI 操作（createSurface / updateComponents / updateDataModel）、在 CopilotRuntime 上接入 a2ui，或为 A2UI 界面进行样式设计时加载。

编程协作开发 Agent Agent 技能智能体界面渲染 CopilotKit 集成声明式 UI 组件主题定制支持运行时配置

技术栈: cursor3.7万+许可证: MIT开发者: CopilotKit

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

This skill builds on copilotkit/react-core (for CopilotKit provider fundamentals) and copilotkit/runtime (for CopilotRuntime fundamentals). Read those first.

Setup

A2UI has two halves. The runtime declares a2ui middleware; the client enables the a2ui prop on the provider. Once both are set, /info flags A2UI and the client auto-mounts createA2UIMessageRenderer — you do NOT wire renderActivityMessages yourself.

Runtime side (`app/routes/api.copilotkit.$.tsx`)

import type { Route } from "./+types/api.copilotkit.$";
import {
  CopilotRuntime,
  createCopilotRuntimeHandler,
  BuiltInAgent,
  convertInputToTanStackAI,
} from "@copilotkit/runtime/v2";
import { chat } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";

const agent = new BuiltInAgent({
  type: "tanstack",
  factory: ({ input, abortController }) => {
    const { messages, systemPrompts } = convertInputToTanStackAI(input);
    return chat({
      adapter: openaiText("gpt-4o"),
      messages,
      systemPrompts,
      abortController,
    });
  },
});

const runtime = new CopilotRuntime({
  agents: { default: agent },
  // Enabling this key causes /info to advertise A2UI to the c…

以下为摘要预览，完整内容请查看 GitHub 原文。

本 skill 基于 copilotkit/react-core（用于 CopilotKit provider 基础）和 copilotkit/runtime（用于 CopilotRuntime 基础）。请先阅读它们。

设置

A2UI 分为两部分。运行时声明 a2ui 中间件；客户端在 provider 上启用 a2ui prop。两端都设置好后，/info 会标记 A2UI，客户端会自动挂载 createA2UIMessageRenderer—— 你不需要自己接入 renderActivityMessages。

运行时端（`app/routes/api.copilotkit.$.tsx`）

import type { Route } from "./+types/api.copilotkit.$";
import {
  CopilotRuntime,
  createCopilotRuntimeHandler,
  BuiltInAgent,
  convertInputToTanStackAI,
} from "@copilotkit/runtime/v2";
import { chat } from "@tanstack/ai";
import { openaiText } from "@tanstack/ai-openai";

const agent = new BuiltInAgent({
  type: "tanstack",
  factory: ({ input, abortController }) => {
    const { messages, systemPrompts } = convertInputToTanStackAI(input);
    return chat({
      adapter: openaiText("gpt-4o"),
      messages,
      systemPrompts,
      abortController,
    });
  },
});

const runtime = new CopilotRuntime({
  agents: { default: agent },
  // 启用此键会使 /info 向客户端通告 A2UI。
  a2ui: {},
});

const handler = createCopilotRuntimeHandler({
  runtime,
  basePath: "/api/copilotkit",
});

export async function loader({ request }: Route.LoaderArgs) {
  return handler(req…

重要提示：源文件不在本站托管，请通过 GitHub 查看与下载。

索引更新于 8/25/2026, 9:18:05 PMGitHub ↗

SKILL.md8.7 KB在 GitHub 查看 ↗

相关资源

按类型、任务、场景与标签加权推荐

itsPremkumar/mcptest

MCP · Model · Context · Protocol · 测试工具 · 调试 · 开发框架

Automated MCP Server Testing Framework

yair4Data/mcp-security-analyzer

MCP · 安全审计 · 配置扫描 · 权限分析 · 开发工具

Comprehensive security testing framework for Model Context Protocol (MCP) server

Session Continuity Engine

会话续接 · 上下文压缩 · 项目交接 · 跨平台提示词 · JSON · 结构化

把一次完整 AI 对话压缩成可跨平台复用的项目续接包，保留决策、约定与当前进度。

Clinical Research Presentation Guidance

临床研究 · 学术汇报 · 选题指导 · 文献综述 · 演讲技巧 · 批判性思维

以临床研究教授视角，指导学生完成选题、文献、呈现与答辩全流程的学术汇报准备

interview assistance

亚马逊面试 · 行为面试 · 领导力原则 · SQL · Python · 代码面试

亚马逊面试辅助：按领导力原则整理行为面要点，并给出SQL/Python编码题参考解法

Prompt Generator

prompt-engineering · meta-prompt · LLM · GPT · 提示词工程 · 模板生成

让 LLM 按角色、上下文与步骤自动产出高质量提示词的元提示词模板