MCP Widgets

Create interactive AI-powered widgets that users can embed and interact with using natural language.

What Are MCP Widgets?

Overview

MCP widgets are:

• AI-enabled UI components
• Embeddable anywhere
• Interactive via chat
• Connected to your workflows

Examples

• Customer service chat
• Data lookup interface
• Workflow trigger button
• Status dashboard

Creating Widgets

From MCP Server

1. Open your MCP server
2. Go to Widgets tab
3. Click Create Widget
4. Configure appearance and tools

Widget Configuration

widget:
  name: Customer Support Bot
  description: Help customers with common questions

  appearance:
    theme: light
    primaryColor: "#3B82F6"
    position: bottom-right

  tools:
    - get_order_status
    - submit_support_ticket
    - search_knowledge_base

  welcome:
    message: "Hi! How can I help you today?"
    suggestions:
      - "Check order status"
      - "Contact support"

Widget Types

Chat Widget

Conversational interface:

type: chat
appearance:
  position: bottom-right
  width: 400
  height: 600

Form Widget

Structured input:

type: form
fields:
  - name: query
    label: What are you looking for?
    type: text
  - name: category
    label: Category
    type: select
    options: [Sales, Support, Billing]

Dashboard Widget

Display data:

type: dashboard
panels:
  - type: metric
    tool: get_stats
    display: card
  - type: list
    tool: get_recent_orders
    display: table

Configuring Appearance

Theme Options

appearance:
  theme: light  # light, dark, auto
  primaryColor: "#3B82F6"
  borderRadius: 8
  fontFamily: "Inter, sans-serif"

Position

For floating widgets:

position: bottom-right  # bottom-right, bottom-left, top-right, top-left
offset:
  x: 20
  y: 20

Size

size:
  width: 400
  height: 600
  minWidth: 300
  maxHeight: 800

Custom CSS

Override styles:

customCSS: |
  .widget-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  .widget-button {
    border-radius: 999px;
  }

Tool Access

Selecting Tools

Choose which MCP tools are available:

tools:
  - name: search_products
    visible: true
  - name: get_order
    visible: true
  - name: cancel_order
    visible: false  # Admin only

Tool Display

Configure how tools appear:

tools:
  - name: submit_request
    displayName: Submit Request
    button: true  # Show as clickable button
    icon: send

Welcome Experience

Initial Message

welcome:
  message: "Welcome! I'm here to help with your questions."
  avatar: /bot-avatar.png

Quick Suggestions

suggestions:
  - label: "Track my order"
    action: "Check the status of my recent order"
  - label: "Return policy"
    action: "What is your return policy?"
  - label: "Contact human"
    action: "I need to speak with a person"

Authentication

Anonymous Access

No login required:

auth:
  required: false

User Authentication

Require login:

auth:
  required: true
  provider: your-oauth
  redirect: /login

Context Passing

Pass user data to tools:

auth:
  passUserContext: true
  fields: [user_id, email, subscription_tier]

Embedding Widgets

Embed Code

Get code from Widget > Embed:

<script src="https://widgets.yourapp.com/loader.js"></script>
<script>
  MCPWidget.init({
    widgetId: 'your-widget-id',
    apiKey: 'your-public-key'
  });
</script>

React Component

import { MCPWidget } from '@yourapp/mcp-widget-react';

function App() {
  return (
    <MCPWidget
      widgetId="your-widget-id"
      apiKey="your-public-key"
      user={{ id: '123', email: 'user@example.com' }}
    />
  );
}

Programmatic Control

// Open widget
MCPWidget.open();

// Close widget
MCPWidget.close();

// Send message
MCPWidget.send('Check my order status');

// Listen to events
MCPWidget.on('message', (msg) => {
  console.log('Bot said:', msg);
});

Customization

Custom Actions

Add buttons that trigger tools:

actions:
  - label: "New Request"
    tool: create_request
    icon: plus
    position: header

Response Formatting

Control how responses display:

formatting:
  lists: bullets
  code: highlighted
  links: new_tab
  images: inline

Branding

Add your branding:

branding:
  logo: /your-logo.png
  poweredBy: false
  companyName: "Your Company"

Analytics

Built-in Tracking

Widgets track:

• Conversations started
• Messages sent
• Tools used
• User satisfaction

Viewing Analytics

1. Go to Widget > Analytics
2. See usage metrics
3. View conversation logs
4. Export data

Custom Events

Track custom events:

MCPWidget.track('feature_used', {
  feature: 'order_lookup',
  success: true
});

Testing

Preview Mode

Test before deploying:

1. Click Preview
2. Interact with widget
3. See tool calls
4. Check responses

Test Scenarios

Create test cases:

tests:
  - name: Order lookup
    input: "Where is my order 12345?"
    expectedTool: get_order
    expectedParams:
      order_id: "12345"

Deployment

Publishing Widget

1. Review configuration
2. Click Publish
3. Choose access level
4. Get embed code

Version Management

• Keep versions for rollback
• Test new versions first
• Gradual rollout option

Next Steps

• Building MCPs - Create the backend
• Embedding Widgets - Embed anywhere
• Embedding Chatbots - Chat interfaces