[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-CopilotKit--generative-ui":3,"tool-CopilotKit--generative-ui":61},[4,18,26,36,44,52],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":17},4358,"openclaw","openclaw\u002Fopenclaw","OpenClaw 是一款专为个人打造的本地化 AI 助手，旨在让你在自己的设备上拥有完全可控的智能伙伴。它打破了传统 AI 助手局限于特定网页或应用的束缚，能够直接接入你日常使用的各类通讯渠道，包括微信、WhatsApp、Telegram、Discord、iMessage 等数十种平台。无论你在哪个聊天软件中发送消息，OpenClaw 都能即时响应，甚至支持在 macOS、iOS 和 Android 设备上进行语音交互，并提供实时的画布渲染功能供你操控。\n\n这款工具主要解决了用户对数据隐私、响应速度以及“始终在线”体验的需求。通过将 AI 部署在本地，用户无需依赖云端服务即可享受快速、私密的智能辅助，真正实现了“你的数据，你做主”。其独特的技术亮点在于强大的网关架构，将控制平面与核心助手分离，确保跨平台通信的流畅性与扩展性。\n\nOpenClaw 非常适合希望构建个性化工作流的技术爱好者、开发者，以及注重隐私保护且不愿被单一生态绑定的普通用户。只要具备基础的终端操作能力（支持 macOS、Linux 及 Windows WSL2），即可通过简单的命令行引导完成部署。如果你渴望拥有一个懂你",349277,3,"2026-04-06T06:32:30",[13,14,15,16],"Agent","开发框架","图像","数据工具","ready",{"id":19,"name":20,"github_repo":21,"description_zh":22,"stars":23,"difficulty_score":10,"last_commit_at":24,"category_tags":25,"status":17},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,"2026-04-05T11:01:52",[14,15,13],{"id":27,"name":28,"github_repo":29,"description_zh":30,"stars":31,"difficulty_score":32,"last_commit_at":33,"category_tags":34,"status":17},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",146793,2,"2026-04-08T23:32:35",[14,13,35],"语言模型",{"id":37,"name":38,"github_repo":39,"description_zh":40,"stars":41,"difficulty_score":32,"last_commit_at":42,"category_tags":43,"status":17},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",108111,"2026-04-08T11:23:26",[14,15,13],{"id":45,"name":46,"github_repo":47,"description_zh":48,"stars":49,"difficulty_score":10,"last_commit_at":50,"category_tags":51,"status":17},4487,"LLMs-from-scratch","rasbt\u002FLLMs-from-scratch","LLMs-from-scratch 是一个基于 PyTorch 的开源教育项目，旨在引导用户从零开始一步步构建一个类似 ChatGPT 的大型语言模型（LLM）。它不仅是同名技术著作的官方代码库，更提供了一套完整的实践方案，涵盖模型开发、预训练及微调的全过程。\n\n该项目主要解决了大模型领域“黑盒化”的学习痛点。许多开发者虽能调用现成模型，却难以深入理解其内部架构与训练机制。通过亲手编写每一行核心代码，用户能够透彻掌握 Transformer 架构、注意力机制等关键原理，从而真正理解大模型是如何“思考”的。此外，项目还包含了加载大型预训练权重进行微调的代码，帮助用户将理论知识延伸至实际应用。\n\nLLMs-from-scratch 特别适合希望深入底层原理的 AI 开发者、研究人员以及计算机专业的学生。对于不满足于仅使用 API，而是渴望探究模型构建细节的技术人员而言，这是极佳的学习资源。其独特的技术亮点在于“循序渐进”的教学设计：将复杂的系统工程拆解为清晰的步骤，配合详细的图表与示例，让构建一个虽小但功能完备的大模型变得触手可及。无论你是想夯实理论基础，还是为未来研发更大规模的模型做准备",90106,"2026-04-06T11:19:32",[35,15,13,14],{"id":53,"name":54,"github_repo":55,"description_zh":56,"stars":57,"difficulty_score":10,"last_commit_at":58,"category_tags":59,"status":17},4292,"Deep-Live-Cam","hacksider\u002FDeep-Live-Cam","Deep-Live-Cam 是一款专注于实时换脸与视频生成的开源工具，用户仅需一张静态照片，即可通过“一键操作”实现摄像头画面的即时变脸或制作深度伪造视频。它有效解决了传统换脸技术流程繁琐、对硬件配置要求极高以及难以实时预览的痛点，让高质量的数字内容创作变得触手可及。\n\n这款工具不仅适合开发者和技术研究人员探索算法边界，更因其极简的操作逻辑（仅需三步：选脸、选摄像头、启动），广泛适用于普通用户、内容创作者、设计师及直播主播。无论是为了动画角色定制、服装展示模特替换，还是制作趣味短视频和直播互动，Deep-Live-Cam 都能提供流畅的支持。\n\n其核心技术亮点在于强大的实时处理能力，支持口型遮罩（Mouth Mask）以保留使用者原始的嘴部动作，确保表情自然精准；同时具备“人脸映射”功能，可同时对画面中的多个主体应用不同面孔。此外，项目内置了严格的内容安全过滤机制，自动拦截涉及裸露、暴力等不当素材，并倡导用户在获得授权及明确标注的前提下合规使用，体现了技术发展与伦理责任的平衡。",88924,"2026-04-06T03:28:53",[14,15,13,60],"视频",{"id":62,"github_repo":63,"name":64,"description_en":65,"description_zh":66,"ai_summary_zh":67,"readme_en":68,"readme_zh":69,"quickstart_zh":70,"use_case_zh":71,"hero_image_url":72,"owner_login":73,"owner_name":73,"owner_avatar_url":74,"owner_bio":75,"owner_company":75,"owner_location":75,"owner_email":75,"owner_twitter":75,"owner_website":76,"owner_url":77,"languages":75,"stars":78,"forks":79,"last_commit_at":80,"license":75,"difficulty_score":81,"env_os":82,"env_gpu":82,"env_ram":82,"env_deps":83,"category_tags":94,"github_topics":95,"view_count":32,"oss_zip_url":75,"oss_zip_packed_at":75,"status":17,"created_at":100,"updated_at":101,"faqs":102,"releases":103},5760,"CopilotKit\u002Fgenerative-ui","generative-ui","Generative UI examples for: AG-UI, A2UI\u002FOpen-JSON-UI, and MCP Apps.","generative-ui 是一个专注于为智能体（Agentic）应用构建动态用户界面的开源项目。它打破了传统界面由开发者预先写死的限制，让 AI 智能体能够在运行时根据实时上下文，动态生成、选择或控制界面元素。这意味着应用不再只是输出文本，而是能直接呈现可交互的图表、表单或自定义组件，使界面随用户需求灵活演变。\n\n该项目主要解决了智能体应用中“最后一公里”的交互难题：如何让 AI 的输出从单薄的文字对话，升级为丰富、直观且可操作的功能界面。通过提供一套完整的协议与示例，它帮助开发者在不同控制粒度下实现界面生成，既保证了系统的稳定性，又赋予了 AI 足够的灵活性。\n\ngenerative-ui 特别适合前端工程师、全栈开发者以及正在探索 AI 应用落地的研究人员使用。其核心技术亮点在于支持三种不同的生成模式：高可控的“受控生成”（基于 AG-UI 协议）、平衡灵活的“声明式生成”（基于 A2UI\u002FOpen-JSON-UI），以及高度自由的“开放式生成”（基于 MCP Apps）。这些模式均构建在统一的 AG-UI 交互协议之上，确保了智能体与应用前端之间高效、标准化的双向通信，是打造下","generative-ui 是一个专注于为智能体（Agentic）应用构建动态用户界面的开源项目。它打破了传统界面由开发者预先写死的限制，让 AI 智能体能够在运行时根据实时上下文，动态生成、选择或控制界面元素。这意味着应用不再只是输出文本，而是能直接呈现可交互的图表、表单或自定义组件，使界面随用户需求灵活演变。\n\n该项目主要解决了智能体应用中“最后一公里”的交互难题：如何让 AI 的输出从单薄的文字对话，升级为丰富、直观且可操作的功能界面。通过提供一套完整的协议与示例，它帮助开发者在不同控制粒度下实现界面生成，既保证了系统的稳定性，又赋予了 AI 足够的灵活性。\n\ngenerative-ui 特别适合前端工程师、全栈开发者以及正在探索 AI 应用落地的研究人员使用。其核心技术亮点在于支持三种不同的生成模式：高可控的“受控生成”（基于 AG-UI 协议）、平衡灵活的“声明式生成”（基于 A2UI\u002FOpen-JSON-UI），以及高度自由的“开放式生成”（基于 MCP Apps）。这些模式均构建在统一的 AG-UI 交互协议之上，确保了智能体与应用前端之间高效、标准化的双向通信，是打造下一代自适应 AI 应用的有力工具。","\u003Cdiv align=\"center\">\n  \u003Ch1>🔮 Generative UI for Agentic Apps\u003C\u002Fh1>\n\n  \u003Cp>\n    \u003Ca href=\"https:\u002F\u002Fwww.copilotkit.ai\u002Fgenerative-ui\">\n      \u003Cimg alt=\"Website: Generative UI\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-Generative%20UI-6963ff\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\">\n      \u003Cimg alt=\"Docs: Generative UI\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDocs-Generative%20UI-6963ff?style=flat\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fag-ui-protocol-bridging-agents-to-any-front-end\">\n      \u003Cimg alt=\"Protocol: AG-UI\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FProtocol-AG--UI-6963ff?style=flat\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002F6dffbvGU3D\">\n      \u003Cimg alt=\"Discord\" src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1122926057641742418?logo=discord&logoColor=%23FFFFFF&label=Discord&color=%236963ff\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\">\n      \u003Cimg alt=\"GitHub stars\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FCopilotKit\u002FCopilotKit\" \u002F>\n    \u003C\u002Fa>\n  \u003C\u002Fp>\n\n  \u003Cp>Build apps that adapt to your users.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n## Generative UI Resources\n\n- [What is Generative UI?](#what-is-generative-ui)\n- [The 3 types of Generative UI](#the-3-types-of-generative-ui)\n  - [Controlled Generative UI (AG-UI)](#1-controlled-generative-ui-ag-ui)\n  - [Declarative Generative UI (A2UI + Open-JSON-UI)](#2-declarative-generative-ui-a2ui--openjsonui)\n  - [Open-ended Generative UI (MCP Apps)](#3-open-ended-generative-ui-mcp-apps)\n    - [Real-world example: Excalidraw MCP Apps](#real-world-example-excalidraw-mcp-apps)\n  - [Open Generative UI (useComponent)](#4-open-generative-ui-usecomponent)\n\n- [Generative UI Playground](#generative-ui-playground)\n- [Blogs](#blogs)\n- [Videos](#videos)\n- [Additional Resources](#additional-resources)\n- [Contributing](#-contributions-are-welcome)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fed28c734-e54e-4412-873f-4801da544a7f\n\n\u003Cbr \u002F>\n\nThis repository walks through how agentic UI protocols (AG-UI, A2UI, MCP Apps) enable Generative UI patterns (Controlled, Declarative, Open-ended) and how to implement them using CopilotKit.\n\n👉 [OpenGenerativeUI](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI) - Open source framework for building Generative UI in agentic apps \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\">\u003Cimg alt=\"GitHub stars\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FCopilotKit\u002FOpenGenerativeUI\" \u002F>\u003C\u002Fa>\n\n👉 [Generative UI Guide (PDF)](assets\u002Fgenerative-ui-guide.pdf) - a conceptual overview of Generative UI, focused on trade-offs, UI surfaces and how agentic UI protocols work together.\n\n---\n\n## What is Generative UI?\n\nGenerative UI is a pattern in which parts of the user interface are generated, selected, or controlled by an AI agent at runtime rather than being fully predefined by developers.\n\nInstead of only generating text, agents can send UI state, structured UI specs, or interactive UI blocks that the frontend renders in real time. This turns UI from fixed, developer-defined screens into an interface that adapts as the agent works and as context changes.\n\nIn the CopilotKit ecosystem, Generative UI is approached in three practical patterns, implemented using different agentic UI protocols and specifications that define how agents communicate UI updates to applications:\n\n- Controlled Generative UI (high control, low freedom) → [AG-UI](https:\u002F\u002Fgithub.com\u002Fag-ui-protocol\u002Fag-ui)\n- Declarative Generative UI (shared control) → [A2UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fa2ui), [Open-JSON-UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui)\n- Open-ended Generative UI (low control, high freedom) → [MCP Apps](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\u002Fspecs\u002Fmcp-apps) \u002F Custom UIs\n\n[AG-UI (Agent-User Interaction Protocol)](https:\u002F\u002Fgithub.com\u002Fag-ui-protocol\u002Fag-ui) serves as the bidirectional runtime interaction layer beneath these patterns, providing the agent ↔ application connection that enables Generative UI and works uniformly across A2UI, MCP Apps, Open-JSON-UI, and custom UI specifications.\n\n\u003Cimg width=\"1920\" height=\"1075\" alt=\"AG-UI runtime architecture\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_a5b6edf86a9b.png\" \u002F>\n\n\u003Cbr \u002F>\n\nThe rest of this repo walks through each pattern from most constrained to most open-ended and shows how to implement them using CopilotKit.\n\n---\n\n# The 3 Types of Generative UI\n\n## 1. Controlled Generative UI (AG-UI)\n\n\u003Cimg width=\"977\" height=\"548\" alt=\"controlled Generative UI example\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_1bf558879b82.png\" \u002F>\n\nControlled Generative UI means you pre-build UI components, and the agent chooses which component to show and passes it the data it needs.\n\nThis is the most controlled approach: you own the layout, styling, and interaction patterns, while the agent controls when and which UI appears.\n\nIn CopilotKit, this pattern is implemented using the `useFrontendTool` hook, which lets the application register the `get_weather` tool and define how the predefined React UI is rendered across each phase of the tool’s execution lifecycle.\n\n```typescript\n\u002F\u002F Weather tool - callable tool that displays weather data in a styled card\nuseFrontendTool({\n  name: \"get_weather\",\n  description: \"Get current weather information for a location\",\n  parameters: z.object({ location: z.string().describe(\"The city or location to get weather for\") }),\n  handler: async ({ location }) => {\n    await new Promise((r) => setTimeout(r, 500));\n    return getMockWeather(location);\n  },\n  render: ({ status, args, result }) => {\n    if (status === \"inProgress\" || status === \"executing\") {\n      return \u003CWeatherLoadingState location={args?.location} \u002F>;\n    }\n    if (status === \"complete\" && result) {\n      const data = JSON.parse(result) as WeatherData;\n      return (\n        \u003CWeatherCard\n          location={data.location}\n          temperature={data.temperature}\n          conditions={data.conditions}\n          humidity={data.humidity}\n          windSpeed={data.windSpeed}\n        \u002F>\n      );\n    }\n    return \u003C>\u003C\u002F>;\n  },\n});\n```\n\n- Try it out: [go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- Docs: [docs.copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui)\n- Specs hub (overview): [docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs)\n- Ecosystem (how specs + runtime fit): [copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fwww.copilotkit.ai\u002Fgenerative-ui)\n\n---\n\n## 2. Declarative Generative UI (A2UI + Open‑JSON‑UI)\n\n\u003Cimg width=\"963\" height=\"532\" alt=\"Declarative Generative UI overview\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_ab56db59987b.png\" \u002F>\n\nDeclarative Generative UI sits between controlled and open-ended approaches. Here, the agent returns a structured UI description (cards, lists, forms, widgets) and the frontend renders it.\n\nTwo common declarative specifications used for Generative UI are A2UI and Open-JSON-UI.\n\n1. [A2UI](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FA2UI) → declarative Generative UI spec from Google, described as JSONL-based and streaming, designed for platform-agnostic rendering\n\n2. [Open‑JSON‑UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui) → open standardization of OpenAI’s internal declarative Generative UI schema\n\nLet's first understand the basic flow of how to implement A2UI.\n\nInstead of writing A2UI JSON by hand, you can use the [A2UI Composer](https:\u002F\u002Fa2ui-composer.ag-ui.com\u002F) to generate the spec for you. Copy the output and paste it into your agent’s prompt as a reference template.\n\n\u003Cimg width=\"1358\" height=\"608\" alt=\"A2UI Composer\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_58de8ea494ec.png\" \u002F>\n\nIn `prompt_builder.py`, add one A2UI JSONL example so the agent learns the three message envelopes A2UI expects: `surfaceUpdate` (components), `dataModelUpdate` (state), then `beginRendering` (render signal).\n\n```python\nUI_EXAMPLES = \"\"\"\n---BEGIN FORM_EXAMPLE---\n{\"surfaceUpdate\":{\"surfaceId\":\"form-surface\",\"components\":[ ... ]}}\n{\"dataModelUpdate\":{\"surfaceId\":\"form-surface\",\"path\":\"\u002F\",\"contents\":[ ... ]}}\n{\"beginRendering\":{\"surfaceId\":\"form-surface\",\"root\":\"form-column\",\"styles\":{ ... }}}\n---END FORM_EXAMPLE---\n\"\"\"\n```\n\nInject `UI_EXAMPLES` into the agent instruction so it can output valid A2UI message lines when a UI is requested.\n\n```python\ninstruction = AGENT_INSTRUCTION + get_ui_prompt(self.base_url, UI_EXAMPLES)\n\nreturn LlmAgent(\n    model=LiteLlm(model=LITELLM_MODEL),\n    name=\"ui_generator_agent\",\n    description=\"Generates dynamic UI via A2UI declarative JSON.\",\n    instruction=instruction,\n    tools=[],\n)\n```\n\nFinal step: on the frontend, pass `createA2UIMessageRenderer(...)` into `renderActivityMessages` so CopilotKit renders streamed A2UI output as UI and forwards UI actions back to the agent.\n\n```typescript\nimport { CopilotKitProvider, CopilotSidebar } from \"@copilotkitnext\u002Freact\";\nimport { createA2UIMessageRenderer } from \"@copilotkit\u002Fa2ui-renderer\";\nimport { a2uiTheme } from \"..\u002Ftheme\";\n\nconst A2UIRenderer = createA2UIMessageRenderer({ theme: a2uiTheme });\n\nexport function A2UIPage({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CCopilotKitProvider\n      runtimeUrl=\"\u002Fapi\u002Fcopilotkit-a2ui\"\n      renderActivityMessages={[A2UIRenderer]}   \u002F\u002F ← hook in the A2UI renderer\n    >\n      {children}\n      \u003CCopilotSidebar defaultOpen labels={{ modalHeaderTitle: \"A2UI Assistant\" }} \u002F>\n    \u003C\u002FCopilotKitProvider>\n  );\n}\n```\n\nHere is a calendar demo using A2UI and Agent Spec.\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F48158b9d-188d-42d1-835b-32d7425cc43a\n\nThe pattern is the same for Open‑JSON‑UI. An agent can respond with an Open‑JSON‑UI payload that describes a UI “card” in JSON and the frontend renders it.\n\n```js\n\u002F\u002F Example (illustrative): Agent returns a declarative Open-JSON-UI–style specification\n{\n  type: \"open-json-ui\",\n  spec: {\n    components: [\n      {\n        type: \"card\",\n        properties: {\n          title: \"Data Visualization\",\n          content: { ... }\n        }\n      }\n    ]\n  }\n}\n```\n\n\u003Cimg width=\"1038\" height=\"337\" alt=\"Open-JSON-UI example\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_e54b22bfecf4.png\" \u002F>\n\n- Try it out: [go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- Docs: [docs.copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui)\n- Open‑JSON‑UI Specs (CopilotKit docs): [docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui)\n- A2UI Specs (CopilotKit docs): [docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fa2ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fa2ui)\n- Example (A2UI + Agent Spec): [github.com\u002FCopilotKit\u002Fwith-agent-spec](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fwith-agent-spec)\n- Ecosystem (how specs + runtime fit): [copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fwww.copilotkit.ai\u002Fgenerative-ui)\n- How AG‑UI and A2UI fit together: [copilotkit.ai\u002Fag-ui-and-a2ui](https:\u002F\u002Fwww.copilotkit.ai\u002Fag-ui-and-a2ui)\n\n---\n\n## 3. Open-ended Generative UI (MCP Apps)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F48eeab8d-7845-4d06-83ef-d518a807da03\n\nOpen-ended Generative UI is when the agent returns a complete UI surface (often HTML\u002Fiframes\u002Ffree-form content), and the frontend mostly serves as a container to display it.\n\nThe trade-offs are higher: security\u002Fperformance concerns when rendering arbitrary content, inconsistent styling, and reduced portability outside the web.\n\nThis pattern is commonly used for MCP Apps. In CopilotKit, MCP Apps support is enabled by attaching `MCPAppsMiddleware` to your agent, which allows the runtime to connect to one or more MCP Apps servers.\n\n```typescript\nimport { BuiltInAgent } from \"@copilotkit\u002Fruntime\u002Fv2\";\nimport { MCPAppsMiddleware } from \"@ag-ui\u002Fmcp-apps-middleware\";\n\nconst agent = new BuiltInAgent({\n  model: \"openai\u002Fgpt-5.2\",\n  prompt: \"You are a helpful assistant.\",\n}).use(\n  new MCPAppsMiddleware({\n    mcpServers: [\n      {\n        type: \"http\",\n        url: \"https:\u002F\u002Fmcp.excalidraw.com\u002Fmcp\", \u002F\u002F or your local server: http:\u002F\u002Flocalhost:3001\u002Fmcp\n        serverId: \"my-server\",\n      },\n    ],\n  }),\n);\n```\n\n- Try it out: [go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- Playground Repo: [examples\u002Fshowcases\u002Fmcp-apps](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Ftree\u002Fmain\u002Fexamples\u002Fshowcases\u002Fmcp-apps)\n- Docs: [docs.copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui)\n- MCP Apps spec: [docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fmcp-apps](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fmcp-apps)\n- Practical guide (complete integration flow): [Bring MCP Apps into your OWN app with CopilotKit & AG-UI](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fbring-mcp-apps-into-your-own-app-with-copilotkit-and-ag-ui)\n\n### Real-world example: Excalidraw MCP Apps\n\nWe built an MCP-powered AI diagramming app with CopilotKit and a modified [Excalidraw MCP server](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw-mcp). Describe anything in chat and get a fully editable Excalidraw diagram back in seconds.\n\nThe full CopilotKit runtime setup in `src\u002Fapp\u002Fapi\u002Fcopilotkit\u002Froute.ts`:\n\n```typescript\nimport {\n  CopilotRuntime,\n  ExperimentalEmptyAdapter,\n  copilotRuntimeNextJSAppRouterEndpoint,\n} from \"@copilotkit\u002Fruntime\";\nimport { BuiltInAgent } from \"@copilotkit\u002Fruntime\u002Fv2\";\nimport { NextRequest } from \"next\u002Fserver\";\nimport { MCPAppsMiddleware } from \"@ag-ui\u002Fmcp-apps-middleware\";\n\nconst agent = new BuiltInAgent({\n  model: \"openai\u002Fgpt-5\",\n  prompt: `You are an AI diagramming assistant powered by Excalidraw...`, \u002F\u002F full prompt in repo\n}).use(\n  new MCPAppsMiddleware({\n    mcpServers: [\n      {\n        type: \"http\",\n        url: process.env.MCP_SERVER_URL ?? \"http:\u002F\u002Flocalhost:3001\u002Fmcp\",\n        serverId: \"excalidraw\",\n      },\n    ],\n  }),\n);\n\nconst serviceAdapter = new ExperimentalEmptyAdapter();\n\nconst runtime = new CopilotRuntime({\n  agents: {\n    default: agent,\n  },\n});\n\nexport const POST = async (req: NextRequest) => {\n  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({\n    runtime,\n    serviceAdapter,\n    endpoint: \"\u002Fapi\u002Fcopilotkit\",\n  });\n\n  return handleRequest(req);\n};\n```\n\nThe agent calls `create_view` on the MCP server with a JSON array of Excalidraw elements and CopilotKit renders that iframe directly in chat via the MCP Apps protocol. We extended the original Excalidraw MCP server with a checkpoint store, REST workspace endpoints, streaming, and widget buttons. Every diagram auto-saves to disk and opens as a full editable canvas. One click pushes any diagram live to Excalidraw straight from chat.\n\n- Repo: [github.com\u002FCopilotKit\u002Fexcalidraw-studio](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fexcalidraw-studio)\n- Excalidraw MCP server: [github.com\u002Fexcalidraw\u002Fexcalidraw-mcp](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw-mcp)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F18dd56de-6f14-4a1d-b743-52fccf145bbe\n\n---\n\n## 4. Open Generative UI (useComponent)\n\n[OpenGenerativeUI](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI) is an open source showcase for building rich, interactive UI with CopilotKit and LangGraph. It uses the same open-ended philosophy as MCP Apps but with a different architecture.\n\nInstead of connecting to an external MCP server, a LangGraph agent generates raw HTML\u002FSVG\u002FCanvas directly, and `useComponent` on the frontend receives it as a named tool call and renders it in a themed, sandboxed iframe. The agent can produce algorithm visualizations, 3D animations (Three.js, WebGL), charts, interactive simulations, math plots, D3 force layouts, and more, anything expressible as self-contained HTML.\n\n```typescript\nimport { useComponent } from \"@copilotkit\u002Freact-core\u002Fv2\";\nimport {\n  WidgetRenderer,\n  WidgetRendererProps,\n} from \"@\u002Fcomponents\u002Fgenerative-ui\u002Fwidget-renderer\";\n\n\u002F\u002F Register a named component: the agent calls \"widgetRenderer\" with\n\u002F\u002F { title, description, html } and the frontend renders it in a sandboxed iframe\nuseComponent({\n  name: \"widgetRenderer\",\n  description:\n    \"Renders interactive HTML\u002FSVG visualizations in a sandboxed iframe. \" +\n    \"Use for algorithm visualizations, diagrams, widgets, and simulations.\",\n  parameters: WidgetRendererProps,\n  render: WidgetRenderer,\n});\n```\n\n**How `useComponent` differs from MCP Apps**: with MCP Apps, the agent calls a tool on a remote server and the server returns an iframe URL. The heavy lifting is server-side. With `useComponent`, the agent generates the content directly (HTML string) and passes it through the tool call itself. No server round-trip, no URL, just structured output that the frontend component renders however it wants.\n\n- Repo: [github.com\u002FCopilotKit\u002FOpenGenerativeUI](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fed28c734-e54e-4412-873f-4801da544a7f\n\n---\n\n## Generative UI Playground\n\nThe Generative UI Playground is a hands-on environment for exploring how all three patterns work in practice and seeing how agent outputs map to UI in real time.\n\n- Try it out: [go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- Repo: [go.copilotkit.ai\u002Fgen-ui-repo-playground](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-repo-playground)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff2f52fae-c9c6-4da5-8d29-dc99b202a7ad\n\n## Blogs\n\n- [The Developer's Guide to Generative UI in 2026](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fthe-developer-s-guide-to-generative-ui-in-2026) - CopilotKit\n- [Agent Factory: The new era of agentic AI: common use cases and design patterns](https:\u002F\u002Fazure.microsoft.com\u002Fen-us\u002Fblog\u002Fagent-factory-the-new-era-of-agentic-ai-common-use-cases-and-design-patterns\u002F) - By Microsoft Azure\n- [Agentic AI vs AI Agents: A Deep Dive](https:\u002F\u002Fuibakery.io\u002Fblog\u002Fagentic-ai-vs-ai-agents) - UI Bakery\n- [Introducing Agentic UI Interfaces: A Tactical Executive Guide](https:\u002F\u002Fakfpartners.com\u002Fgrowth-blog\u002Fintroducing-agentic-ui-interfaces-a-tactical-executive-guide) - AKF Partners\n- [Introducing A2UI: An open project for agent-driven interfaces](https:\u002F\u002Fdevelopers.googleblog.com\u002Fintroducing-a2ui-an-open-project-for-agent-driven-interfaces\u002F) - Google Developers\n- [From products to systems: The agentic AI shift](https:\u002F\u002Fuxdesign.cc\u002Ffrom-products-to-systems-the-agentic-ai-shift-eaf6a7180c43) - UX Collective\n- [Generative UI: A rich, custom, visual interactive user experience for any prompt](https:\u002F\u002Fresearch.google\u002Fblog\u002Fgenerative-ui-a-rich-custom-visual-interactive-user-experience-for-any-prompt\u002F) - Google Research\n- [The State of Agentic UI: Comparing AG-UI, MCP-UI, and A2A Protocols](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fthe-state-of-agentic-ui-comparing-ag-ui-mcp-ui-and-a2ui-protocols) - CopilotKit\n- [The Three Types of Generative UI: Controlled, Declarative and Fully Generated](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fthe-three-kinds-of-generative-ui) - CopilotKit\n- [Generative UI Guide 2025: 15 Best Practices & Examples](https:\u002F\u002Fwww.mockplus.com\u002Fblog\u002Fpost\u002Fgui-guide) - Mockplus\n- [Developer's Guide to AI Agent Protocols](https:\u002F\u002Fdevelopers.googleblog.com\u002Fdevelopers-guide-to-ai-agent-protocols\u002F) - Google Developers\n\n## Videos\n\n- [AI Agents Can Now Build Their Own UI in Real Time (Personalized to You)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=MD8VQzvMVek)\n- [Agentic AI Explained So Anyone Can Get It!](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Jj1-zb38Yfw)\n- [Generative vs Agentic AI: Shaping the Future of AI Collaboration](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=EDb37y_MhRw)\n- [Generative UI: Specs, Patterns, and the Protocols Behind Them (MCP Apps, A2UI, AG-UI)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Z4aSGCs_O5A)\n- [ASP.NET Community Standup - Build agentic UI with AG-UI and Blazor](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=4CrxcdNbRFY)\n- [The Dojo: Agentic Building Blocks for Your UI](https:\u002F\u002Fyoutu.be\u002FHlILkXpGYQc)\n- [What is Agentic AI? An Easy Explanation For Everyone](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=-pqzyvRp3Tc)\n- [What is Agentic AI and How Does it Work?](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=15_pppse4fY)\n\n## Additional Resources\n\n- [Agentic Protocols Landscape](https:\u002F\u002Fgo.copilotkit.ai\u002Fprotocols)\n- [Generative UI PDF Download](https:\u002F\u002Fgo.copilotkit.ai\u002Fgenerative-ui-pdf-guide)\n- [12 Dos and Donts for Building Agentic Applications](https:\u002F\u002Fgo.copilotkit.ai\u002Fdos-donts)\n\n---\n\n## 🤝 Contributions are welcome\n\nContributions welcome: PRs adding examples (Controlled\u002FDeclarative\u002FOpen‑ended), improving explanations or adding assets.\n\n[Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002F6dffbvGU3D) for help and discussions. [GitHub](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit) to contribute. [@CopilotKit](https:\u002F\u002Fx.com\u002Fcopilotkit) for updates.\n\n| Project                   | Preview                                                                                                                                   | Description                                                                                                                           | Links                                                                                            |\n| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| Open Generative UI        | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_ade1ad900a48.png\" alt=\"Open Generative UI preview\" width=\"300\">                                            | Open-ended generative UI: agent generates HTML\u002FSVG visuals rendered in sandboxed iframes, no MCP server needed.                       | [Repo](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI)                                           |\n| Generative UI Playground  | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_f3b65aaee3c2.png\" alt=\"Generative UI playground preview\" width=\"300\">                                | Shows the three Gen UI patterns with runnable, end-to-end examples.                                                                   | [Repo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-repo-playground)\u003Cbr>[Demo](go.copilotkit.ai\u002Fgen-ui-demo)  |\n| Excalidraw MCP App        | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_6bec8b5ffa76.png\" alt=\"Excalidraw MCP app preview\" width=\"300\">                                            | Describe anything, get a fully editable Excalidraw diagram in chat via MCP Apps.                                                      | [Repo](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fexcalidraw-studio)                                          |\n\nBuilt something? [Open a PR](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Fpulls) or [share it in Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002F6dffbvGU3D).\n\nFor AI\u002FLLM agents: [docs.copilotkit.ai\u002Fllms.txt](https:\u002F\u002Fdocs.copilotkit.ai\u002Fllms.txt)\n\n---\n\n> **Note:** This project has been consolidated into the [CopilotKit monorepo](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit).\n> The latest version lives at [`examples\u002Fshowcases\u002Fgenerative-ui`](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Ftree\u002Fmain\u002Fexamples\u002Fshowcases\u002Fgenerative-ui).\n> Please open issues and pull requests in the [main CopilotKit repository](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit).\n","\u003Cdiv align=\"center\">\n  \u003Ch1>🔮 面向智能体应用的生成式UI\u003C\u002Fh1>\n\n  \u003Cp>\n    \u003Ca href=\"https:\u002F\u002Fwww.copilotkit.ai\u002Fgenerative-ui\">\n      \u003Cimg alt=\"官网：生成式UI\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-Generative%20UI-6963ff\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\">\n      \u003Cimg alt=\"文档：生成式UI\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDocs-Generative%20UI-6963ff?style=flat\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fag-ui-protocol-bridging-agents-to-any-front-end\">\n      \u003Cimg alt=\"协议：AG-UI\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FProtocol-AG--UI-6963ff?style=flat\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002F6dffbvGU3D\">\n      \u003Cimg alt=\"Discord\" src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F1122926057641742418?logo=discord&logoColor=%23FFFFFF&label=Discord&color=%236963ff\" \u002F>\n    \u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\">\n      \u003Cimg alt=\"GitHub星标\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FCopilotKit\u002FCopilotKit\" \u002F>\n    \u003C\u002Fa>\n  \u003C\u002Fp>\n\n  \u003Cp>构建能够适应用户的应用。\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n## 生成式UI资源\n\n- [什么是生成式UI？](#what-is-generative-ui)\n- [生成式UI的三种类型](#the-3-types-of-generative-ui)\n  - [受控生成式UI (AG-UI)](#1-controlled-generative-ui-ag-ui)\n  - [声明式生成式UI (A2UI + Open-JSON-UI)](#2-declarative-generative-ui-a2ui--openjsonui)\n  - [开放式生成式UI (MCP应用)](#3-open-ended-generative-ui-mcp-apps)\n    - [真实案例：Excalidraw MCP应用](#real-world-example-excalidraw-mcp-apps)\n  - [开放生成式UI (useComponent)](#4-open-generative-ui-usecomponent)\n\n- [生成式UI Playground](#generative-ui-playground)\n- [博客](#blogs)\n- [视频](#videos)\n- [其他资源](#additional-resources)\n- [贡献](#-contributions-are-welcome)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fed28c734-e54e-4412-873f-4801da544a7f\n\n\u003Cbr \u002F>\n\n本仓库将介绍智能体UI协议（AG-UI、A2UI、MCP应用）如何实现生成式UI模式（受控、声明式、开放式），以及如何使用CopilotKit来实现这些模式。\n\n👉 [OpenGenerativeUI](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI) —— 用于在智能体应用中构建生成式UI的开源框架 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI\">\u003Cimg alt=\"GitHub星标\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FCopilotKit\u002FOpenGenerativeUI\" \u002F>\u003C\u002Fa>\n\n👉 [生成式UI指南 (PDF)](assets\u002Fgenerative-ui-guide.pdf) —— 对生成式UI的概念性概述，重点关注权衡、UI界面以及智能体UI协议之间的协作方式。\n\n---\n\n## 什么是生成式UI？\n\n生成式UI是一种模式，在这种模式下，用户界面的部分内容不是由开发者完全预先定义的，而是在运行时由AI智能体生成、选择或控制。\n\n智能体不仅可以生成文本，还可以发送UI状态、结构化的UI规范或交互式UI组件，由前端实时渲染。这使得UI从固定的、由开发者定义的界面转变为能够随着智能体的工作和上下文变化而动态调整的界面。\n\n在CopilotKit生态系统中，生成式UI被划分为三种实用模式，分别通过不同的智能体UI协议和规范来实现，这些协议和规范定义了智能体如何向应用程序传递UI更新：\n\n- 受控生成式UI（高控制、低自由度）→ [AG-UI](https:\u002F\u002Fgithub.com\u002Fag-ui-protocol\u002Fag-ui)\n- 声明式生成式UI（共享控制）→ [A2UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fa2ui)、[Open-JSON-UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui)\n- 开放式生成式UI（低控制、高自由度）→ [MCP应用](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui\u002Fspecs\u002Fmcp-apps) \u002F 自定义UI\n\n[AG-UI（智能体-用户交互协议）](https:\u002F\u002Fgithub.com\u002Fag-ui-protocol\u002Fag-ui)作为这些模式之下的双向运行时交互层，提供了智能体与应用程序之间的连接，从而实现生成式UI，并且能够在A2UI、MCP应用、Open-JSON-UI以及自定义UI规范之间统一工作。\n\n\u003Cimg width=\"1920\" height=\"1075\" alt=\"AG-UI运行时架构\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_a5b6edf86a9b.png\" \u002F>\n\n\u003Cbr \u002F>\n\n本仓库的其余部分将从最受限到最开放的模式逐一介绍，并展示如何使用CopilotKit来实现它们。\n\n---\n\n# 生成式UI的三种类型\n\n## 1. 受控生成式UI (AG-UI)\n\n\u003Cimg width=\"977\" height=\"548\" alt=\"受控生成式UI示例\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_1bf558879b82.png\" \u002F>\n\n受控生成式UI意味着你预先构建好UI组件，而智能体则决定显示哪个组件，并为其传递所需的数据。\n\n这是控制程度最高的方式：布局、样式和交互模式都由你掌控，而智能体则控制何时以及显示哪个UI组件。\n\n在CopilotKit中，这种模式是通过`useFrontendTool`钩子实现的，它允许应用程序注册`get_weather`工具，并定义在该工具执行生命周期的每个阶段如何渲染预定义的React UI。\n\n```typescript\n\u002F\u002F 天气工具——一个可调用的工具，以样式化的卡片形式显示天气数据\nuseFrontendTool({\n  name: \"get_weather\",\n  description: \"获取某个地点的当前天气信息\",\n  parameters: z.object({ location: z.string().describe(\"要查询天气的城市或地点\") }),\n  handler: async ({ location }) => {\n    await new Promise((r) => setTimeout(r, 500));\n    return getMockWeather(location);\n  },\n  render: ({ status, args, result }) => {\n    if (status === \"inProgress\" || status === \"executing\") {\n      return \u003CWeatherLoadingState location={args?.location} \u002F>;\n    }\n    if (status === \"complete\" && result) {\n      const data = JSON.parse(result) as WeatherData;\n      return (\n        \u003CWeatherCard\n          location={data.location}\n          temperature={data.temperature}\n          conditions={data.conditions}\n          humidity={data.humidity}\n          windSpeed={data.windSpeed}\n        \u002F>\n      );\n    }\n    return \u003C>\u003C\u002F>;\n  },\n});\n```\n\n- 试一试：[go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- 文档：[docs.copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui)\n- 规范中心（概览）：[docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs)\n- 生态系统（规范与运行时如何配合）：[copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fwww.copilotkit.ai\u002Fgenerative-ui)\n\n---\n\n## 2. 声明式生成式 UI（A2UI + Open‑JSON‑UI）\n\n\u003Cimg width=\"963\" height=\"532\" alt=\"声明式生成式 UI 概览\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_ab56db59987b.png\" \u002F>\n\n声明式生成式 UI 处于受控与开放式方法之间。在此模式下，代理会返回结构化的 UI 描述（卡片、列表、表单、小部件），前端则负责渲染这些内容。\n\n用于生成式 UI 的两种常见声明式规范是 A2UI 和 Open-JSON-UI。\n\n1. [A2UI](https:\u002F\u002Fgithub.com\u002Fgoogle\u002FA2UI) → 来自 Google 的声明式生成式 UI 规范，基于 JSONL 并支持流式传输，旨在实现跨平台的渲染兼容性。\n\n2. [Open‑JSON‑UI](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui) → OpenAI 内部声明式生成式 UI 架构的开放标准化方案。\n\n我们首先来了解如何实现 A2UI 的基本流程。\n\n与其手动编写 A2UI JSON，不如使用 [A2UI Composer](https:\u002F\u002Fa2ui-composer.ag-ui.com\u002F) 自动生成规范。将生成的输出复制并粘贴到代理的提示中，作为参考模板。\n\n\u003Cimg width=\"1358\" height=\"608\" alt=\"A2UI Composer\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_58de8ea494ec.png\" \u002F>\n\n在 `prompt_builder.py` 中，添加一个 A2UI JSONL 示例，使代理能够学习 A2UI 所期望的三种消息封装：`surfaceUpdate`（组件）、`dataModelUpdate`（状态），以及 `beginRendering`（渲染信号）。\n\n```python\nUI_EXAMPLES = \"\"\"\n---BEGIN FORM_EXAMPLE---\n{\"surfaceUpdate\":{\"surfaceId\":\"form-surface\",\"components\":[ ... ]}}\n{\"dataModelUpdate\":{\"surfaceId\":\"form-surface\",\"path\":\"\u002F\",\"contents\":[ ... ]}}\n{\"beginRendering\":{\"surfaceId\":\"form-surface\",\"root\":\"form-column\",\"styles\":{ ... }}}\n---END FORM_EXAMPLE---\n\"\"\"\n```\n\n将 `UI_EXAMPLES` 注入代理指令中，使其在请求 UI 时能够输出有效的 A2UI 消息行。\n\n```python\ninstruction = AGENT_INSTRUCTION + get_ui_prompt(self.base_url, UI_EXAMPLES)\n\nreturn LlmAgent(\n    model=LiteLlm(model=LITELLM_MODEL),\n    name=\"ui_generator_agent\",\n    description=\"通过 A2UI 声明式 JSON 生成动态 UI。\",\n    instruction=instruction,\n    tools=[],\n)\n```\n\n最后一步：在前端，将 `createA2UIMessageRenderer(...)` 传递给 `renderActivityMessages`，以便 CopilotKit 能够将流式传输的 A2UI 输出渲染为 UI，并将 UI 操作反馈回代理。\n\n```typescript\nimport { CopilotKitProvider, CopilotSidebar } from \"@copilotkitnext\u002Freact\";\nimport { createA2UIMessageRenderer } from \"@copilotkit\u002Fa2ui-renderer\";\nimport { a2uiTheme } from \"..\u002Ftheme\";\n\nconst A2UIRenderer = createA2UIMessageRenderer({ theme: a2uiTheme });\n\nexport function A2UIPage({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CCopilotKitProvider\n      runtimeUrl=\"\u002Fapi\u002Fcopilotkit-a2ui\"\n      renderActivityMessages={[A2UIRenderer]}   \u002F\u002F ← 将 A2UI 渲染器挂载进来\n    >\n      {children}\n      \u003CCopilotSidebar defaultOpen labels={{ modalHeaderTitle: \"A2UI 助手\" }} \u002F>\n    \u003C\u002FCopilotKitProvider>\n  );\n}\n```\n\n以下是一个使用 A2UI 和 Agent Spec 的日历演示：\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F48158b9d-188d-42d1-835b-32d7425cc43a\n\n对于 Open‑JSON‑UI，模式相同。代理可以响应一个 Open‑JSON‑UI 负载，以 JSON 格式描述一个 UI“卡片”，而前端则负责渲染它。\n\n```js\n\u002F\u002F 示例（示意性）：代理返回声明式 Open-JSON-UI 风格的规范\n{\n  type: \"open-json-ui\",\n  spec: {\n    components: [\n      {\n        type: \"card\",\n        properties: {\n          title: \"数据可视化\",\n          content: { ... }\n        }\n      }\n    ]\n  }\n}\n```\n\n\u003Cimg width=\"1038\" height=\"337\" alt=\"Open-JSON-UI 示例\" src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_e54b22bfecf4.png\" \u002F>\n\n- 试用：[go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- 文档：[docs.copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui)\n- Open‑JSON‑UI 规范（CopilotKit 文档）：[docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fopen-json-ui)\n- A2UI 规范（CopilotKit 文档）：[docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fa2ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fa2ui)\n- 示例（A2UI + Agent Spec）：[github.com\u002FCopilotKit\u002Fwith-agent-spec](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fwith-agent-spec)\n- 生态系统（规范与运行时的配合）：[copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fwww.copilotkit.ai\u002Fgenerative-ui)\n- AG‑UI 与 A2UI 的结合方式：[copilotkit.ai\u002Fag-ui-and-a2ui](https:\u002F\u002Fwww.copilotkit.ai\u002Fag-ui-and-a2ui)\n\n---\n\n## 3. 开放式生成式 UI（MCP 应用）\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F48eeab8d-7845-4d06-83ef-d518a807da03\n\n开放式生成式 UI 是指代理返回完整的 UI 界面（通常是 HTML\u002Fiframes\u002F自由格式内容），而前端主要充当展示该界面的容器。\n\n这种方式的权衡较高：渲染任意内容可能带来安全和性能方面的顾虑，样式一致性难以保证，且在 Web 之外的可移植性较差。\n\n这种模式常用于 MCP 应用。在 CopilotKit 中，可以通过将 `MCPAppsMiddleware` 添加到代理中来启用对 MCP 应用的支持，从而使运行时能够连接到一个或多个 MCP 应用服务器。\n\n```typescript\nimport { BuiltInAgent } from \"@copilotkit\u002Fruntime\u002Fv2\";\nimport { MCPAppsMiddleware } from \"@ag-ui\u002Fmcp-apps-middleware\";\n\nconst agent = new BuiltInAgent({\n  model: \"openai\u002Fgpt-5.2\",\n  prompt: \"您是一位乐于助人的助手。\",\n}).use(\n  new MCPAppsMiddleware({\n    mcpServers: [\n      {\n        type: \"http\",\n        url: \"https:\u002F\u002Fmcp.excalidraw.com\u002Fmcp\", \u002F\u002F 或者您的本地服务器：http:\u002F\u002Flocalhost:3001\u002Fmcp\n        serverId: \"my-server\",\n      },\n    ],\n  }),\n);\n```\n\n- 试用：[go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- 实验室仓库：[examples\u002Fshowcases\u002Fmcp-apps](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Ftree\u002Fmain\u002Fexamples\u002Fshowcases\u002Fmcp-apps)\n- 文档：[docs.copilotkit.ai\u002Fgenerative-ui](https:\u002F\u002Fdocs.copilotkit.ai\u002Fgenerative-ui)\n- MCP 应用规范：[docs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fmcp-apps](https:\u002F\u002Fdocs.copilotkit.ai\u002Flearn\u002Fgenerative-ui\u002Fspecs\u002Fmcp-apps)\n- 实用指南（完整集成流程）：[使用 CopilotKit 和 AG‑UI 将 MCP 应用引入您的应用](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fbring-mcp-apps-into-your-own-app-with-copilotkit-and-ag-ui)\n\n### 现实世界案例：Excalidraw MCP 应用\n\n我们使用 CopilotKit 和一个经过修改的 [Excalidraw MCP 服务器](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw-mcp)，构建了一款由 MCP 提供支持的 AI 绘图应用。只需在聊天中描述任何内容，几秒钟内即可获得一个完全可编辑的 Excalidraw 图表。\n\n`src\u002Fapp\u002Fapi\u002Fcopilotkit\u002Froute.ts` 中完整的 CopilotKit 运行时设置如下：\n\n```typescript\nimport {\n  CopilotRuntime,\n  ExperimentalEmptyAdapter,\n  copilotRuntimeNextJSAppRouterEndpoint,\n} from \"@copilotkit\u002Fruntime\";\nimport { BuiltInAgent } from \"@copilotkit\u002Fruntime\u002Fv2\";\nimport { NextRequest } from \"next\u002Fserver\";\nimport { MCPAppsMiddleware } from \"@ag-ui\u002Fmcp-apps-middleware\";\n\nconst agent = new BuiltInAgent({\n  model: \"openai\u002Fgpt-5\",\n  prompt: `You are an AI diagramming assistant powered by Excalidraw...`, \u002F\u002F 完整提示词见仓库\n}).use(\n  new MCPAppsMiddleware({\n    mcpServers: [\n      {\n        type: \"http\",\n        url: process.env.MCP_SERVER_URL ?? \"http:\u002F\u002Flocalhost:3001\u002Fmcp\",\n        serverId: \"excalidraw\",\n      },\n    ],\n  }),\n);\n\nconst serviceAdapter = new ExperimentalEmptyAdapter();\n\nconst runtime = new CopilotRuntime({\n  agents: {\n    default: agent,\n  },\n});\n\nexport const POST = async (req: NextRequest) => {\n  const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({\n    runtime,\n    serviceAdapter,\n    endpoint: \"\u002Fapi\u002Fcopilotkit\",\n  });\n\n  return handleRequest(req);\n};\n```\n\n该代理会向 MCP 服务器发送包含 Excalidraw 元素的 JSON 数组，并调用 `create_view` 方法；CopilotKit 则通过 MCP Apps 协议直接在聊天界面中渲染出相应的 iframe。我们还对原始的 Excalidraw MCP 服务器进行了扩展，增加了检查点存储、REST 工作区端点、流式传输以及小部件按钮等功能。每个图表都会自动保存到磁盘，并以完整可编辑画布的形式打开。只需点击一下，即可将任意图表从聊天中直接发布到 Excalidraw 上。\n\n- 仓库：[github.com\u002FCopilotKit\u002Fexcalidraw-studio](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fexcalidraw-studio)\n- Excalidraw MCP 服务器：[github.com\u002Fexcalidraw\u002Fexcalidraw-mcp](https:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw-mcp)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F18dd56de-6f14-4a1d-b743-52fccf145bbe\n\n---\n\n## 4. 开放式生成式 UI（useComponent）\n\n[OpenGenerativeUI](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI) 是一个开源示例项目，展示了如何使用 CopilotKit 和 LangGraph 构建丰富且交互式的用户界面。它采用了与 MCP Apps 相同的开放性理念，但架构有所不同。\n\n不同于连接外部 MCP 服务器的方式，LangGraph 代理可以直接生成原始的 HTML\u002FSVG\u002FCanvas 内容，而前端的 `useComponent` 则会将其作为命名工具调用接收，并在一个带有主题的沙盒 iframe 中渲染出来。该代理可以生成算法可视化、3D 动画（Three.js、WebGL）、图表、交互式模拟、数学绘图、D3 力布局等任何可以用自包含 HTML 表达的内容。\n\n```typescript\nimport { useComponent } from \"@copilotkit\u002Freact-core\u002Fv2\";\nimport {\n  WidgetRenderer,\n  WidgetRendererProps,\n} from \"@\u002Fcomponents\u002Fgenerative-ui\u002Fwidget-renderer;\n\n\u002F\u002F 注册一个命名组件：代理会调用 \"widgetRenderer\"，传入\n\u002F\u002F { title, description, html } 参数，前端则会在沙盒 iframe 中渲染\nuseComponent({\n  name: \"widgetRenderer\",\n  description:\n    \"在沙盒 iframe 中渲染交互式 HTML\u002FSVG 可视化内容。\" +\n    \"适用于算法可视化、图表、小部件和模拟场景。\",\n  parameters: WidgetRendererProps,\n  render: WidgetRenderer,\n});\n```\n\n**`useComponent` 与 MCP Apps 的区别**：在 MCP Apps 中，代理会调用远程服务器上的工具，然后由服务器返回一个 iframe 的 URL，主要的工作负载都在服务器端完成。而在 `useComponent` 中，代理直接生成内容（HTML 字符串），并通过工具调用本身传递给前端。无需服务器往返，也没有 URL，只有结构化的输出，由前端组件按需渲染。\n\n- 仓库：[github.com\u002FCopilotKit\u002FOpenGenerativeUI](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fed28c734-e54e-4412-873f-4801da544a7f\n\n---\n\n## 生成式 UI 演示平台\n\n生成式 UI 演示平台是一个实践环境，用于探索这三种模式的实际运作方式，并实时观察代理输出如何映射到 UI 上。\n\n- 体验地址：[go.copilotkit.ai\u002Fgen-ui-demo](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-demo)\n- 仓库：[go.copilotkit.ai\u002Fgen-ui-repo-playground](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-repo-playground)\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff2f52fae-c9c6-4da5-8d29-dc99b202a7ad\n\n## 相关博客文章\n\n- [2026 年开发者指南：生成式 UI](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fthe-developer-s-guide-to-generative-ui-in-2026) - CopilotKit\n- [Agent Factory：智能体 AI 新时代——常见用例与设计模式](https:\u002F\u002Fazure.microsoft.com\u002Fen-us\u002Fblog\u002Fagent-factory-the-new-era-of-agentic-ai-common-use-cases-and-design-patterns\u002F) - 微软 Azure\n- [智能体 AI 与 AI 智能体：深度解析](https:\u002F\u002Fuibakery.io\u002Fblog\u002Fagentic-ai-vs-ai-agents) - UI Bakery\n- [引入智能体 UI 界面：战术执行指南](https:\u002F\u002Fakfpartners.com\u002Fgrowth-blog\u002Fintroducing-agentic-ui-interfaces-a-tactical-executive-guide) - AKF Partners\n- [推出 A2UI：面向智能体驱动界面的开放项目](https:\u002F\u002Fdevelopers.googleblog.com\u002Fintroducing-a2ui-an-open-project-for-agent-driven-interfaces\u002F) - Google Developers\n- [从产品到系统：智能体 AI 的转变](https:\u002F\u002Fuxdesign.cc\u002Ffrom-products-to-systems-the-agentic-ai-shift-eaf6a7180c43) - UX Collective\n- [生成式 UI：为任何提示提供丰富、定制化、可视化的交互式用户体验](https:\u002F\u002Fresearch.google.blog\u002Fgenerative-ui-a-rich-custom-visual-interactive-user-experience-for-any-prompt\u002F) - Google Research\n- [智能体 UI 现状：AG-UI、MCP-UI 和 A2UI 协议对比](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fthe-state-of-agentic-ui-comparing-ag-ui-mcp-ui-and-a2ui-protocols) - CopilotKit\n- [生成式 UI 的三种类型：受控式、声明式与完全生成式](https:\u002F\u002Fwww.copilotkit.ai\u002Fblog\u002Fthe-three-kinds-of-generative-ui) - CopilotKit\n- [2025 年生成式 UI 指南：15 条最佳实践与示例](https:\u002F\u002Fwww.mockplus.com\u002Fblog\u002Fpost\u002Fgui-guide) - Mockplus\n- [开发者指南：AI 智能体协议](https:\u002F\u002Fdevelopers.googleblog.com\u002Fdevelopers-guide-to-ai-agent-protocols\u002F) - Google Developers\n\n## 视频\n\n- [AI 代理现在可以实时构建属于自己的 UI（个性化定制）](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=MD8VQzvMVek)\n- [用通俗易懂的方式解释代理式 AI，人人都能看懂！](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Jj1-zb38Yfw)\n- [生成式 vs 代理式 AI：塑造 AI 协作的未来](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=EDb37y_MhRw)\n- [生成式 UI：规范、模式及其背后的协议（MCP Apps、A2UI、AG-UI）](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Z4aSGCs_O5A)\n- [ASP.NET 社区站立会议——使用 AG-UI 和 Blazor 构建代理式 UI](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=4CrxcdNbRFY)\n- [The Dojo：为你的 UI 打造的代理式构建模块](https:\u002F\u002Fyoutu.be\u002FHlILkXpGYQc)\n- [什么是代理式 AI？给所有人的简单解释](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=-pqzyvRp3Tc)\n- [什么是代理式 AI？它又是如何工作的？](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=15_pppse4fY)\n\n## 其他资源\n\n- [代理式协议全景图](https:\u002F\u002Fgo.copilotkit.ai\u002Fprotocols)\n- [生成式 UI PDF 下载](https:\u002F\u002Fgo.copilotkit.ai\u002Fgenerative-ui-pdf-guide)\n- [构建代理式应用的 12 条注意事项与禁忌](https:\u002F\u002Fgo.copilotkit.ai\u002Fdos-donts)\n\n---\n\n## 🤝 欢迎贡献\n\n欢迎贡献：可通过 PR 添加示例（受控式、声明式、开放式）、改进说明或增加素材。\n\n如需帮助或讨论，请加入 [Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002F6dffbvGU3D)。如需贡献代码，请访问 [GitHub](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit)。关注 [@CopilotKit](https:\u002F\u002Fx.com\u002Fcopilotkit) 获取最新动态。\n\n| 项目                   | 预览                                                                                                                                   | 描述                                                                                                                           | 链接                                                                                            |\n| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| 开放式生成式 UI        | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_ade1ad900a48.png\" alt=\"开放式生成式 UI 预览\" width=\"300\">                                            | 开放式的生成式 UI：代理生成 HTML\u002FSVG 视觉内容，并在沙盒 iframe 中渲染，无需 MCP 服务器。                       | [仓库](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FOpenGenerativeUI)                                           |\n| 生成式 UI 演示平台  | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_f3b65aaee3c2.png\" alt=\"生成式 UI 演示平台预览\" width=\"300\">                                | 展示三种生成式 UI 模式，并提供可运行的端到端示例。                                                                   | [仓库](https:\u002F\u002Fgo.copilotkit.ai\u002Fgen-ui-repo-playground)\u003Cbr>[演示](go.copilotkit.ai\u002Fgen-ui-demo)  |\n| Excalidraw MCP 应用        | \u003Cimg src=\"https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_readme_6bec8b5ffa76.png\" alt=\"Excalidraw MCP 应用预览\" width=\"300\">                                            | 描述任何内容，即可通过 MCP 应用在聊天中获得一个完全可编辑的 Excalidraw 流程图。                              | [仓库](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002Fexcalidraw-studio)                                          |\n\n你构建了什么吗？请 [打开 PR](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Fpulls) 或在 [Discord](https:\u002F\u002Fdiscord.com\u002Finvite\u002F6dffbvGU3D) 上分享吧。\n\n关于 AI\u002FLLM 代理：[docs.copilotkit.ai\u002Fllms.txt](https:\u002F\u002Fdocs.copilotkit.ai\u002Fllms.txt)\n\n---\n\n> **注：** 本项目已整合至 [CopilotKit 单体仓库](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit)。\n> 最新版本位于 [`examples\u002Fshowcases\u002Fgenerative-ui`](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit\u002Ftree\u002Fmain\u002Fexamples\u002Fshowcases\u002Fgenerative-ui)。\n> 请在 [主 CopilotKit 仓库](https:\u002F\u002Fgithub.com\u002FCopilotKit\u002FCopilotKit) 中提交问题和拉取请求。","# Generative UI 快速上手指南\n\nGenerative UI 是一种由 AI 代理在运行时动态生成、选择或控制部分用户界面的模式。本指南基于 CopilotKit 生态，帮助你快速构建适应性强、能随上下文变化的智能应用界面。\n\n## 环境准备\n\n在开始之前，请确保你的开发环境满足以下要求：\n\n*   **Node.js**: 版本 18.0 或更高（推荐 v20+）。\n*   **包管理器**: npm, yarn, pnpm 或 bun。\n*   **前端框架**: React (Next.js, Vite 等)。\n*   **后端环境**: 支持 Node.js 或 Python 的后端服务（用于运行 Agent）。\n*   **API Key**: 准备好 OpenAI 或其他大模型服务商的 API Key。\n\n> **提示**：国内开发者若遇到 npm 安装缓慢问题，建议使用国内镜像源：\n> ```bash\n> npm config set registry https:\u002F\u002Fregistry.npmmirror.com\n> ```\n\n## 安装步骤\n\n### 1. 初始化项目\n如果你还没有项目，可以快速创建一个 Next.js 示例项目：\n\n```bash\nnpx create-next-app@latest my-generative-ui-app --typescript --tailwind --eslint\ncd my-generative-ui-app\n```\n\n### 2. 安装 CopilotKit 核心依赖\n安装 React 客户端 SDK 和运行时库：\n\n```bash\nnpm install @copilotkit\u002Freact @copilotkit\u002Fruntime\n```\n\n### 3. 安装特定协议渲染器（可选）\n根据你选择的 Generative UI 类型，可能需要安装额外的渲染器：\n\n*   **声明式 UI (A2UI)**:\n    ```bash\n    npm install @copilotkit\u002Fa2ui-renderer\n    ```\n*   **MCP Apps**:\n    ```bash\n    npm install @ag-ui\u002Fmcp-apps-middleware\n    ```\n\n## 基本使用\n\nGenerative UI 主要有三种实现模式，以下展示最常用且易于上手的 **受控式 Generative UI (Controlled Generative UI)** 的最小化实现流程。\n\n### 场景：创建一个天气查询工具\n当用户询问天气时，Agent 不仅返回文本，还会触发一个预定义的 React 组件来展示结构化数据。\n\n#### 第一步：配置 Provider\n在应用的根组件（如 `layout.tsx` 或 `App.tsx`）中包裹 `CopilotKitProvider`。\n\n```tsx\n\u002F\u002F app\u002Flayout.tsx 或 src\u002FApp.tsx\nimport { CopilotKitProvider } from \"@copilotkit\u002Freact\";\nimport { CopilotSidebar } from \"@copilotkit\u002Freact-ui\";\nimport \"@copilotkit\u002Freact-ui\u002Fstyles.css\";\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    \u003CCopilotKitProvider runtimeUrl=\"\u002Fapi\u002Fcopilotkit\">\n      {children}\n      \u003CCopilotSidebar \n        defaultOpen \n        labels={{ modalHeaderTitle: \"AI 助手\" }} \n      \u002F>\n    \u003C\u002FCopilotKitProvider>\n  );\n}\n```\n\n#### 第二步：定义前端工具 (Frontend Tool)\n在你的页面组件或自定义 Hook 中，使用 `useFrontendTool` 注册工具。这将告诉 Agent 何时调用该工具，并定义不同状态下的 UI 渲染逻辑。\n\n```tsx\n\u002F\u002F components\u002FWeatherTool.tsx\nimport { useFrontendTool } from \"@copilotkit\u002Freact\";\nimport { z } from \"zod\";\n\n\u002F\u002F 模拟获取天气数据\nconst getMockWeather = (location: string) => ({\n  location,\n  temperature: 24,\n  conditions: \"晴朗\",\n  humidity: 45,\n  windSpeed: 12\n});\n\nexport function WeatherTool() {\n  useFrontendTool({\n    name: \"get_weather\",\n    description: \"Get current weather information for a location\",\n    parameters: z.object({ \n      location: z.string().describe(\"The city or location to get weather for\") \n    }),\n    handler: async ({ location }) => {\n      \u002F\u002F 模拟延迟\n      await new Promise((r) => setTimeout(r, 500));\n      return JSON.stringify(getMockWeather(location));\n    },\n    render: ({ status, args, result }) => {\n      \u002F\u002F 1. 加载中状态\n      if (status === \"inProgress\" || status === \"executing\") {\n        return \u003Cdiv className=\"p-4 bg-blue-50 rounded\">正在查询 {args?.location} 的天气...\u003C\u002Fdiv>;\n      }\n      \n      \u002F\u002F 2. 完成状态：渲染自定义卡片\n      if (status === \"complete\" && result) {\n        const data = JSON.parse(result);\n        return (\n          \u003Cdiv className=\"p-6 border rounded-lg shadow-sm bg-white max-w-sm\">\n            \u003Ch3 className=\"text-xl font-bold\">{data.location}\u003C\u002Fh3>\n            \u003Cp className=\"text-3xl my-2\">{data.temperature}°C\u003C\u002Fp>\n            \u003Cdiv className=\"text-gray-600 flex justify-between\">\n              \u003Cspan>{data.conditions}\u003C\u002Fspan>\n              \u003Cspan>湿度：{data.humidity}%\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        );\n      }\n      return null;\n    },\n  });\n\n  return null;\n}\n```\n\n#### 第三步：创建后端路由\n设置 API 路由以连接 Agent 运行时。\n\n```ts\n\u002F\u002F app\u002Fapi\u002Fcopilotkit\u002Froute.ts\nimport { CopilotRuntime, OpenAIAdapter } from \"@copilotkit\u002Fruntime\";\n\nexport const POST = async (req: Request) => {\n  const runtime = new CopilotRuntime();\n  \n  const adapter = new OpenAIAdapter({\n    model: \"gpt-4o\", \u002F\u002F 或你使用的其他模型\n  });\n\n  return runtime.handleRequest(req, adapter);\n};\n```\n\n#### 第四步：运行与测试\n启动开发服务器：\n\n```bash\nnpm run dev\n```\n\n打开浏览器访问应用，在侧边栏输入：“帮我查一下北京的天气”。\n**预期结果**：Agent 将识别意图，调用 `get_weather` 工具，并在聊天界面中直接渲染出你在 `render` 函数中定义的天气卡片组件，而不仅仅是纯文本回复。\n\n---\n\n> **进阶提示**：\n> *   若需更灵活的动态布局，可探索 **Declarative Generative UI (A2UI)**，通过 JSON 描述让 Agent 动态组合组件。\n> *   若需嵌入完整的第三方应用（如 Excalidraw），可使用 **Open-ended Generative UI (MCP Apps)** 模式。","某电商平台的运营团队需要构建一个智能数据分析助手，帮助非技术背景的管理者实时查询销售数据并生成可视化报表。\n\n### 没有 generative-ui 时\n- **交互僵化**：用户只能看到固定的聊天文本回复，无法直接在对话框中查看动态图表或可交互的数据表格。\n- **开发成本高**：每新增一种图表类型（如热力图、漏斗图），前端工程师都必须硬编码新的 UI 组件并重新部署应用。\n- **上下文割裂**：AI 分析出的关键数据与展示界面分离，用户需手动复制数据到外部工具才能进行二次分析或演示。\n- **响应滞后**：面对突发的临时分析需求（如“对比上周同期并标红异常值”），系统因缺乏预设模板而无法即时渲染定制化视图。\n\n### 使用 generative-ui 后\n- **界面自适应**：generative-ui 让 AI 根据查询意图实时生成并渲染交互式图表（如可筛选的折线图、下钻地图），无需预定义固定界面。\n- **零代码扩展**：利用 Declarative Generative UI 模式，AI 直接返回结构化 UI 描述，新增复杂可视化组件无需修改前端代码或重新发布。\n- **沉浸式分析**：用户在对话流中直接操作生成的 UI 组件（如点击图例过滤、悬停查看详情），实现“问即所得”的闭环体验。\n- **动态定制**：针对“标红异常值”等临时指令，Open-ended Generative UI 能即时调整组件样式与逻辑，瞬间呈现符合特定上下文的专属视图。\n\ngenerative-ui 将静态的聊天机器人升级为能随需应变的智能工作台，彻底打破了传统开发与动态业务需求之间的壁垒。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002FCopilotKit_generative-ui_1bf55887.png","CopilotKit","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002FCopilotKit_3590025f.png",null,"https:\u002F\u002Fcopilotkit.ai","https:\u002F\u002Fgithub.com\u002FCopilotKit",658,61,"2026-04-08T14:55:04",4,"未说明",{"notes":84,"python":85,"dependencies":86},"该工具是一个用于构建代理应用（Agentic Apps）生成式 UI 的框架\u002F协议指南，而非单一的本地运行模型。它主要依赖前端环境（如 React\u002FNext.js）和后端运行时（Node.js 或 Python）。示例中展示了如何使用 LiteLLM 连接大模型，以及通过 MCP 协议连接外部服务。具体的系统资源需求取决于所连接的大模型服务商或本地部署的模型，工具本身无特定 GPU 或内存硬性要求。","未说明 (示例代码中使用了 Python)",[87,88,89,90,91,92,93],"@copilotkit\u002Freact","@copilotkit\u002Fa2ui-renderer","@copilotkit\u002Fruntime","@ag-ui\u002Fmcp-apps-middleware","litellm","zod","React",[13],[96,97,98,64,99],"a2ui","ag-ui","agentic-ai","mcp-apps","2026-03-27T02:49:30.150509","2026-04-09T10:04:26.369127",[],[]]