UI Component Generator MCP Server

This project implements a Mastra Component Protocol (MCP) server that generates UI components based on natural language queries. The generated components are stored in a Supabase database and displayed in a Jarvis-like HUD interface.

Features

• MCP server for generating UI components
• Integration with SambaNova's Qwen3-32B model for high-quality component generation
• Supabase integration for storing and retrieving generated components
• React frontend with live component preview
• Tailwind CSS styling for modern, responsive UI

Setup

Prerequisites

• Node.js (v18 or higher)
• npm or pnpm
• A SambaNova API key
• A Supabase account with the appropriate tables set up

Environment Variables

Create a .env file with the following variables:

VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# MCP Server Configuration
PORT=3001

# SambaNova API Configuration
SAMBANOVA_API_KEY=your_sambanova_api_key

# Default API Key ID for testing
DEFAULT_API_KEY_ID=your_default_api_key_id

Installation

1. Install dependencies:

npm install

2. Start the MCP server:

npm run mcp:start

3. Start the frontend development server:

npm run dev

Usage

Generating UI Components

1. Click the wand icon in the header to open the UI Component Generator dialog
2. Enter a description of the UI component you want to generate
3. Enter your SambaNova API key
4. Click "Generate Component"
5. The generated component will be saved to the database and displayed in the HUD

Example Queries

• "A weather widget showing temperature, conditions, and location"
• "A data visualization chart showing weekly performance metrics"
• "A calendar widget displaying today's events and meetings"
• "A stock price tracker with current price and daily change"
• "A task list with completion status and priority indicators"

Architecture

MCP Server

The MCP server is built using Mastra's MCP framework and exposes a tool for generating UI components. It uses the SambaNova API to generate high-quality React components with Tailwind CSS styling.

Frontend

The frontend is built with React and Vite, using Tailwind CSS for styling. It includes a live component preview using react-live, which allows the generated components to be rendered in real-time.

Database

The project uses Supabase for storing and retrieving generated components. The database schema includes tables for API keys and screens (generated components).

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.