MCP React Button Generator

A Model Context Protocol (MCP) server that generates professional React button components with design tokens and theming support.

🚀 Quick Start

$3

Add to your MCP configuration:

``json
{
"mcpServers": {
"react-button-generator": {
"command": "npx",
"args": ["-y", "@yasper-ai/mcp-react-button-generator"]
}
}
}
`

That's it! No installation required. The server will run automatically when needed.

📦 Features

- ✅ Multiple Variants: primary, secondary, outline, ghost, danger
- ✅ Size Options: sm, md, lg
- ✅ Theme Support: light, dark, or custom tokens
- ✅ TypeScript: Full type definitions included
- ✅ Design Tokens: CSS custom properties for easy theming
- ✅ Accessibility: ARIA attributes and keyboard navigation built-in

🎯 Usage

Once configured, use prompts like:

`
Create a SubmitButton with primary variant
`

`
Generate a DeleteButton with danger variant and small size
`

`
Make a CancelButton with outline variant and dark theme
`

The tool will generate:
- ComponentName.tsx - React component
- ComponentName.css - Styled with design tokens
- ComponentName.d.ts - TypeScript definitions

🔧 Configuration

$3

1. Open Settings → MCP
2. Click "+ Add new MCP server"
3. Add:
`json
{
"command": "npx",
"args": ["-y", "@yasper-ai/mcp-react-button-generator"]
}
`
4. Restart Cursor

$3

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

Add:
`json
{
"mcpServers": {
"react-button-generator": {
"command": "npx",
"args": ["-y", "@yasper-ai/mcp-react-button-generator"]
}
}
}
`

Restart Claude Desktop.

📖 Tool: create_button

$3

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| name | string | required | Component name in PascalCase (e.g., SubmitButton) |
| variant | enum | primary | Button style: primary, secondary, outline, ghost, danger |
| size | enum | md | Button size: sm, md, lg |
| theme | string | light | Theme name: light or dark |
| customTheme | object | - | Optional custom theme tokens |
| includeTypes | boolean | true | Generate TypeScript definitions |

$3

Returns a JSON object with:
- success: boolean
- message: Status message
- files: Object containing generated files
- component: React .tsx file
- styles: CSS stylesheet
- types: TypeScript definitions (optional)
- metadata: Component metadata
- usage: Example usage code

💡 Examples

$3


`
Create a SubmitButton with variant primary and size md
`

$3

`
Generate a DeleteButton with danger variant and small size
`

$3

`
Make a CancelButton with outline variant and dark theme
`

$3

`
Create a BrandButton with custom theme:
- Primary color: #7C3AED
- Hover color: #6D28D9
`

🛠️ Development

$3

`bash
git clone https://github.com/yasper-ai/mcp-design.git
cd mcp-design
npm install
npm run build
npm start
`

$3

`bash
npm run build
`

$3

`bash
npm publish --access public
``

📄 License

MIT

🔗 Links

- GitHub Repository
- MCP Documentation
- Report Issues

👥 Author

yasper-ai

---

Note: This is an MCP server. It's designed to be used with MCP-compatible clients like Cursor or Claude Desktop, not as a standalone application.