render
让 Agent 在目标位置创建一个 UI 组件，并传入初始数据。
command.json
{
"type": "render",
"component": "PersonalProfileCard",
"params": {
"name": "陈叙",
"title": "内容策略师"
}
}核心指令
三条指令，掌控全生命周期。
update
随时更新已展示组件的内容，无需刷新页面。
command.json
{
"type": "update",
"widgetId": "widget-1",
"params": {
"title": "资深内容策略师"
}
}destroy
在合适时机移除组件，界面保持干净可控。
command.json
{
"type": "destroy",
"widgetId": "widget-1"
}系统架构
协议优先，分层清晰。
输入端
AI AgentPythonGoNode.jsRust
JSON
协议层
Braid Protocolcommands.schema.jsonevents.schema.jsonmanifest.schema.json
WS / SSE / HTTP
适配层
Braid RuntimeStream ParserWidget ManagerAdapter
props / events
展示层
UI 组件RegistryUI Components
传输无关
WebSocket、SSE、HTTP Polling 均可驱动协议，Runtime 从不关心字节如何到达。
后端任意语言
后端只需会发 JSON。Python、Go、Node.js、Rust 皆可，无需安装任何后端 SDK。
前端框架自选
Runtime 是轻薄适配层，可按目标前端栈使用官方适配入口，也可在需要时扩展新的适配器。
Agent Skill
让 AI Coding 更准确地接入 Braid。
Braid 提供可安装的 Agent Skill，把前端运行时接入、组件 manifest、命令协议和常见约束交给 AI 直接读取，减少手写提示词和错误实现。
接入前端运行时指导 Coding Agent 安装官方 npm 包，并使用前端运行时消费命令流。
遵守命令协议让 Agent 只生成 render、update、destroy，避免自造字段和临时 payload。
对齐组件能力提醒 Agent 读取 manifest，按已注册组件的名称、参数和生命周期完成集成。
terminal
npx skills add mqhe2007/braid --skill braid-manifest
npx skills add mqhe2007/braid --skill braid-setup
npx skills add mqhe2007/braid --skill braid-protocol安装后，AI Coding 可以在集成 Braid 时自动获得协议、运行时和 manifest 约束。
案例展示
看看 Braid 能做什么。
个人网站使用 Braid 架构搭建的线上站点，完整实现了 Agent 驱动的 UI 渲染。查看案例 →你的项目使用 Braid 构建了 AI 驱动界面？提交 Issue 或 PR，你的项目会展示在这里。提交项目 →
即将展示更多案例正在筹备中，等你的 Demo GIF 和截图就绪后补充到此区域。
独立开源 · 欢迎参与
这里欢迎每一位参与者。
这个项目源于构建 AI 产品时的真实痛点，业余时间写下，持续打磨。没有赞助商，没有公司支持，协议设计、运行时和文档全由我一个人维护。每一条 Issue 和 PR 都直接影响它的走向。
提交 Issue发现了 bug，或者有关于协议、运行时的新想法？开一个 Issue，我会认真阅读每一条。提交 Pull Request无论是修复文档里的错别字，还是新增一个运行时适配，所有尺寸的 PR 都受到欢迎。Star & Watch给项目一个 Star，帮助更多遇到同样问题的开发者找到它。