@uitoolbar/provider-mcp

MCP (Model Context Protocol) server for UiToolbar. Receives element selection data from the browser extension and can be extended for AI-powered code modifications.

Features

• Element Selection API - Receives selected element context from extension
• Health Checks - Simple endpoint for connection detection
• Extensible - Add your own processing logic for element data
• CORS Enabled - Works with browser extensions

Installation

pnpm add @uitoolbar/provider-mcp

Usage

Starting the Server

# Via CLI
pnpm exec uitoolbar-mcp

# Or programmatically
import { startServer } from '@uitoolbar/provider-mcp/server'
startServer(3001)

API Endpoints

GET /health

Check server status.

{
  "status": "ok",
  "provider": "mcp",
  "timestamp": 1704567890123,
  "available_tools": ["file_search", "code_modification"]
}

POST /api/select

Receive element selection from extension.

// Request
{
  element: {
    html: string           // Element's outerHTML
    tagName: string        // Tag name (lowercase)
    id?: string            // Element ID
    className?: string     // Class names
    textContent?: string   // Text content (truncated to 200 chars)
    attributes: Array<{ name: string, value: string }>
    bounds: {
      x: number
      y: number
      width: number
      height: number
      borderRadius?: string
      transform?: string
    }
    componentName?: string // React component name (if detected)
    filePath?: string      // Source file (if detected)
    lineNumber?: number    // Source line (if detected)
  }
  page: {
    url: string            // Page URL
    title: string          // Page title
  }
  prompt?: string          // Optional user instruction
  timestamp: number        // Selection timestamp
  react?: {                // React DevTools info (if available)
    component?: string
    filePath?: string
    lineNumber?: number
  }
}

// Response
{
  success: true,
  openFile?: {
    path: string
    line?: number
  },
  modifiedCode?: string
}

Client Usage

import { createMCPClient } from '@uitoolbar/provider-mcp/client'

const client = createMCPClient('http://localhost:3001')

// Check connection
const isConnected = await client.checkHealth()

// Send element selection
const result = await client.sendElement({
  element: { html: '<button>Click</button>', tagName: 'button', ... },
  page: { url: 'http://localhost:3000', title: 'My App' }
})

Configuration

| Option | Default | Description | |--------|---------|-------------| | port | 3001 | Server port |

How It Works

1. Browser extension detects element under cursor
2. On click, extension sends element context to MCP server
3. Server logs the selection and processes it
4. Currently returns placeholder response (extend for AI integration)

Extending

The processElementSelection function in server.ts is where you add custom logic:

const processElementSelection = async (data) => {
  // Your logic here:
  // - Search codebase for component file
  // - Send to AI for code suggestions
  // - Return file path to open in IDE
  
  return {
    filePath: '/src/components/Button.tsx',
    lineNumber: 42,
    code: '// Modified code'
  }
}

Development

# Run server in dev mode
pnpm dev

# Run tests
pnpm test

# Build
pnpm build

Integration with Extension

The extension auto-detects MCP server on http://localhost:3001. When active:

1. Extension checks /health endpoint
2. If healthy, sends element data to /api/select
3. Server processes and optionally returns file to open