create-mcp-use-app 0.3.3 → 0.3.5

package/dist/index.js

@@ -155,8 +155,15 @@ async function copyTemplate(projectPath, template, versions, isDevelopment = fal
   const templatePath = join(__dirname, "templates", template);
   if (!existsSync(templatePath)) {
     console.error(`\u274C Template "${template}" not found!`);
-    console.log("Available templates: basic, filesystem, api, ui");
+    const templatesDir = join(__dirname, "templates");
+    if (existsSync(templatesDir)) {
+      const availableTemplates = readdirSync(templatesDir, { withFileTypes: true }).filter((dirent) => dirent.isDirectory()).map((dirent) => dirent.name).sort();
+      console.log(`Available templates: ${availableTemplates.join(", ")}`);
+    } else {
+      console.log("No templates directory found");
+    }
     console.log('\u{1F4A1} Tip: Use "ui" template for React components and modern UI features');
+    console.log('\u{1F4A1} Tip: Use "uiresource" template for UI resources and advanced server examples');
     process.exit(1);
   }
   copyDirectoryWithProcessing(templatePath, projectPath, versions, isDevelopment);

package/dist/templates/uiresource/README.md

@@ -0,0 +1,376 @@
+# UIResource MCP Server
+
+An MCP server with the new UIResource integration for simplified widget management and MCP-UI compatibility.
+
+## Features
+
+- **🚀 UIResource Method**: Single method to register both tools and resources
+- **🎨 React Widgets**: Interactive UI components built with React
+- **🔄 Automatic Registration**: Tools and resources created automatically
+- **📦 Props to Parameters**: Widget props automatically become tool parameters
+- **🌐 MCP-UI Compatible**: Full compatibility with MCP-UI clients
+- **🛠️ TypeScript Support**: Complete type safety and IntelliSense
+
+## What's New: UIResource
+
+The `uiResource` method is a powerful new addition that simplifies widget registration:
+
+```typescript
+// Old way: Manual registration of tool and resource
+server.tool({ /* tool config */ })
+server.resource({ /* resource config */ })
+
+// New way: Single method does both!
+server.uiResource({
+  name: 'kanban-board',
+  widget: 'kanban-board',
+  title: 'Kanban Board',
+  props: {
+    initialTasks: { type: 'array', required: false },
+    theme: { type: 'string', default: 'light' }
+  }
+})
+```
+
+This automatically creates:
+- **Tool**: `ui_kanban-board` - Accepts parameters and returns UIResource
+- **Resource**: `ui://widget/kanban-board` - Static access with defaults
+
+## Getting Started
+
+### Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server with hot reloading
+npm run dev
+```
+
+This will start:
+- MCP server on port 3000
+- Widget serving at `/mcp-use/widgets/*`
+- Inspector UI at `/inspector`
+
+### Production
+
+```bash
+# Build the server and widgets
+npm run build
+
+# Run the built server
+npm start
+```
+
+## Basic Usage
+
+### Simple Widget Registration
+
+```typescript
+import { createMCPServer } from 'mcp-use/server'
+
+const server = createMCPServer('my-server', {
+  version: '1.0.0',
+  description: 'Server with UIResource widgets'
+})
+
+// Register a widget - creates both tool and resource
+server.uiResource({
+  name: 'my-widget',
+  widget: 'my-widget',
+  title: 'My Widget',
+  description: 'An interactive widget'
+})
+
+server.listen(3000)
+```
+
+### Widget with Props
+
+```typescript
+server.uiResource({
+  name: 'data-chart',
+  widget: 'chart',
+  title: 'Data Chart',
+  description: 'Interactive data visualization',
+  props: {
+    data: {
+      type: 'array',
+      description: 'Data points to display',
+      required: true
+    },
+    chartType: {
+      type: 'string',
+      description: 'Type of chart (line/bar/pie)',
+      default: 'line'
+    },
+    theme: {
+      type: 'string',
+      description: 'Visual theme',
+      default: 'light'
+    }
+  },
+  size: ['800px', '400px'], // Preferred iframe size
+  annotations: {
+    audience: ['user', 'assistant'],
+    priority: 0.8
+  }
+})
+```
+
+## Widget Development
+
+### 1. Create Your Widget Component
+
+```typescript
+// resources/my-widget.tsx
+import React, { useState, useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+
+interface MyWidgetProps {
+  initialData?: any
+  theme?: 'light' | 'dark'
+}
+
+const MyWidget: React.FC<MyWidgetProps> = ({
+  initialData = [],
+  theme = 'light'
+}) => {
+  const [data, setData] = useState(initialData)
+
+  // Load props from URL query parameters
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search)
+
+    const dataParam = params.get('initialData')
+    if (dataParam) {
+      try {
+        setData(JSON.parse(dataParam))
+      } catch (e) {
+        console.error('Error parsing data:', e)
+      }
+    }
+
+    const themeParam = params.get('theme')
+    if (themeParam) {
+      // Apply theme
+    }
+  }, [])
+
+  return (
+    <div className={`widget theme-${theme}`}>
+      {/* Your widget UI */}
+    </div>
+  )
+}
+
+// Mount the widget
+const container = document.getElementById('widget-root')
+if (container) {
+  createRoot(container).render(<MyWidget />)
+}
+```
+
+### 2. Register with UIResource
+
+```typescript
+// src/server.ts
+server.uiResource({
+  name: 'my-widget',
+  widget: 'my-widget',
+  title: 'My Custom Widget',
+  description: 'A custom interactive widget',
+  props: {
+    initialData: {
+      type: 'array',
+      description: 'Initial data for the widget',
+      required: false
+    },
+    theme: {
+      type: 'string',
+      description: 'Widget theme',
+      default: 'light'
+    }
+  },
+  size: ['600px', '400px']
+})
+```
+
+## How It Works
+
+### Tool Registration
+When you call `uiResource`, it automatically creates a tool:
+- Name: `ui_[widget-name]`
+- Accepts all props as parameters
+- Returns both text description and UIResource object
+
+### Resource Registration
+Also creates a resource:
+- URI: `ui://widget/[widget-name]`
+- Returns UIResource with default prop values
+- Discoverable by MCP clients
+
+### Parameter Passing
+Tool parameters are automatically:
+1. Converted to URL query parameters
+2. Complex objects are JSON-stringified
+3. Passed to widget via iframe URL
+
+## Advanced Examples
+
+### Multiple Widgets
+
+```typescript
+const widgets = [
+  {
+    name: 'todo-list',
+    widget: 'todo-list',
+    title: 'Todo List',
+    props: {
+      items: { type: 'array', default: [] }
+    }
+  },
+  {
+    name: 'calendar',
+    widget: 'calendar',
+    title: 'Calendar',
+    props: {
+      date: { type: 'string', required: false }
+    }
+  }
+]
+
+// Register all widgets
+widgets.forEach(widget => server.uiResource(widget))
+```
+
+### Mixed Registration
+
+```typescript
+// UIResource for widgets
+server.uiResource({
+  name: 'dashboard',
+  widget: 'dashboard',
+  title: 'Analytics Dashboard'
+})
+
+// Traditional tool for actions
+server.tool({
+  name: 'calculate',
+  description: 'Perform calculations',
+  fn: async (params) => { /* ... */ }
+})
+
+// Traditional resource for data
+server.resource({
+  name: 'config',
+  uri: 'config://app',
+  mimeType: 'application/json',
+  fn: async () => { /* ... */ }
+})
+```
+
+## API Reference
+
+### `server.uiResource(definition)`
+
+#### Parameters
+
+- `definition: UIResourceDefinition`
+  - `name: string` - Resource identifier
+  - `widget: string` - Widget directory name
+  - `title?: string` - Human-readable title
+  - `description?: string` - Widget description
+  - `props?: WidgetProps` - Widget properties configuration
+  - `size?: [string, string]` - Preferred iframe size
+  - `annotations?: ResourceAnnotations` - Discovery hints
+
+#### WidgetProps
+
+Each prop can have:
+- `type: 'string' | 'number' | 'boolean' | 'object' | 'array'`
+- `required?: boolean` - Whether the prop is required
+- `default?: any` - Default value if not provided
+- `description?: string` - Prop description
+
+## Testing Your Widgets
+
+### Via Inspector UI
+1. Start the server: `npm run dev`
+2. Open: `http://localhost:3000/inspector`
+3. Test tools and resources
+
+### Direct Browser Access
+Visit: `http://localhost:3000/mcp-use/widgets/[widget-name]`
+
+### Via MCP Client
+```typescript
+// Call as tool
+const result = await client.callTool('ui_kanban-board', {
+  initialTasks: [...],
+  theme: 'dark'
+})
+
+// Access as resource
+const resource = await client.readResource('ui://widget/kanban-board')
+```
+
+## Benefits of UIResource
+
+✅ **Simplified API** - One method instead of two
+✅ **Automatic Wiring** - Props become tool inputs automatically
+✅ **Type Safety** - Full TypeScript support
+✅ **MCP-UI Compatible** - Works with all MCP-UI clients
+✅ **DRY Principle** - No duplicate UIResource creation
+✅ **Discoverable** - Both tools and resources are listed
+
+## Troubleshooting
+
+### Widget Not Loading
+- Ensure widget exists in `dist/resources/mcp-use/widgets/`
+- Check server console for errors
+- Verify widget is registered with `uiResource()`
+
+### Props Not Passed
+- Check URL parameters in browser DevTools
+- Ensure prop names match exactly
+- Complex objects must be JSON-stringified
+
+### Type Errors
+- Import types: `import type { UIResourceDefinition } from 'mcp-use/server'`
+- Ensure mcp-use is updated to latest version
+
+## Migration from Old Pattern
+
+If you have existing code using separate tool/resource:
+
+```typescript
+// Old pattern
+server.tool({ name: 'show-widget', /* ... */ })
+server.resource({ uri: 'ui://widget', /* ... */ })
+
+// New pattern - replace both with:
+server.uiResource({
+  name: 'widget',
+  widget: 'widget',
+  // ... consolidated configuration
+})
+```
+
+## Future Enhancements
+
+Coming soon:
+- Automatic widget discovery from filesystem
+- Widget manifests (widget.json)
+- Prop extraction from TypeScript interfaces
+- Build-time optimization
+
+## Learn More
+
+- [MCP Documentation](https://modelcontextprotocol.io)
+- [MCP-UI Documentation](https://github.com/idosal/mcp-ui)
+- [mcp-use Documentation](https://github.com/pyroprompt/mcp-use)
+- [React Documentation](https://react.dev/)
+
+Happy widget building! 🚀

package/dist/templates/uiresource/index.ts

@@ -0,0 +1,12 @@
+/**
+ * MCP Server Entry Point
+ * 
+ * This file serves as the main entry point for the MCP server application.
+ * It re-exports all functionality from the server implementation, allowing
+ * the CLI and other tools to locate and start the server.
+ * 
+ * The server is automatically started when this module is imported, making
+ * it suitable for both direct execution and programmatic usage.
+ */
+export * from './src/server.js'
+

package/dist/templates/uiresource/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "mcp-uiresource-server",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "MCP server with UIResource widget integration",
+  "author": "",
+  "license": "MIT",
+  "keywords": [
+    "mcp",
+    "server",
+    "uiresource",
+    "ui",
+    "react",
+    "widgets",
+    "ai",
+    "tools",
+    "mcp-ui"
+  ],
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "mcp-use build",
+    "dev": "mcp-use dev",
+    "start": "mcp-use start"
+  },
+  "dependencies": {
+    "@mcp-ui/server": "^5.11.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.0",
+    "mcp-use": "workspace:*"
+  },
+  "devDependencies": {
+    "@mcp-use/cli": "workspace:*",
+    "@mcp-use/inspector": "workspace:*",
+    "@types/cors": "^2.8.0",
+    "@types/express": "^4.17.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "concurrently": "^8.0.0",
+    "esbuild": "^0.23.0",
+    "globby": "^14.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/dist/templates/uiresource/resources/kanban-board.tsx

@@ -0,0 +1,306 @@
+import React, { useEffect, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+
+interface Task {
+  id: string
+  title: string
+  description: string
+  status: 'todo' | 'in-progress' | 'done'
+  priority: 'low' | 'medium' | 'high'
+  assignee?: string
+}
+
+interface KanbanBoardProps {
+  initialTasks?: Task[]
+}
+
+const KanbanBoard: React.FC<KanbanBoardProps> = ({ initialTasks = [] }) => {
+  const [tasks, setTasks] = useState<Task[]>(initialTasks)
+  const [newTask, setNewTask] = useState({ title: '', description: '', priority: 'medium' as Task['priority'] })
+
+  // Load tasks from URL parameters or use defaults
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const tasksParam = urlParams.get('tasks')
+
+    if (tasksParam) {
+      try {
+        const parsedTasks = JSON.parse(decodeURIComponent(tasksParam))
+        setTasks(parsedTasks)
+      }
+      catch (error) {
+        console.error('Error parsing tasks from URL:', error)
+      }
+    }
+    else {
+      // Default tasks for demo
+      setTasks([
+        { id: '1', title: 'Design UI mockups', description: 'Create wireframes for the new dashboard', status: 'todo', priority: 'high', assignee: 'Alice' },
+        { id: '2', title: 'Implement authentication', description: 'Add login and registration functionality', status: 'in-progress', priority: 'high', assignee: 'Bob' },
+        { id: '3', title: 'Write documentation', description: 'Document the API endpoints', status: 'done', priority: 'medium', assignee: 'Charlie' },
+        { id: '4', title: 'Setup CI/CD', description: 'Configure automated testing and deployment', status: 'todo', priority: 'medium' },
+        { id: '5', title: 'Code review', description: 'Review pull requests from the team', status: 'in-progress', priority: 'low', assignee: 'David' },
+      ])
+    }
+  }, [])
+
+  const addTask = () => {
+    if (newTask.title.trim()) {
+      const task: Task = {
+        id: Date.now().toString(),
+        title: newTask.title,
+        description: newTask.description,
+        status: 'todo',
+        priority: newTask.priority,
+      }
+      setTasks([...tasks, task])
+      setNewTask({ title: '', description: '', priority: 'medium' })
+    }
+  }
+
+  const moveTask = (taskId: string, newStatus: Task['status']) => {
+    setTasks(tasks.map(task =>
+      task.id === taskId ? { ...task, status: newStatus } : task,
+    ))
+  }
+
+  const deleteTask = (taskId: string) => {
+    setTasks(tasks.filter(task => task.id !== taskId))
+  }
+
+  const getTasksByStatus = (status: Task['status']) => {
+    return tasks.filter(task => task.status === status)
+  }
+
+  const getPriorityColor = (priority: Task['priority']) => {
+    switch (priority) {
+      case 'high': return '#ff4757'
+      case 'medium': return '#ffa502'
+      case 'low': return '#2ed573'
+      default: return '#57606f'
+    }
+  }
+
+  const columns = [
+    { id: 'todo', title: 'To Do', color: '#57606f' },
+    { id: 'in-progress', title: 'In Progress', color: '#ffa502' },
+    { id: 'done', title: 'Done', color: '#2ed573' },
+  ] as const
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '30px' }}>
+        <h1 style={{ margin: '0 0 20px 0', color: '#2c3e50' }}>Kanban Board</h1>
+
+        {/* Add new task form */}
+        <div style={{
+          background: 'white',
+          padding: '20px',
+          borderRadius: '8px',
+          boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          marginBottom: '20px',
+        }}
+        >
+          <h3 style={{ margin: '0 0 15px 0' }}>Add New Task</h3>
+          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+            <input
+              type="text"
+              placeholder="Task title"
+              value={newTask.title}
+              onChange={e => setNewTask({ ...newTask, title: e.target.value })}
+              style={{
+                padding: '8px 12px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                flex: '1',
+                minWidth: '200px',
+              }}
+            />
+            <input
+              type="text"
+              placeholder="Description"
+              value={newTask.description}
+              onChange={e => setNewTask({ ...newTask, description: e.target.value })}
+              style={{
+                padding: '8px 12px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                flex: '1',
+                minWidth: '200px',
+              }}
+            />
+            <select
+              title="Priority"
+              value={newTask.priority}
+              onChange={e => setNewTask({ ...newTask, priority: e.target.value as Task['priority'] })}
+              style={{
+                padding: '8px 12px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+              }}
+            >
+              <option value="low">Low Priority</option>
+              <option value="medium">Medium Priority</option>
+              <option value="high">High Priority</option>
+            </select>
+            <button
+              onClick={addTask}
+              style={{
+                padding: '8px 16px',
+                background: '#3498db',
+                color: 'white',
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
+              }}
+            >
+              Add Task
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Kanban columns */}
+      <div style={{ display: 'flex', gap: '20px', overflowX: 'auto' }}>
+        {columns.map(column => (
+          <div
+            key={column.id}
+            style={{
+              flex: '1',
+              minWidth: '300px',
+              background: 'white',
+              borderRadius: '8px',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                background: column.color,
+                color: 'white',
+                padding: '15px 20px',
+                fontWeight: 'bold',
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}
+            >
+              <span>{column.title}</span>
+              <span style={{
+                background: 'rgba(255,255,255,0.2)',
+                padding: '4px 8px',
+                borderRadius: '12px',
+                fontSize: '12px',
+              }}
+              >
+                {getTasksByStatus(column.id).length}
+              </span>
+            </div>
+
+            <div style={{ padding: '20px', minHeight: '400px' }}>
+              {getTasksByStatus(column.id).map(task => (
+                <div
+                  key={task.id}
+                  style={{
+                    background: '#f8f9fa',
+                    border: '1px solid #e9ecef',
+                    borderRadius: '6px',
+                    padding: '15px',
+                    marginBottom: '10px',
+                    cursor: 'grab',
+                  }}
+                  draggable
+                  onDragStart={(e) => {
+                    e.dataTransfer.setData('text/plain', task.id)
+                  }}
+                  onDragOver={e => e.preventDefault()}
+                  onDrop={(e) => {
+                    e.preventDefault()
+                    const taskId = e.dataTransfer.getData('text/plain')
+                    if (taskId === task.id) {
+                      // Move to next column
+                      const currentIndex = columns.findIndex(col => col.id === column.id)
+                      const nextColumn = columns[currentIndex + 1]
+                      if (nextColumn) {
+                        moveTask(taskId, nextColumn.id)
+                      }
+                    }
+                  }}
+                >
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '8px' }}>
+                    <h4 style={{ margin: '0', color: '#2c3e50' }}>{task.title}</h4>
+                    <button
+                      onClick={() => deleteTask(task.id)}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        color: '#e74c3c',
+                        cursor: 'pointer',
+                        fontSize: '16px',
+                      }}
+                    >
+                      ×
+                    </button>
+                  </div>
+
+                  {task.description && (
+                    <p style={{ margin: '0 0 10px 0', color: '#6c757d', fontSize: '14px' }}>
+                      {task.description}
+                    </p>
+                  )}
+
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div
+                      style={{
+                        background: getPriorityColor(task.priority),
+                        color: 'white',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        fontSize: '12px',
+                        fontWeight: 'bold',
+                      }}
+                    >
+                      {task.priority.toUpperCase()}
+                    </div>
+
+                    {task.assignee && (
+                      <span style={{
+                        background: '#e9ecef',
+                        padding: '2px 8px',
+                        borderRadius: '12px',
+                        fontSize: '12px',
+                        color: '#495057',
+                      }}
+                      >
+                        {task.assignee}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+
+              {getTasksByStatus(column.id).length === 0 && (
+                <div style={{
+                  textAlign: 'center',
+                  color: '#6c757d',
+                  padding: '40px 20px',
+                  fontStyle: 'italic',
+                }}
+                >
+                  No tasks in this column
+                </div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// Mount the component
+const container = document.getElementById('widget-root')
+if (container) {
+  const root = createRoot(container)
+  root.render(<KanbanBoard />)
+}

package/dist/templates/uiresource/src/server.ts

@@ -0,0 +1,425 @@
+import { createMCPServer } from 'mcp-use/server'
+import type {
+  ExternalUrlUIResource,
+  RawHtmlUIResource,
+  RemoteDomUIResource
+} from 'mcp-use/server'
+
+// Create an MCP server with UIResource support
+const server = createMCPServer('uiresource-mcp-server', {
+  version: '1.0.0',
+  description: 'MCP server demonstrating all UIResource types',
+})
+
+const PORT = process.env.PORT || 3000
+
+/**
+ * ════════════════════════════════════════════════════════════════════
+ * Type 1: External URL (Iframe Widget)
+ * ════════════════════════════════════════════════════════════════════
+ *
+ * Serves a widget from your local filesystem via iframe.
+ * Best for: Complex interactive widgets with their own assets
+ *
+ * This automatically:
+ * 1. Creates a tool (ui_kanban-board) that accepts parameters
+ * 2. Creates a resource (ui://widget/kanban-board) for static access
+ * 3. Serves the widget from dist/resources/mcp-use/widgets/kanban-board/
+ */
+server.uiResource({
+  type: 'externalUrl',
+  name: 'kanban-board',
+  widget: 'kanban-board',
+  title: 'Kanban Board',
+  description: 'Interactive task management board with drag-and-drop support',
+  props: {
+    initialTasks: {
+      type: 'array',
+      description: 'Initial tasks to display on the board',
+      required: false,
+    },
+    theme: {
+      type: 'string',
+      description: 'Visual theme for the board (light/dark)',
+      required: false,
+      default: 'light'
+    },
+    columns: {
+      type: 'array',
+      description: 'Column configuration for the board',
+      required: false,
+    }
+  }
+} satisfies ExternalUrlUIResource)
+
+/**
+ * ════════════════════════════════════════════════════════════════════
+ * Type 2: Raw HTML
+ * ════════════════════════════════════════════════════════════════════
+ *
+ * Renders HTML content directly without an iframe.
+ * Best for: Simple visualizations, status displays, formatted text
+ *
+ * This creates:
+ * - Tool: ui_welcome-card
+ * - Resource: ui://widget/welcome-card
+ */
+server.uiResource({
+  type: 'rawHtml',
+  name: 'welcome-card',
+  title: 'Welcome Message',
+  description: 'A welcoming card with server information',
+  htmlContent: `
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="UTF-8">
+      <style>
+        body {
+          margin: 0;
+          padding: 20px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          color: white;
+        }
+        .card {
+          background: rgba(255, 255, 255, 0.1);
+          backdrop-filter: blur(10px);
+          border-radius: 16px;
+          padding: 30px;
+          box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+          border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        h1 {
+          margin: 0 0 10px 0;
+          font-size: 2em;
+        }
+        p {
+          margin: 10px 0;
+          opacity: 0.9;
+        }
+        .stats {
+          display: flex;
+          gap: 20px;
+          margin-top: 20px;
+        }
+        .stat {
+          background: rgba(255, 255, 255, 0.1);
+          padding: 15px;
+          border-radius: 8px;
+          flex: 1;
+        }
+        .stat-value {
+          font-size: 1.5em;
+          font-weight: bold;
+        }
+        .stat-label {
+          font-size: 0.9em;
+          opacity: 0.8;
+        }
+      </style>
+    </head>
+    <body>
+      <div class="card">
+        <h1>🎉 Welcome to MCP-UI</h1>
+        <p>Your server is running and ready to serve interactive widgets!</p>
+
+        <div class="stats">
+          <div class="stat">
+            <div class="stat-value">3</div>
+            <div class="stat-label">Widget Types</div>
+          </div>
+          <div class="stat">
+            <div class="stat-value">∞</div>
+            <div class="stat-label">Possibilities</div>
+          </div>
+          <div class="stat">
+            <div class="stat-value">⚡</div>
+            <div class="stat-label">Fast & Simple</div>
+          </div>
+        </div>
+
+        <p style="margin-top: 20px; font-size: 0.9em;">
+          Server: <strong>uiresource-mcp-server v1.0.0</strong><br>
+          Port: <strong>${PORT}</strong>
+        </p>
+      </div>
+    </body>
+    </html>
+  `,
+  encoding: 'text',
+  size: ['600px', '400px']
+} satisfies RawHtmlUIResource)
+
+/**
+ * ════════════════════════════════════════════════════════════════════
+ * Type 3: Remote DOM (React Components)
+ * ════════════════════════════════════════════════════════════════════
+ *
+ * Uses Remote DOM to render interactive components.
+ * Best for: Lightweight interactive UIs using MCP-UI React components
+ *
+ * This creates:
+ * - Tool: ui_quick-poll
+ * - Resource: ui://widget/quick-poll
+ */
+server.uiResource({
+  type: 'remoteDom',
+  name: 'quick-poll',
+  title: 'Quick Poll',
+  description: 'Create instant polls with interactive voting',
+  script: `
+// Remote DOM script for quick-poll widget
+// Note: Remote DOM only supports registered MCP-UI components like ui-stack, ui-text, ui-button
+// Standard HTML elements (div, h2, p, etc.) are NOT available
+
+// Get props (passed from tool parameters)
+const props = ${JSON.stringify({ question: 'What is your favorite framework?', options: ['React', 'Vue', 'Svelte', 'Angular'] })};
+
+// Create main container stack (vertical layout)
+const container = document.createElement('ui-stack');
+container.setAttribute('direction', 'column');
+container.setAttribute('spacing', 'medium');
+container.setAttribute('padding', 'large');
+
+// Title text
+const title = document.createElement('ui-text');
+title.setAttribute('size', 'xlarge');
+title.setAttribute('weight', 'bold');
+title.textContent = '📊 Quick Poll';
+container.appendChild(title);
+
+// Description text
+const description = document.createElement('ui-text');
+description.textContent = 'Cast your vote below!';
+container.appendChild(description);
+
+// Question text
+const questionText = document.createElement('ui-text');
+questionText.setAttribute('size', 'large');
+questionText.setAttribute('weight', 'semibold');
+questionText.textContent = props.question || 'What is your preference?';
+container.appendChild(questionText);
+
+// Button stack (horizontal layout)
+const buttonStack = document.createElement('ui-stack');
+buttonStack.setAttribute('direction', 'row');
+buttonStack.setAttribute('spacing', 'small');
+buttonStack.setAttribute('wrap', 'true');
+
+// Create vote tracking
+const votes = {};
+let feedbackText = null;
+
+// Create buttons for each option
+const options = props.options || ['Option 1', 'Option 2', 'Option 3'];
+options.forEach((option) => {
+  const button = document.createElement('ui-button');
+  button.setAttribute('label', option);
+  button.setAttribute('variant', 'secondary');
+
+  button.addEventListener('press', () => {
+    // Record vote
+    votes[option] = (votes[option] || 0) + 1;
+
+    // Send vote to parent (for tracking)
+    window.parent.postMessage({
+      type: 'tool',
+      payload: {
+        toolName: 'record_vote',
+        params: {
+          question: props.question,
+          selected: option,
+          votes: votes
+        }
+      }
+    }, '*');
+
+    // Update or create feedback text
+    if (feedbackText) {
+      feedbackText.textContent = \`✓ Voted for \${option}! (Total votes: \${votes[option]})\`;
+    } else {
+      feedbackText = document.createElement('ui-text');
+      feedbackText.setAttribute('emphasis', 'high');
+      feedbackText.textContent = \`✓ Voted for \${option}!\`;
+      container.appendChild(feedbackText);
+    }
+  });
+
+  buttonStack.appendChild(button);
+});
+
+container.appendChild(buttonStack);
+
+// Results section
+const resultsTitle = document.createElement('ui-text');
+resultsTitle.setAttribute('size', 'medium');
+resultsTitle.setAttribute('weight', 'semibold');
+resultsTitle.textContent = 'Vote to see results!';
+container.appendChild(resultsTitle);
+
+// Append to root
+root.appendChild(container);
+  `,
+  framework: 'react',
+  encoding: 'text',
+  size: ['500px', '450px'],
+  props: {
+    question: {
+      type: 'string',
+      description: 'The poll question',
+      default: 'What is your favorite framework?'
+    },
+    options: {
+      type: 'array',
+      description: 'Poll options',
+      default: ['React', 'Vue', 'Svelte']
+    }
+  }
+} satisfies RemoteDomUIResource)
+
+/**
+ * ════════════════════════════════════════════════════════════════════
+ * Traditional MCP Tools and Resources
+ * ════════════════════════════════════════════════════════════════════
+ *
+ * You can mix UIResources with traditional MCP tools and resources
+ */
+
+server.tool({
+  name: 'get-widget-info',
+  description: 'Get information about available UI widgets',
+  fn: async () => {
+    const widgets = [
+      {
+        name: 'kanban-board',
+        type: 'externalUrl',
+        tool: 'ui_kanban-board',
+        resource: 'ui://widget/kanban-board',
+        url: `http://localhost:${PORT}/mcp-use/widgets/kanban-board`
+      },
+      {
+        name: 'welcome-card',
+        type: 'rawHtml',
+        tool: 'ui_welcome-card',
+        resource: 'ui://widget/welcome-card'
+      },
+      {
+        name: 'quick-poll',
+        type: 'remoteDom',
+        tool: 'ui_quick-poll',
+        resource: 'ui://widget/quick-poll'
+      }
+    ]
+
+    return {
+      content: [{
+        type: 'text',
+        text: `Available UI Widgets:\n\n${widgets.map(w =>
+          `📦 ${w.name} (${w.type})\n` +
+          `  Tool: ${w.tool}\n` +
+          `  Resource: ${w.resource}\n` +
+          (w.url ? `  Browser: ${w.url}\n` : '')
+        ).join('\n')}\n` +
+        `\nTypes Explained:\n` +
+        `• externalUrl: Iframe widget from filesystem\n` +
+        `• rawHtml: Direct HTML rendering\n` +
+        `• remoteDom: React/Web Components scripting`
+      }]
+    }
+  }
+})
+
+server.resource({
+  name: 'server-config',
+  uri: 'config://server',
+  title: 'Server Configuration',
+  description: 'Current server configuration and status',
+  mimeType: 'application/json',
+  fn: async () => ({
+    contents: [{
+      uri: 'config://server',
+      mimeType: 'application/json',
+      text: JSON.stringify({
+        port: PORT,
+        version: '1.0.0',
+        widgets: {
+          total: 3,
+          types: {
+            externalUrl: ['kanban-board'],
+            rawHtml: ['welcome-card'],
+            remoteDom: ['quick-poll']
+          },
+          baseUrl: `http://localhost:${PORT}/mcp-use/widgets/`
+        },
+        endpoints: {
+          mcp: `http://localhost:${PORT}/mcp`,
+          inspector: `http://localhost:${PORT}/inspector`,
+          widgets: `http://localhost:${PORT}/mcp-use/widgets/`
+        }
+      }, null, 2)
+    }]
+  })
+})
+
+// Start the server
+server.listen(PORT)
+
+// Display helpful startup message
+console.log(`
+╔═══════════════════════════════════════════════════════════════╗
+║            🎨 UIResource MCP Server (All Types)                ║
+╚═══════════════════════════════════════════════════════════════╝
+
+Server is running on port ${PORT}
+
+📍 Endpoints:
+   MCP Protocol:  http://localhost:${PORT}/mcp
+   Inspector UI:  http://localhost:${PORT}/inspector
+   Widgets Base:  http://localhost:${PORT}/mcp-use/widgets/
+
+🎯 Available UIResources (3 types demonstrated):
+
+   1️⃣  External URL Widget (Iframe)
+   • kanban-board
+     Tool:      ui_kanban-board
+     Resource:  ui://widget/kanban-board
+     Browser:   http://localhost:${PORT}/mcp-use/widgets/kanban-board
+
+   2️⃣  Raw HTML Widget (Direct Rendering)
+   • welcome-card
+     Tool:      ui_welcome-card
+     Resource:  ui://widget/welcome-card
+
+   3️⃣  Remote DOM Widget (React Components)
+   • quick-poll
+     Tool:      ui_quick-poll
+     Resource:  ui://widget/quick-poll
+
+📝 Usage Examples:
+
+   // External URL - Call with dynamic parameters
+   await client.callTool('ui_kanban-board', {
+     initialTasks: [{id: 1, title: 'Task 1'}],
+     theme: 'dark'
+   })
+
+   // Raw HTML - Access as resource
+   await client.readResource('ui://widget/welcome-card')
+
+   // Remote DOM - Interactive component
+   await client.callTool('ui_quick-poll', {
+     question: 'Favorite color?',
+     options: ['Red', 'Blue', 'Green']
+   })
+
+💡 Tip: Open the Inspector UI to test all widget types interactively!
+`)
+
+// Handle graceful shutdown
+process.on('SIGINT', () => {
+  console.log('\n\nShutting down server...')
+  process.exit(0)
+})
+
+export default server

package/dist/templates/uiresource/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowJs": true,
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": ["index.ts", "src/**/*", "resources/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mcp-use-app",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "description": "Create MCP-Use apps with one command",
   "author": "mcp-use, Inc.",