Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Astryx Documentation MCP Server Search docs for the Button component usage"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A comprehensive Model Context Protocol (MCP) server and AI Agent Skill for the Meta Astryx Design System. This project indexes scraped documentation, component specifications, StyleX guides, and CLI references, exposing structured tools and prompt guidelines for AI assistants and coding agents (Claude Desktop, Cursor, Project IDX, Gemini CLI, Antigravity, Windsurf).
The MCP server exposes four tools over stdio:
search_astryx_docs
Description: Full-text and keyword search across all Astryx documentation, guides, and component APIs.
Parameters: query: string (e.g., 'Button', 'defineTheme', 'StyleX', 'asChild').
get_astryx_component
Description: Retrieve usage guidelines, prop interfaces, imports, and code examples for a specific component.
Parameters: componentName: string (e.g., 'Button', 'AppShell', 'Table', 'Avatar', 'Dialog', 'Input').
get_theme_guide
Description: Retrieve information on the 6 built-in themes (Neutral, Butter, Stone, Gothic, Y2K, Matcha), CSS variable design tokens, and custom theme definitions with defineTheme.
Parameters: themeName?: string (e.g., 'butter', 'neutral', 'defineTheme').
get_cli_commands
Description: Documentation for @astryxdesign/cli and commands (init, doctor, template, manifest, theme build, swizzle).
Parameters: command?: string (e.g., 'init', 'doctor', 'template', 'manifest', 'theme build', 'swizzle').
Related MCP server: astro-mcp
astryx-skill)Located in astryx-skill/SKILL.md, this skill provides authoritative coding patterns and rules:
Subpath Imports: import { Button } from '@astryxdesign/core/Button';
Cascade Layers: Enforces @import '@astryxdesign/core/astryx.css'; under @layer astryx-base.
StyleX Overrides: Uses StyleX via xstyle prop instead of arbitrary inline styles.
Theme Provider: Standardized <Theme mode="system" theme={neutralTheme}> application structure.
An interactive presentation website is included in index.html, featuring:
Live Theme Explorer: Test the 6 Astryx design themes (Neutral, Butter, Stone, Gothic, Y2K, Matcha).
Component Playground: Interactive prop controls with real-time TSX code generation.
MCP Server Stdio Simulator: Interactive search tool test runner.
One-Click Publishing Matrix: Simple setup for GitHub Pages, Vercel, Netlify, and Cloudflare Pages.
Node.js >= 18.0.0
npm / pnpm / yarn
git clone https://github.com/georgemathunjaga/astryx-mcp-and-skill.git
cd astryx-mcp-and-skill
npm install# Build TypeScript and bundle crawl data to dist/
npm run build
# Start the MCP server using node (stdio)
npm start
# Run in development mode with live TypeScript compilation
npm run dev
# Run automated integration tests
npm testAdd the following to your claude_desktop_config.json:
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"astryx-docs": {
"command": "node",
"args": ["E:/workspace/public-repos/astryx-mcp/dist/index.js"]
}
}
}Add to your project's .cursor/mcp.json or mcp.json:
{
"mcpServers": {
"astryx-docs": {
"command": "node",
"args": ["E:/workspace/public-repos/astryx-mcp/dist/index.js"]
}
}
}astryx-mcp/
āāā astryx-skill/ # Astryx Agent Skill instructions
ā āāā SKILL.md
ā āāā astryx-skill.md
āāā index.html # Interactive Intro Website
āāā styles.css # Master CSS Design System
āāā app.js # Interactive Website Logic & MCP Simulator
āāā dist/ # Compiled JavaScript output & assets
ā āāā index.js
ā āāā data/
ā āāā astryx_crawl.json
āāā src/
ā āāā data/
ā ā āāā astryx_crawl.json # Crawled Astryx documentation dataset
ā āāā index.ts # MCP Server definition and tool handlers
āāā test/
ā āāā mcp-test.js # MCP Stdio verification suite
āāā package.json
āāā tsconfig.json
āāā README.mdMIT
Retrieve usage, props, imports, and code specifications for a specific Astryx component.
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | The name of the component (e.g., 'Button', 'AppShell', 'Table', 'Avatar', 'Dialog', 'Input') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the burden. The description says it retrieves usage, props, imports, and code specs, disclosing the kind of data returned. However, it doesn't mention any side effects, permission requirements, or edge cases (e.g., what happens if component doesn't exist). For a read operation this is acceptable but not comprehensive.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Single sentence, concise, lists key deliverables (usage, props, imports, code specs). It is front-loaded with the action. No waste, though a bit terse.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read tool with one parameter and a clear description, it is mostly complete. The description doesn't mention what exact code specifications look like or error handling, but given the simplicity and no output schema, it's adequate. Slight gaps: how detailed the retrieval is, whether it returns snippets or full source.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% for the single parameter componentName, including an example list. The description adds nothing beyond the schema but doesn't need to, given the coverage. The baseline of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool retrieves usage, props, imports, and code specifications for a specific Astryx component. It names the resource (Astryx component) and the verb (retrieve). It distinguishes from siblings that handle docs search, theme guides, and CLI commands, but does not explicitly name any sibling.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage: when you need details about a specific component. It does not explicitly state when not to use it versus siblings. For example, it doesn't say 'use search_astryx_docs for broader searches.' The purpose is clear but exclusions are not named.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get documentation for the @astryxdesign/cli tool and CLI commands (init, doctor, template, manifest, theme build, swizzle).
| Name | Required | Description | Default |
|---|---|---|---|
| command | No | Specific CLI command (e.g., 'init', 'doctor', 'template', 'manifest', 'theme build', 'swizzle') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must convey behavior, but it doesn't disclose any side effects, performance implications, or output format. As a read operation it likely has no side effects, but nothing explicitly states that.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence, front-loaded with the core purpose. The command list adds necessary specificity without waste. Slight redundancy with the parameter description, but overall efficient.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple read-only documentation retrieval with one optional parameter and no output schema, the description is mostly sufficient, but it lacks explicit behavior details and sibling differentiation. An agent knows what to call but not exactly what to expect in return.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, and the description adds context by enumerating valid command values (init, doctor, etc.). This goes beyond the schema's example, giving agents a clearer sense of acceptable inputs.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool retrieves documentation for a specific CLI tool and lists the exact commands covered. This helps an agent understand the resource and scope, though it doesn't explicitly differentiate from siblings like search_astryx_docs.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance is given on when to use this tool versus searching general docs or other resources. The description implies usage for CLI documentation but doesn't state exclusions or alternatives.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get details on Astryx themes (Neutral, Butter, Stone, Gothic, Y2K, Matcha) or custom defineTheme CSS custom property syntax.
| Name | Required | Description | Default |
|---|---|---|---|
| themeName | No | Optional specific theme name (e.g., 'butter', 'neutral', 'defineTheme', 'gothic', 'matcha', 'y2k') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the behavioral disclosure burden. 'Get details' clearly signals a read-only operation, and the scope of the output is defined by the listed themes and defineTheme syntax. It does not describe behavior when themeName is omitted, but this is a minor gap for a getter with one optional parameter.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single, front-loaded sentence with no wasted words. It immediately states the purpose, lists the relevant theme names, and includes the defineTheme alternative without redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one optional parameter and no output schema, the description covers the core purpose and parameter values well. The only notable omission is what happens when themeName is absent, but the schema already marks it optional, and the overall context is sufficient for a simple retrieval tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, setting a baseline of 3. The description goes slightly beyond the schema by clarifying that the listed values are theme names and that defineTheme refers to CSS custom property syntax, which adds useful semantic context for selecting a value.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('Get details'), a specific resource ('Astryx themes'), and enumerates the exact theme names plus the custom defineTheme syntax. This makes the tool's purpose unambiguous and clearly distinct from siblings that handle components or CLI commands.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies when to use the tool: when you need Astryx theme details or defineTheme syntax. However, it provides no explicit guidance on alternatives, such as search_astryx_docs, or exclusions that would help an agent choose between siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Search across Meta Astryx design system documentation, guides, components, and API references.
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search keyword or phrase (e.g., 'Button', 'defineTheme', 'StyleX', 'CLI', 'asChild') |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations exist, so the description carries the full burden. It only states that the tool searches across docs; it doesn't say whether results are snippets, ranked lists, or full documents, nor what happens with no matches or ambiguous queries.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One short sentence, no filler, no repetition of the schema. It is easy to parse and front-loaded with the core purpose.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a one-parameter search tool the description is minimally adequate, but it lacks output/result details and sibling-routing guidance, and there is no output schema or annotations to fill those gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already documents the query parameter at 100% coverage with concrete examples. The description adds no further parameter semantics beyond the tool's broad scope, so baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States the verb 'search' and the resource 'Meta Astryx design system documentation, guides, components, and API references.' It is clearly a search operation, but it doesn't explicitly distinguish itself from the sibling get_ tools beyond implying breadth.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No guidance on when to use this tool instead of get_astryx_component, get_theme_guide, or get_cli_commands. The description implies a broad fallback, but an agent isn't told whether to prefer a targeted getter when the target is known.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v1.0.0get_astryx_componentget_cli_commandsget_theme_guidesearch_astryx_docsScored across 4 tools
Each tool targets a distinct area of the documentation: broad search, component details, theme syntax, and CLI commands. There is no meaningful overlap between the four tools.
Tool names follow a clear verb-first pattern, using `search_` for the lookup tool and `get_` for the three resource-specific tools. Minor inconsistency comes from only some tools including the 'astryx' prefix, but the structure is still predictable.
Four tools is a well-scoped set for a documentation MCP server, covering search plus the three primary documented areas: components, themes, and CLI. Each tool serves a distinct purpose without unnecessary redundancy.
The tool surface covers the main ways someone would interact with Astryx documentation: searching, component reference, theme customization, and CLI usage. A potential gap is the absence of a direct `get_guide` tool for retrieving a full guide article, but the search tool mitigates that.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
The documentation, as a tool your agent can call: 950+ AI-dev guides. Search + fetch tools.
Access and maintain design system docs, tokens, components, skills, and contexts across any project.
Versioned documentation registry and semantic search for AI tools and coding assistants.
Serves your design system and coding standards to coding agents, so they stop guessing.
