A
securityF
licenseA
qualityAn AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Last updated -
4
2,558
3,938
The its-just-ui MCP Server enables AI-powered generation, customization, and documentation of React components directly within Cursor IDE.
Core Capabilities:
Component Generation & Composition: Create individual
its-just-uicomponents with specified props, children, and Tailwind CSS styling, or combine multiple components into structured layouts (vertical, horizontal, grid)Component Discovery: Browse and list available components by categories (form, navigation, data-display)
Theme Configuration: Set up global theme settings including color modes (light, dark, system), custom colors, font families, and border radii
Tailwind Utilities: Generate specific Tailwind CSS utility classes for spacing, colors, typography, layout, and effects
Responsive Layouts: Create responsive designs using Tailwind CSS with support for grid, flexbox, container, sidebar, hero, and card-grid layouts
Form Generation: Build complete forms with various input types, validation, and layout options (single-column, two-column, inline)
Documentation & Accessibility: Retrieve component documentation with usage examples, prop descriptions, and accessibility features including ARIA attributes for compliance
Provides tools for generating, customizing, and documenting React components from the its-just-ui component library, including component generation with props, theme management, and form creation.
Generates Tailwind CSS utility classes and responsive layouts, creates spacing/typography configurations, and provides tools for building responsive design patterns.
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
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 a primary button" | Create any its-just-ui component |
| "Show me all form components" | Browse available components |
| "Create a card grid layout" | Compose multiple components |
Theme & Styling
Tool | Cursor Command Example | Description |
| "Set up dark mode theme" | Configure ThemeProvider |
| "Generate spacing utilities" | Create Tailwind utility classes |
| "Make a responsive grid" | Build responsive layouts |
Forms & Documentation
Tool | Cursor Command Example | Description |
| "Build a contact form" | Generate complete forms |
| "Show Button documentation" | Get component docs |
| "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
Cursor IDE - The AI-first code editor
Troubleshooting
Cursor-Specific Issues
Issue | Solution |
MCP tools not available | 1. Restart Cursor 2. Check
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
Check Cursor Console:
View → Output → MCPCursor MCP Docs: https://cursor-docs.apidog.io/model-context-protocol
Open an issue: https://github.com/its-just-ui/its-just-mcp/issues
Related Resources
Related MCP Servers
- AsecurityFlicenseAqualityAI-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 -32
TailorKit MCPofficial
AsecurityFlicenseAqualityConnects AI assistants to the TailorKit API, enabling them to manage customizable product templates for e-commerce platforms through natural language conversations.Last updated -406- Asecurity-licenseAqualityA powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.Last updated -42,558