Skip to main content
Glama

its-just-ui MCP Server

by its-just-ui
npmGitHub
TypeScript
MIT License
12
2
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

Deploy Server
A
security – no known vulnerabilities
A
license - permissive license
A
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.

  1. 🎯 Why Use This in Cursor?
    1. Table of Contents
      1. 🚀 Quick Start for Cursor
        1. Option 1: NPM Package (Recommended)
        2. Option 2: Local Development
      2. ⚙️ Cursor Configuration
        1. Step 1: Create MCP Configuration
        2. Step 2: Restart Cursor
        3. Step 3: Verify Installation
      3. 🎨 Cursor-Specific Features
        1. Inline Component Generation
        2. Context-Aware Suggestions
        3. Quick Commands in Cursor
      4. 🛠️ Available Tools in Cursor
        1. Component Generation
        2. Theme & Styling
        3. Forms & Documentation
      5. 💡 Cursor Usage Examples
        1. Example 1: Generate a Component
        2. Example 2: Create a Complete Form
        3. Example 3: Configure Theme
      6. 📚 Alternative: Claude Desktop
        1. Development
          1. Linting & Formatting
          2. Testing
        2. Project Structure
          1. Contributing
            1. License
              1. Support
                1. Related Links
                  1. Troubleshooting
                    1. Cursor-Specific Issues
                    2. Common Fixes
                    3. Getting Help

                  Related Resources

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

                  • 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,918

                  View all related MCP servers

                  Appeared in Searches

                  New 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