Skip to main content
Glama

its-just-ui MCP Server

by its-just-ui

MCP its-just-ui Server for Cursor

npm version npm downloads license Cursor Compatible MCP SDK

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

Table of Contents

  • 🚀 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.

Related Links

Troubleshooting

Cursor-Specific Issues

Issue

Solution

MCP tools not available

1. Restart Cursor

2. Check

.cursor/mcp.json

is valid JSON

3. 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

Related MCP Servers

  • 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,918
    3,681
    • Linux
    • Apple
  • 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
  • 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
  • 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,918

View all related MCP servers

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/its-just-ui/its-just-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server