MCP UI Studio

Visual development environment for MCP-UI interfaces, ChatGPT Apps and MCP Apps

🚀 Live Demo

Build production-ready MCP-UI handlers visually, test interactively, and export instantly.

Features

🎨 Template Gallery

Browse and select from pre-built component templates including:

• Forms: Contact forms, login forms
• Tables: Interactive data tables with sorting and filtering
• Cards: Card galleries with images and actions
• Charts: Analytics charts and metrics

👁️ Live Sandboxed Preview

• Real-time component rendering
• Interactive testing environment
• Split-pane view with preview and code
• Responsive layout testing

💻 Monaco Editor Integration

• Professional code editing experience
• Syntax highlighting for TypeScript, Python, and Ruby
• Code structure visualization
• JSON schema validation

🚀 Multi-Language Export

Export your MCP-UI components in three languages:

• TypeScript: For Node.js and Deno MCP servers
• Python: For Python-based MCP servers
• Ruby: For Ruby-based MCP servers

🌉 Framework Bridge

Convert between different UI frameworks:

• Shadcn UI → MCP-UI conversion (coming soon)
• Component structure transformation
• Props mapping and translation

🎯 Visual Component Builder

• Component tree structure
• Property editor panel
• Component palette with MCP-UI widgets
• Drag-and-drop interface (coming soon)

Tech Stack

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first styling
• shadcn/ui - High-quality UI components
• Monaco Editor - VS Code's editor
• Lucide React - Beautiful icons

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/d-barletta/mcp-ui-studio.git
cd mcp-ui-studio

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 to see the application.

Building for Production

# Create an optimized production build
npm run build

# Start the production server
npm start

Usage

1. Browse Templates

Start by exploring the template gallery on the home page. Click any template card to open it in the studio.

2. View Live Preview

See your component rendered in real-time with interactive controls. The preview updates instantly as you make changes.

3. Edit Component Structure

Switch to the Code Editor tab to modify the MCP-UI component structure using the integrated Monaco editor.

4. Export Code

Navigate to the Export tab to:

• Choose your target language (TypeScript, Python, or Ruby)
• Copy the generated code
• Download the handler file

5. Integrate with Your MCP Server

Take the exported code and integrate it directly into your MCP server implementation.

Development

• Very initial phase for now

Roadmap

• Real-time collaborative editing
• Component versioning and history
• Template marketplace
• Advanced drag-and-drop builder
• Component testing framework
• Integration with popular MCP servers
• Theme customization
• Import from existing code
• Component library management

Contributing

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

License

MIT License - see LICENSE file for details.

Acknowledgments

• Built with Next.js
• UI components from shadcn/ui
• Icons from Lucide
• Editor powered by Monaco Editor