Neuctra UI MCP

AI coding assistants can generate React interfaces very quickly, but they may sometimes guess component names, props, or styling when they don't know a library.

Neuctra UI MCP gives the AI a direct way to ask Neuctra UI for the information it needs.

1Your Project
2     │
3     ▼
4AI Coding Assistant
5     │
6     │  MCP request
7     ▼
8Neuctra UI MCP
9     │
10     ├── Components
11     ├── Props
12     ├── TypeScript types
13     ├── Examples
14     ├── Theme tokens
15     └── Design guidelines
16     │
17     ▼
18AI generates Neuctra UI code

The remote MCP server is already hosted by Neuctra. Your AI application connects directly to it over the MCP protocol.

This is the recommended option for MCP clients that support remote HTTP-based MCP servers.

If your Claude Code version supports remote MCP servers, add the Neuctra UI MCP endpoint as a remote server.

1claude mcp add --scope user neuctra-ui --transport http https://mcp.ui.neuctra.com/mcp

The --scope user option makes the MCP server available across your projects for your user account.

Open Cursor's MCP settings and add a new remote MCP server.

Once connected, Cursor can use Neuctra UI MCP tools while generating and modifying your application.

Open the MCP configuration in Antigravity and add the remote Neuctra UI MCP endpoint.

After connecting, the AI can query Neuctra UI information while building your application.

If your AI application provides a remote MCP or connector interface, use the Neuctra UI MCP URL:

1https://mcp.ui.neuctra.com/mcp

Look for an option such as Connect MCP, Remote MCP, or MCP Connector.

list_components

1{
2  "category": "form"
3}

The category is optional. Without a category, the AI can browse the complete component registry.

1[
2  {
3    "name": "Calendar",
4    "category": "form",
5    "propCount": 9
6  },
7  {
8    "name": "Checkbox",
9    "category": "form",
10    "propCount": 29
11  },
12  {
13    "name": "DatePicker",
14    "category": "form",
15    "propCount": 15
16  }
17]

search_components

1{
2  "query": "loading state"
3}

This allows the AI to search using functionality, descriptions, categories, component names, and prop information.

1{
2  "name": "Button"
3}

The response can provide information such as:

• Component name
• Category
• Description
• Props
• TypeScript types
• Required and optional props
• Default values
• Prop descriptions
• Usage examples

This is especially useful when the AI has never used a particular Neuctra UI component before.

The get_theme tool provides theme information and styling guidance.

1{}

Semantic Tokens

1bg-primary
2text-primary
3border-primary
4
5bg-background
6text-foreground
7
8bg-muted
9text-muted-foreground
10
11bg-card
12text-card-foreground
13
14bg-destructive
15bg-success
16bg-warning
17bg-info

Semantic tokens allow the AI to work with your application's theme instead of randomly choosing colors from a Tailwind palette.

Design Guidelines

• Prefer semantic theme tokens.
• Avoid unnecessary hardcoded brand colors.
• Use existing Neuctra UI components.
• Keep layouts clean and purposeful.
• Avoid unnecessary visual effects.
• Follow the application's existing visual language.

1User:
2"Create a registration form using Neuctra UI."
3
4        ↓
5
6AI searches for relevant components
7
8        ↓
9
10search_components
11
12        ↓
13
14AI finds Input, Checkbox and Button
15
16        ↓
17
18get_component
19
20        ↓
21
22AI checks the exact props and examples
23
24        ↓
25
26get_theme
27
28        ↓
29
30AI checks the correct theme tokens
31
32        ↓
33
34AI generates the React implementation

You don't have to manually paste Neuctra UI documentation into every prompt. The AI can retrieve the information it needs through MCP.

Most users should use the remote MCP server. A local installation is mainly useful when you are developing or testing the MCP package locally.

1npx -y @neuctra/ui-mcp

MCP clients can launch the package automatically, so you normally don't need to install it globally.

Example Local Configuration

1{
2  "mcpServers": {
3    "neuctra-ui": {
4      "command": "npx",
5      "args": ["-y", "@neuctra/ui-mcp"]
6    }
7  }
8}

1npm install
2npm start

An MCP server normally waits for an MCP client to communicate with it. Seeing little or no output in the terminal can therefore be normal.

Local Server Configuration

1{
2  "mcpServers": {
3    "neuctra-ui": {
4      "command": "node",
5      "args": [
6        "/absolute/path/to/neuctra-ui-mcp/bin/cli.mjs"
7      ]
8    }
9  }
10}

Neuctra UI component information is maintained in a structured registry. The MCP server uses this data when responding to AI requests.

1Neuctra UI source
2       │
3       ▼
4Component registry
5       │
6       ▼
7Neuctra UI MCP
8       │
9       ▼
10AI assistant

This allows the AI to query structured component knowledge rather than trying to reverse-engineer the library from scratch.