MCP UI Studio

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

Template Gallery

Choose from pre-built MCP-UI components to get started

Dashboards (2)

External Dashboard

External URL

Embed external analytics or monitoring dashboard

{ type: 'externalUrl', iframeUrl: 'https://example.com/analytics', }...

Admin Dashboard

HTML

Complete admin dashboard with navigation and widgets

<div class="admin-dashboard"> <aside>Navigation</aside> <main> <div class="stats-grid">...</...

Forms (3)

Contact Form

HTML

A professional contact form with validation

<form id="contactForm"> <h1>Contact Us</h1> <input type="text" placeholder="Name" required> <i...

Login Form

HTML

Simple login form with email and password

<form id="loginForm"> <h1>Welcome Back</h1> <input type="email" placeholder="you@example.com" re...

Remote DOM Button

Remote DOM

Interactive button using Remote DOM with host component library

const button = document.createElement('ui-button'); button.setAttribute('label', 'Click me!'); butto...

Tables (2)

Data Table

HTML

Interactive data table with sorting and row selection

<table class="w-full"> <thead> <tr><th>Name</th><th>Email</th><th>Role</th></tr> </thead> ...

Pricing Table

HTML

Pricing comparison table with feature lists

<div class="pricing-card"> <h3>Professional</h3> <div class="price">$29/mo</div> <ul> <li>...

Cards (2)

Product Cards

HTML

E-commerce product cards with images and actions

<div class="product-card"> <img src="..." alt="Product"> <h3>Wireless Headphones</h3> <div cla...

Statistics Cards

HTML

Dashboard statistics cards with icons and trends

<div class="stats-card"> <div class="icon">💰</div> <h3>Total Revenue</h3> <p class="value">$4...

Charts (2)

Sales Chart

HTML

Interactive sales data visualization with Chart.js

<canvas id="salesChart"></canvas> <script> new Chart(ctx, { type: 'line', data: { labels: ...

Analytics Dashboard

HTML

Comprehensive dashboard with multiple chart types

<div class="dashboard"> <canvas id="pieChart"></canvas> <canvas id="barChart"></canvas> <canva...

ChatGPT SDK (5)

Todo List Widget

HTML

Task management widget with add, complete, and delete functionality

// Todo widget with state management const [tasks, setTasks] = useState([]); function addTask(text)...

Interactive Button

HTML

Simple button widget demonstrating tool calls

<button onclick="handleClick()"> Click Me! </button> <script> function handleClick() { window.p...

Input Field Widget

HTML

Text input with validation and submission

<input id="username" placeholder="Enter username"> <input type="email" id="email" placeholder="Email...

Selection List

HTML

Scrollable list with single or multiple selection

// Selection list with single/multiple mode const items = [...]; let selected = new Set(); function...

Image Carousel

HTML

Swipeable image carousel with navigation

// Carousel with navigation let currentSlide = 0; function nextSlide() { currentSlide = (currentS...

Remote DOM (6)

Remote DOM Card

Remote DOM

Interactive card component using Remote DOM with Tailwind-style classes

const card = document.createElement('ui-card'); const button = document.createElement('ui-button'); ...

Remote DOM Form

Remote DOM

Form with input fields built using Remote DOM

const nameInput = document.createElement('ui-input'); nameInput.setAttribute('placeholder', 'Your na...

Remote DOM List

Remote DOM

Dynamic list with clickable items using Remote DOM

const items = [...]; items.forEach(item => { const listItem = document.createElement('ui-list-item...

Remote DOM Grid

Remote DOM

Grid layout with cards using Remote DOM components

const grid = document.createElement('ui-grid'); grid.setAttribute('columns', '3'); products.forEach...

Remote DOM Tabs

Remote DOM

Tabbed interface using Remote DOM components

const tabs = document.createElement('ui-tabs'); const tab1 = document.createElement('ui-tab-panel')...

Remote DOM Modal

Remote DOM

Modal dialog with Remote DOM components

const openButton = document.createElement('ui-button'); openButton.setAttribute('label', 'Open Modal...