Skip to main content

​
Project Templates

The create-mcp-use-app tool provides several project templates to help you get started quickly with different types of MCP servers. Each template is optimized for specific use cases and includes pre-configured examples. 
npx create-mcp-use-app@latest my-mcp-server
cd my-mcp-server
npm run dev
To explore available templates and options, run:
npx create-mcp-use-app --help

​
Available Templates

​
🚀 Starter Template (Default)

The starter template is the most comprehensive option, showcasing all MCP features including tools, resources, prompts, and automatic UI widget registration for MCP-UI and OpenAI Apps SDK. What’s Included:
  • Full MCP server setup with all primitive types:
    • Tools: fetch-weather - fetches weather data for any city
    • Resources: config://settings - server configuration example
    • Prompts: review-code - code review prompt template
  • Automatic UI Widget Registration from resources/ folder:
    • display-weather - Weather visualization widget (OpenAI Apps SDK)
    • kanban-board - Task management board (MCP-UI)
  • Hot reload development environment
  • Production build configuration
Best For: Learning all MCP features, full-featured applications, production-ready servers Quick Start: 
npx create-mcp-use-app my-server --template starter
cd my-server
npm run dev
Example Usage: 
// Fetch weather data
const weather = await client.callTool('fetch-weather', { city: 'London' })

// Display it in a beautiful widget
const widget = await client.callTool('display-weather', { 
  city: 'London',
  temperature: '15',
  condition: 'Partly Cloudy'
})

​
⚡ Apps SDK Template

The apps-sdk template demonstrates how to build OpenAI Apps SDK compatible widgets for ChatGPT. What’s Included:
  • Lightweight MCP server setup
  • Automatic UI Widget Registration from resources/ folder:
    • display-weather - Weather visualization widget
  • Simple tool example: get-my-city
  • Minimal configuration for fast development
Best For: Quick prototypes, widget-focused apps, minimal overhead projects Quick Start: 
npx create-mcp-use-app my-server --template apps-sdk
cd my-server
npm run dev
Example Usage: 
// All React components in resources/ folder are automatically registered!
// Just export widgetMetadata and mcp-use handles the rest

const widget = await client.callTool('display-weather', { 
  city: 'San Francisco',
  temperature: '22',
  condition: 'Sunny'
})

​
🎨 MCP-UI Template

The mcp-ui template demonstrates all three MCP-UI UIResource types with examples of each approach. What’s Included:
  • External URL (Iframe Widgets):
    • kanban-board - Complex interactive board served from filesystem
    • Automatic static file serving
    • Full asset support
  • Raw HTML (Direct Rendering):
    • welcome-card - Beautiful glass-morphic welcome card
    • No iframe overhead
    • Perfect for simple visualizations
  • Remote DOM (React Components):
    • quick-poll - Interactive polling widget
    • Uses MCP-UI React components (ui-stack, ui-button, ui-text)
    • Lightweight scripting approach
  • Traditional MCP tools and resources examples
Best For: Understanding all UIResource types, complex UI requirements, MCP-UI specification compliance Quick Start: 
npx create-mcp-use-app my-server --template mcp-ui
cd my-server
npm run dev
Example Usage: 
// External URL - Served via iframe with full interactivity
await client.callTool('kanban-board', {
  initialTasks: [{id: 1, title: 'Task 1'}],
  theme: 'dark'
})

// Raw HTML - Direct rendering, no iframe
await client.readResource('ui://widget/welcome-card')

// Remote DOM - Interactive React components
await client.callTool('quick-poll', {
  question: 'Favorite color?',
  options: ['Red', 'Blue', 'Green']
})

​
Template Comparison

FeatureStarterApps SDKMCP-UI
MCP Tools✅ Examples✅ Minimal✅ Examples
MCP Resources✅ Examples❌✅ Examples
MCP Prompts✅ Examples❌❌
Auto Widget Registration✅✅❌
External URL Widgets✅✅✅ Manual
Raw HTML Widgets❌❌✅
Remote DOM Widgets❌❌✅
ComplexityMediumLowHigh
Best Use CaseProduction appsQuick startLearning MCP-UI

​
Next Steps

  • UI Widgets - Deep dive into automatic UI widget registration
  • Tools - Learn about MCP tools
  • Resources - Understand MCP resources
  • Prompts - Work with prompt templates