AI Integration

The Elements documentation ships three ways in for AI agents: a conversational assistant on the site, an MCP server for coding tools, and raw Markdown you can fetch wholesale.

#Docs assistant

The site ships a built-in AI assistant that answers questions about the documentation in natural language:

• Floating input — ask from any docs page
• Grounded in the docs — backed by the same MCP tools (list-pages to search, get-page to read), so it answers rather than guesses
• Cited sources — replies link to the doc pages they draw on
• Code examples — copyable usage snippets

The assistant itself is built from Elements' own Ai component family and Drawer — the library dogfoods.

#MCP server

The site exposes an MCP server at /mcp with two tools:

#Claude Code

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

Or add it to a config file (~/.claude/settings.json, or .claude/settings.json in a project):

{
  "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

Following the llms.txt spec, the site generates two files for agents that fetch documentation wholesale:

• /llms.txt — a concise index of every docs page
• /llms-full.txt — the full documentation as one Markdown file

Every page also has a raw Markdown route: /raw/<path>.md.

#In CLAUDE.md

Reference it from a project's CLAUDE.md:

For the Elements component library, refer to:

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

#Generative UI

The library reads as well as it renders — for machines, too. Every component family carries a generative face: a zod-typed catalog entry (props, slots, description) that lives beside the component itself. The faces compose into a json-render catalog, and each framework package exposes a renderer under @bysages/<fw>/generative:

• Constrained by design — the model may only compose components you registered; there is no free-form HTML and no way around the design system
• Typed vocabulary — props are zod schemas, so requests validate before they render
• One vocabulary, four frameworks — React, Vue, Solid and Svelte share the same faces; only the renderer differs

Point an AI SDK stream at the renderer and a prompt becomes a working, on-brand interface — the generative studio in the docs examples is a live demo.

#Summary