forgekit-radix-mcp
Exposes Radix Primitives' parts, props, and accessibility contracts to AI coding agents, ensuring correct and accessible component usage.
README
forgekit-radix-mcp
Radix Primitives' APIs and accessibility contracts, exposed to AI coding agents.
Coding agents (Claude Code, Cursor) routinely hallucinate Radix prop names, drop required parts, and miss the ARIA/keyboard contract of a primitive. There's no machine-readable source of truth for how to use Radix correctly — only prose docs an agent has to guess from.
forgekit-radix-mcp is an MCP server that gives an agent the real thing: each primitive's parts, props, and — the part nobody else ships — its accessibility contract and the common mistakes to avoid.
My coding agent stopped hallucinating Radix props — and now it knows a tooltip isn't a label.
Part of ForgeKit. MIT licensed.
Why
Props can be inferred from types. The accessibility contract can't — that's hand-authored knowledge: which Provider is required, which part supplies the accessible name, what the keyboard model is, and the misuse that quietly breaks a11y (a Tooltip used as a label, a Popover that auto-opens a nested Tooltip, a Select with an empty-string item value). This server encodes that so agents generate correct, accessible Radix code on the first try.
Install
npm i -g forgekit-radix-mcp
# or run on demand
npx forgekit-radix-mcp
Register with an MCP client
Claude Code / Cursor (stdio server):
{
"mcpServers": {
"radix": {
"command": "npx",
"args": ["-y", "forgekit-radix-mcp"]
}
}
}
Tools
| Tool | Returns |
|---|---|
list_primitives |
Every documented primitive + one-line description |
get_primitive |
Parts, props by part, a11y contract, and a correct example |
get_a11y_contract |
Just the accessibility contract — highest-signal payload |
Example
Agent call:
get_primitive { "name": "Tooltip" }
Returns (abridged):
{
"name": "Tooltip",
"import": "import { Tooltip } from 'radix-ui';",
"parts": ["Provider", "Root", "Trigger", "Portal", "Content", "Arrow"],
"a11yContract": {
"roles": "Content renders role=\"tooltip\"; Trigger gets aria-describedby when open",
"keyboard": ["Tab: focus the trigger → opens instantly", "Escape: closes"],
"focus": "Opens on focus AND hover; focus never moves into the tooltip",
"requires": ["Tooltip.Provider must wrap the app once"],
"commonMistakes": [
"Using a tooltip for essential/interactive content (use Popover/HoverCard)",
"Wrapping a disabled button directly — it fires no focus/hover events",
"Using a tooltip as the only label for an icon button"
]
},
"correctExample": "<Tooltip.Provider> ... </Tooltip.Provider>"
}
Coverage
26 primitives. Dialog · AlertDialog · Popover · Tooltip · HoverCard · DropdownMenu · ContextMenu · Menubar · NavigationMenu · Select · Tabs · Accordion · Collapsible · Checkbox · RadioGroup · Switch · Toggle · ToggleGroup · Slider · Toast · Progress · Avatar · Label · Separator · AspectRatio · ScrollArea.
Data reflects the radix-ui public API and the WAI-ARIA Authoring Practices.
Pairs with WorkOS AuthKit MCP
For agents that act on behalf of a user, AuthKit MCP handles secured, tool-scoped access — forgekit-radix-mcp is a read-only knowledge server that slots cleanly behind it.
Development
npm install
npm run build
npm test
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.