CraftReactNative Documentation

Use the CraftReactNative MCP server to give AI assistants direct access to your components, examples, and theming docs.

What this server does

The CraftReactNative MCP server bridges your documentation site and AI coding tools.

When it is enabled in an IDE or assistant, it can:

List CraftReactNative components that are available via the CLI
Return metadata for a specific component (description, docs link, props summary)
Produce ready‑to‑run CLI commands to install one or more components
Serve TSX code examples for selected components
Summarize theming and dark mode behavior for the design system

The server runs over stdio and is implemented with @modelcontextprotocol/sdk.

Setup in different tools

The MCP server is published as @craftreactnative/mcp on npm and is designed to be launched with npx by compatible AI tools.

Cursor

To use the server in Cursor, add it under Settings → Tools → MCP Servers, or create a .cursor/mcp.json file in your project:

.cursor/mcp.json

{
  "mcpServers": {
    "craftrn-ui": {
      "command": "npx",
      "args": ["-y", "@craftreactnative/mcp@latest"]
    }
  }
}

After saving, restart Cursor. The MCP server should appear in the MCP tools list as craftrn-ui.

Claude Code

In Claude Code, you can register the server with:

claude mcp add craftrn-ui -- npx -y @craftreactnative/mcp@latest

You can also configure it in a project‑level .mcp.json:

.mcp.json

{
  "mcpServers": {
    "craftrn-ui": {
      "command": "npx",
      "args": ["-y", "@craftreactnative/mcp@latest"]
    }
  }
}

After adding the configuration, restart Claude Code and list MCP servers. Once craftrn-ui shows as Connected, you can start using the tools.

VS Code (GitHub Copilot MCP)

If you are using MCP with GitHub Copilot in VS Code, add the server configuration to .vscode/mcp.json:

.vscode/mcp.json

{
  "mcpServers": {
    "craftrn-ui": {
      "command": "npx",
      "args": ["-y", "@craftreactnative/mcp@latest"]
    }
  }
}

Then open .vscode/mcp.json in VS Code and click Start next to the craftrn-ui server entry.

How AI tools use it

Once the server is configured in your editor or assistant, you can stay in natural language and let the MCP layer do the work.

Discover and install components
- "Show me every CraftReactNative component I can add with the CLI."
- "Create the CLI command to install Button and Card with the latest version."
Look up documentation
- "What is the Card component for? Give me a short summary and link to the docs."
Ask for examples
- "Give me a TSX usage example for Button based on the CraftReactNative components."
Understand theming
- "Explain how dark mode and theming work for these components."

Under the hood, your assistant calls tools such as list_components, get_component_details, get_component_example, generate_install_command, and get_theme_overview, then turns the responses into prose or code suggestions.

Available tools

The MCP server exposes the following tools for AI assistants:

Tool	What it does	Input	Output (shape)	Typical usage
`list_components`	Lists all CraftReactNative UI components that can be added with the CLI.	none	`{ components: string[] }`	"List all CraftReactNative UI components I can install."
`get_component_details`	Returns description, docs URL, and short props summary for a component.	`{ name: string }`	`{ name: string; description: string; docsUrl: string; propsSummary?: string }`	"Tell me what the `BottomSheet` component does and link me to its docs."
`get_component_example`	Returns a copy‑pasteable TSX usage example for a component (when available).	`{ name: string }`	`{ name: string; example: string }`	"Give me a TSX example for the `Button` component using CraftReactNative UI."
`generate_install_command`	Generates an `npx` CLI command to install one or more components.	`{ components: string[]; latest?: boolean }`	`{ command: string }`	"Generate the command to install `Avatar`, `Button`, and `Card` using the latest version of the CLI."
`get_theme_overview`	Explains theming & dark mode and links to the theming docs.	none	`{ docsUrl: string; summary: string }`	"How does CraftReactNative UI handle theming and dark mode? Link to the relevant docs."

Example AI prompts

Here are some concrete prompts you can use with MCP‑enabled assistants:

Discover components
- "Ask the CraftReactNative MCP server to list all components I can add to my project."
Learn a specific component
- "Use the CraftReactNative MCP server to fetch details for the PhotoCarousel component and summarize when I should use it."
Install from the CLI
- "Generate an npx command using the CraftReactNative MCP server to install BottomSheet and SliderDual with the latest CLI."
Get an example
- "Call the CraftReactNative MCP server to get a TSX example for the Card component and adapt it for a profile screen."
Understand theming
- "Use the CraftReactNative MCP server to explain how to set up dark mode for these components and give me the relevant docs link."

Troubleshooting

Requirements:
- Node.js 18 or higher is recommended.
- The MCP server communicates over stdio and is started via npx.
Component name errors:
- If you pass an unknown component name, tools like get_component_details and get_component_example will throw an error listing all valid components. Use that list to correct the name.
Missing examples:
- Not every component has an inline example. When get_component_example fails, the error message will include the docs URL—have your assistant open that page instead.

If your assistant supports inspecting raw MCP tool responses, you can look at the structuredContent payloads to see exactly what data each tool returns.

MCP Server