its-just-ui MCP Server

MCP its-just-ui Server for Cursor

A Model Context Protocol (MCP) server optimized for Cursor IDE, enabling AI-powered generation, customization, and documentation of its-just-ui React components directly in your editor.

🎯 Why Use This in Cursor?

Native MCP Support: Cursor has built-in support for MCP servers via stdio
AI-Powered Component Generation: Generate complete its-just-ui components with a simple prompt
Contextual Awareness: The AI understands your project structure and existing code
Zero Configuration: Works out of the box with minimal setup

🚀 Quick Start for Cursor
⚙️ Cursor Configuration
🛠️ Available Tools in Cursor
💡 Cursor Usage Examples
📚 Alternative: Claude Desktop
Development
Troubleshooting
License

🚀 Quick Start for Cursor

Option 1: NPM Package (Recommended)

# Simply add to your Cursor config - no installation needed!
# Cursor will handle everything via npx

Option 2: Local Development

# Clone and build
git clone https://github.com/its-just-ui/its-just-mcp.git
cd its-just-mcp
npm install && npm run build

⚙️ Cursor Configuration

Step 1: Create MCP Configuration

Project-Level (Recommended)

Create .cursor/mcp.json in your React project root:

{
  "mcpServers": {
    "its-just-ui": {
      "command": "npx",
      "args": ["-y", "its-just-mcp"],
      "env": {}
    }
  }
}

Global Configuration (All Projects)

Create ~/.cursor/mcp.json:

{
  "mcpServers": {
    "its-just-ui": {
      "command": "npx",
      "args": ["-y", "its-just-mcp"],
      "env": {}
    }
  }
}

Local Development Setup

If you're developing the MCP server locally:

{
  "mcpServers": {
    "its-just-ui": {
      "command": "node",
      "args": ["/absolute/path/to/its-just-mcp/dist/index.js"],
      "env": {}
    }
  }
}

Step 2: Restart Cursor

After adding the configuration, restart Cursor to load the MCP server.

Step 3: Verify Installation

In Cursor, you can ask the AI:

"What MCP tools are available?"
"Generate a Button component using its-just-ui"

🎨 Cursor-Specific Features

Inline Component Generation

Ask Cursor AI to generate components directly in your code:

"Add a primary button with loading state here"
"Create a card grid layout with 3 columns"
"Generate a login form with validation"

Context-Aware Suggestions

The MCP server understands your project context:

Existing theme configuration
Component usage patterns
Project structure

Quick Commands in Cursor

Generate: ⌘+K → "Generate [component] with [props]"
Document: ⌘+K → "Document this its-just-ui component"
Theme: ⌘+K → "Configure dark theme for its-just-ui"
Form: ⌘+K → "Create a contact form with validation"

🛠️ Available Tools in Cursor

Component Generation

Tool	Cursor Command Example	Description
`generate_component`	"Generate a primary button"	Create any its-just-ui component
`list_components`	"Show me all form components"	Browse available components
`compose_components`	"Create a card grid layout"	Compose multiple components

Theme & Styling

Tool	Cursor Command Example	Description
`configure_theme`	"Set up dark mode theme"	Configure ThemeProvider
`generate_tailwind_classes`	"Generate spacing utilities"	Create Tailwind utility classes
`create_responsive_layout`	"Make a responsive grid"	Build responsive layouts

Forms & Documentation

Tool	Cursor Command Example	Description
`create_form`	"Build a contact form"	Generate complete forms
`get_component_docs`	"Show Button documentation"	Get component docs
`check_accessibility`	"Check Dialog accessibility"	Review ARIA attributes

💡 Cursor Usage Examples

Example 1: Generate a Component

In Cursor, simply type ⌘+K and ask:

"Generate a primary button with loading state"

The AI will use the MCP server to generate:

<Button variant="primary" loading={true}>
  Processing...
</Button>

Example 2: Create a Complete Form

"Create a login form with email and password validation"

Result:

<form onSubmit={handleSubmit}>
  <Input
    type="email"
    name="email"
    label="Email"
    required
    placeholder="Enter your email"
  />
  <Input
    type="password"
    name="password"
    label="Password"
    required
    minLength={8}
  />
  <Button type="submit" variant="primary">
    Login
  </Button>
</form>

Example 3: Configure Theme

"Set up a dark theme with blue primary color"

Result:

<ThemeProvider
  theme={{
    mode: "dark",
    colors: {
      primary: "#3b82f6",
      secondary: "#64748b"
    }
  }}
>
  {children}
</ThemeProvider>

📚 Alternative: Claude Desktop

While this server is optimized for Cursor, it also works with Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "its-just-ui": {
      "command": "npx",
      "args": ["-y", "its-just-mcp"],
      "env": {}
    }
  }
}

Development

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Run tests
npm test

Linting & Formatting

# ESLint
npm run lint

# Prettier
npm run format

Testing

# Jest
npm test

# Watch mode
npm run test:watch

# Coverage
npm run test:coverage

Project Structure

its-just-mcp/
├── src/
│   ├── index.ts              # Main server entry point
│   ├── components/
│   │   └── registry.ts       # Component definitions and metadata
│   └── tools/
│       ├── componentGenerator.ts  # Component generation logic
│       ├── themeManager.ts       # Theme configuration tools
│       ├── utilityTools.ts       # Utility and layout tools
│       └── documentationTools.ts # Documentation and accessibility
├── dist/                      # Compiled output
├── package.json
├── tsconfig.json
└── README.md

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Recommended steps:

Fork the repo and create a feature branch
Add tests for new behavior
Run lint and tests locally
Open a PR with a clear description and examples

License

MIT

Support

For issues or questions, please open an issue on GitHub or contact the maintainers.

Troubleshooting

Cursor-Specific Issues

Issue	Solution
MCP tools not available	1. Restart Cursor2. Check `.cursor/mcp.json` is valid JSON3. Verify the server path is correct
"Command not found: npx"	Install Node.js 18+ and npm
Server not responding	1. Check Cursor Console (View → Output → MCP)2. Try local installation instead of npx
Tools not showing in AI	Ask "What MCP tools are available?" to refresh

Common Fixes

# Verify Node version (needs 18+)
node --version

# For local development, rebuild
cd /path/to/its-just-mcp
npm run build

# Check MCP config is valid JSON
cat .cursor/mcp.json | jq .

# Clear npm cache if npx fails
npm cache clean --force

Getting Help

Check Cursor Console: View → Output → MCP
Cursor MCP Docs: https://cursor-docs.apidog.io/model-context-protocol
Open an issue: https://github.com/its-just-ui/its-just-mcp/issues

Deploy Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

View all tools

Enables AI-powered generation, customization, and documentation of its-just-ui React components. Provides tools for component generation, theme management, form creation, responsive layouts, and accessibility guidance.

Related Resources

Reddit Discussion about this server

Related MCP Servers

Magic Component Platform (MCP)
21st-dev
A
security
F
license
A
quality
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Last updated -
4
3,398
3,445
Magic Component Platform
oyasimi1209
A
security
F
license
A
quality
AI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.
Last updated -
3
2
TailorKit MCPofficial
sellersmith
A
security
F
license
A
quality
Connects AI assistants to the TailorKit API, enabling them to manage customizable product templates for e-commerce platforms through natural language conversations.
Last updated -
4
0
6
21st.dev Magic AI Agent
zackbissell
A
security
F
license
A
quality
A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
Last updated -
4
3,398

View all related MCP servers