Кликнете за преглед на слики 1 слики 🔧 Shadify:用自然语言说出 UI,shadcn 组件实时生成
📌 项目简介
CopilotKit 开源新项目 Shadify,用户只需用自然语言描述想要的界面,即可实时生成基于 shadcn/ui 的交互式页面,并一键导出为干净的 React 代码。
- GitHub Star:105
- 开源协议:MIT
- 主语言:TypeScript(91.8%)
- 创建时间:2026-02-25
- 在线演示:https://shadify.copilotkit.ai
⚙️ 技术架构
三服务 pnpm monorepo 架构:
- UI(React + Vite):聊天界面、组件渲染、代码导出
- Runtime(Hono + CopilotKit):消息路由至 Agent
- Agent(FastAPI + LangGraph):推理、工具调用(Tavily 搜索/网页提取)、多轮对话记忆
核心技术栈:
- shadcn/ui — AI 从真实 shadcn 组件库中组合,生成的页面可直接 npx shadcn add 使用
- CopilotKit — 实时流式传输结构化 UI,将完整组件 schema 作为 Agent 上下文
- LangGraph — 驱动 Agent 后端,处理推理和工具调用
- Render — 单文件 render.yaml 一键部署三服务
📎 背景
CopilotKit 是开源 AI Agent 前端框架领域的领军项目,也是 AG-UI(Agent-User Interaction)协议的创建者。AG-UI 协议于 2025 年 5 月发布,已获 LangGraph、CrewAI、Mastra 等框架首日集成支持。CopilotKit 主仓库在 GitHub 累计超 20K Star,定位「企业级 Agent 前端技术栈」。
近期 CopilotKit 还发布了 Open Generative UI 模板,灵感来自 Claude 的交互式图表功能,展示如何用 CopilotKit + LangGraph 构建 AI 驱动的动态 UI。Shadify 是其 Generative UI 能力的最佳实践案例,将「描述即生成」从文本扩展到完整 UI 组件页面。
💡 推荐理由
- 零门槛 UI 生成:自然语言描述 → 实时交互式 shadcn 页面,非前端开发者也能快速原型
- 代码可用:导出的 React 代码使用标准 shadcn 组件,可直接集成到现有项目
- 架构清晰:三服务分离 + pnpm monorepo,适合作为 Generative UI 学习参考
- 一键部署:Render Blueprint 配置,推送即上线
- 完全开源:MIT 协议,可自由商用
🔗 链接
- GitHub:https://github.com/CopilotKit/shadify
#AI#开源项目#GenerativeUI#shadcn#CopilotKit#AIAgent