HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Getting started
Coding agentsWe publish Helix as text for agents that write Helix code, so an agent does not
need to read the rendered website. Three sources give it the library as text.
We generate all three from the same sources as this site.Install the pluginHelix's plugin gives an agent the Helix skill and
the Helix MCP server in one install. The server runs
npx @fusion.dev/helix-cli mcp, the command line your project installs, so its
answers are your version's.ToolInstallClaude Codeclaude plugin marketplace add project-fusion/fusion, then claude plugin install helix@fusionCursor/plugin marketplace add https://github.com/project-fusion/fusion in Cursor's agent, then install helix. A team marketplace can import the repository insteadVS CodeAdd "chat.plugins.marketplaces": ["project-fusion/fusion"] to your settings, search @agentPlugins in the Extensions view, and install helixGitHub Copilot CLIcopilot plugin install project-fusion/fusion:helix/pluginCodexcodex plugin marketplace add project-fusion/fusion, then codex plugin add helix@fusionDevindevin plugins install project-fusion/fusion#helix/pluginGemini CLIgemini skills install https://github.com/project-fusion/fusion.git --path helix/plugin/skills/helix, for the skill aloneThe plugin follows the latest release of Helix. Its skill points to the copy in
node_modules, which matches the version you installed.Link the skill without a pluginPoint your tool at the skill, and do not copy it. A copy starts to go stale
as soon as you paste it, and the skill changes with the library. The skill in
the package matches the Helix you installed.Most tools read skills from .agents/skills, and Claude Code and Cline from
.claude/skills. Link it into the one your tool reads:mkdir-p .agents/skills
ln-s ../../node_modules/@fusion.dev/helix/skills/helix .agents/skills/helixOther tools read a file in your repository. Add a line to it that names the
skill, or this page:Helix: read node_modules/@fusion.dev/helix/skills/helix/SKILL.md before
writing components, and node_modules/@fusion.dev/helix/api.json for the API.ToolWhere it goesClaude Code.claude/skills/helix, or a line in AGENTS.md or CLAUDE.mdCursor.cursor/rules/GitHub Copilot.github/copilot-instructions.mdAnything elseWhatever it reads. The line is the sameWe do not write those files for you, and we chose this on purpose. You would
have to maintain a file we generated in your repository against our changes. A
tool that rewrote it on install would be a dependency you did not ask for, in a
directory you own. You add the link or the line, and you can delete it.Install the Helix MCP serverhelix mcp init --client claudehelix mcp answers from the Helix packages your project installs: families,
examples, import lines, tokens, and the theme a brand color produces. It runs on
your machine, talks to a client you chose, and makes no network requests.
The Helix MCP server lists the tools.--client writes the server into the project file that client reads:--clientFileclaude.mcp.jsoncursor.cursor/mcp.jsonvscode.vscode/mcp.jsongemini.gemini/settings.jsonopencodeopencode.jsonroo.roo/mcp.jsonjunie.junie/mcp/mcp.jsonCodex, Cline, Devin, and Zed read their servers from your own settings, outside
the project, so add npx @fusion.dev/helix-cli mcp there.The manifesthttps://fusion.dev/helix/custom-elements.json
@fusion.dev/helix/custom-elements.jsonThe URL and the package path serve the same file. A package path works only
from a node_modules folder. An agent that found Helix through llms.txt can
reach this site and has no checkout, so it needs the URL.The manifest lists:every elementevery property, with its literal type unionevery event, with its classevery slotevery partevery custom propertyWe generate the framework typings, the reference documentation, and the site's
component pages from the manifest, so they always match it.If a tag is not in the manifest, it does not exist. An agent can check every
tag and value it writes against the file, so an invented component is caught. A
prop value outside a declared union is invalid.For the same reason, the analyzer requires literal unions for property types.
'ghost' | 'outlined' | 'solid' | 'subtle' shows you what to write. A named
type such as ButtonEmphasis sends you somewhere else to look.Markdown and JSON for each component familyhttps://fusion.dev/helix/components/<family>.md
https://fusion.dev/helix/components/<family>.jsonThese are static files, one pair for each family. Read the family you are
writing instead of the whole manifest. The manifest holds every family in one
file, and it is several megabytes.The .md file has:the family's metadataa Usage block with the import lines for the familyevery element's description and API tablesthe examples, each with the import lines it needsThe HTML page leaves the examples out on purpose. The page lists what a
component can do, and the sandbox beside it shows what the component looks
like. Keeping pictures out of the reference keeps it the one place you can trust
to be complete. An agent cannot use the sandbox, and it reads an example as
text, so the .md file includes the examples.Each example the visual check pictures links its pictures under it: wide at
640 pixels, narrow at 390, and dark at 640, taken in the environment that
examples.json records. Compare a render of your own to them.The .json file has the same family as structured data, and three fields an
agent uses most:usage, the import block for each tierimports on each example, an import line for every element it writesspecifier and words on each element: the line that registers it, and the
properties registerWords translatesCheck the code you wrotehelix scan, helix diagnostics --once, and helix theme audit check what an
agent wrote, and the MCP server runs the same checks.
Using Helix with an agent
lists what each finds, and Diagnostics sets the checks up in
your app and in CI.The index/llms.txtllms.txt lists every page on the site, in groups. Each entry links to the
page's .md file and has a one-sentence summary. We generate it from the same
route registry as the sitemap. Every page appears in it, and every entry in it
is a page that exists.Start with llms.txt. In one request, it names every page on the site and the
two machine-readable sources above. This guide gives no page count, because a
number typed into prose goes stale.Links on each component pageEach family page has a menu beside its title with:View MarkdownCopy Markdownlinks that send the document's URL to Claude or to CursorThe links send the URL, because the URL stays current. A pasted copy starts to
go stale as soon as you paste it.The Helix MCP serverhelix mcp init --client claudehelix mcp runs an MCP server over stdio. It answers from the Helix packages
your project installs, so every answer is for the version you build with, and
each one names that package and version. helix mcp init adds the server to
the file your client reads and keeps every other server in it:ClientFileclaude.mcp.jsoncursor.cursor/mcp.jsonvscode.vscode/mcp.jsonThe server runs npx @fusion.dev/helix-cli mcp, which is the copy in your
project. It has nine tools:ToolWhat it returnshelix_findThe families that answer a name, an alias, a tag, or a purpose, best firsthelix_familyOne family's tags, properties and their unions, events and their React props, slots, parts, custom properties, words, and import lineshelix_exampleOne example as HTML and TSX, with its stylesheet, the import lines it needs, and links to its pictureshelix_importsThe import lines for a list of tags, and the closest tag to any unknown onehelix_tokensThe semantic tokens, by a word in the name or description and by categoryhelix_checkThe findings helix scan reports for the files you name, or for a snippet before you write ithelix_check_pageThe findings the page diagnostics report for each address you name, opened headless, with what the library logged as the page ranhelix_audit_themeEvery foreground and background pair a brand color derives to, with its ratio and targethelix_derive_themeThe theme's CSSEach result is structured, with an output schema, and the same JSON as text.
A name that matches more than one family, such as Dropdown, returns an error
listing each family. The theme tools take the same JSON that a
helix.theme.json file holds.Each lookup is also a command, for a script or a person:helix api find dropdown
helix api family select
helix api example select
helix api imports helix-select helix-option
helix api tokens surface --category color--json prints what the MCP tool returns.helix_derive_theme does not return a palette that fails its own targets,
the same as helix theme build. A failing palette pasted into a stylesheet is
worse than a warning above it, and an agent does not read warnings.You run helix mcp yourself, and we do not host it. A server we operated would
be one more service between you and your own tokens. helix mcp is a
subcommand of a binary you installed. It talks to a client you chose and makes
no network requests.What we do not publish for agentsllms-full.txt, or any other whole-library download of the pages. A single
file with every page goes out of date as soon as anything changes. Each link in
llms.txt can be cached on its own and stays current on its own.llms.txt is the index, in one request, and each family's .md file is its
document. Fetch the families you use, or ask helix mcp.