AI 集成

Elements 文档为 AI 代理准备了三种接入方式：站点上的对话助手、供编码工具连接的 MCP 服务器，以及可直接抓取的原始 Markdown。

#文档助手

文档站点内置 AI 助手，支持用自然语言查询文档内容：

• 浮动输入框 — 在任意文档页面直接提问
• 以文档为准 — 助手背后是同一套 MCP 工具（list-pages 检索、get-page 读取），答案不靠猜
• 引用来源 — 回复附带可点击的文档页面链接
• 代码示例 — 生成可复制的用法片段

助手本身也是用 Elements 的 AI 组件（Ai 家族）与 Drawer 搭建——组件库吃自己的狗粮。

#MCP 服务器

文档站在 /mcp 路径暴露 MCP 服务器，提供两个工具：

#在 Claude Code 中使用

claude mcp add --transport http elements https://elements.bysages.com/mcp

或写入配置文件（~/.claude/settings.json 或项目 .claude/settings.json）：

{
  "mcpServers": {
    "elements": {
      "type": "http",
      "url": "https://elements.bysages.com/mcp"
    }
  }
}

#在 OpenAI Codex CLI 中使用

codex mcp add elements --url https://elements.bysages.com/mcp

#LLMs.txt

站点按 llms.txt 规范 生成两份文件，供需要批量获取文档的代理直接抓取：

• /llms.txt — 全部文档页的简洁索引
• /llms-full.txt — 完整文档的单文件 Markdown

每页还有对应的原始 Markdown 路由：/raw/<path>.md。

#在 CLAUDE.md 中使用

在项目的 CLAUDE.md 里加一行引用：

对于 Elements 组件库，参考：

- https://elements.bysages.com/llms.txt

#生成式 UI

这个库不仅给人读，也为机器而写。每个组件族都带一张生成式面孔：一份紧挨组件的 zod 类型目录条目（props、slots、描述）。所有面孔汇成 json-render 目录，各框架包在 @bysages/<fw>/generative 下提供渲染器：

• 设计即约束 —— 模型只能组合你注册过的组件，没有自由发挥的 HTML，也绕不开设计系统
• 类型化词汇表 —— props 即 zod schema，请求先校验后渲染
• 一套词汇表，四个框架 —— React、Vue、Solid、Svelte 共享同一套面孔，只有渲染器不同

把 AI SDK 的流接上渲染器，一句提示词就能变成可用的、符合设计系统的界面——文档示例中的生成式工作台就是可运行的演示。

#总结