MCP Platform

Turn any human-in-the-loop workflow into an AI-powered experience with rich, actionable UI cards in ChatGPT.

MCP Platform is a SaaS solution for building and managing MCP (Model Context Protocol) Apps. It enables enterprises to surface decisions that need human judgment directly in AI chat interfaces - with beautiful, interactive UI components instead of walls of text.

The Problem

AI assistants like ChatGPT are powerful, but they struggle with workflows requiring human approval:

• Contract approvals become confusing text summaries
• IT tickets lose critical context when displayed as plain text
• Any decision requiring rich information becomes a UX nightmare

The Solution

MCP Platform lets you:

1. Define tools that fetch data from your systems
2. Design UI components that render rich, interactive cards
3. Connect to ChatGPT via the MCP protocol
4. Empower users to make decisions with full context

Demo Use Cases

Legal Ops - Contract Management

• View pending contracts with priority, value, and status
• See contract details with key terms and risk assessment
• Approve contracts directly from the chat interface

IT Helpdesk - Ticket Management

• View open support tickets by priority and category
• See ticket details with conversation history
• Update status, assign tickets, and resolve issues

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         ChatGPT                                  │
│                    (or any MCP client)                          │
└─────────────────────────────────────────────────────────────────┘
                              │
                              │ MCP Protocol (SSE)
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                       MCP Server                                 │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │   Tools     │  │     UI      │  │    Data     │             │
│  │  Registry   │  │  Templates  │  │   Sources   │             │
│  └─────────────┘  └─────────────┘  └─────────────┘             │
└─────────────────────────────────────────────────────────────────┘
                              ▲
                              │ Admin API
                              │
┌─────────────────────────────────────────────────────────────────┐
│                     Admin Dashboard                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐             │
│  │   Server    │  │    Tool     │  │     UI      │             │
│  │   Config    │  │   Editor    │  │   Builder   │             │
│  └─────────────┘  └─────────────┘  └─────────────┘             │
└─────────────────────────────────────────────────────────────────┘

Project Structure

mcp-platform/
├── packages/
│   └── shared/              # Shared types, schemas, utilities
│       └── src/
│           ├── schemas/     # Zod schemas for validation
│           ├── types/       # TypeScript type definitions
│           └── demo-data/   # Sample data for demos
├── apps/
│   ├── server/              # MCP Server (Node.js)
│   │   └── src/
│   │       ├── mcp-server.ts    # MCP protocol implementation
│   │       ├── config-manager.ts # Runtime configuration
│   │       └── data-sources/    # Data source adapters
│   └── web/                 # Admin Dashboard (Next.js)
│       └── src/
│           ├── app/         # Next.js app router pages
│           ├── components/  # React components
│           └── lib/         # Utilities and API layer
└── docs/                    # Documentation

Getting Started

Prerequisites

• Node.js 18+
• npm 9+

Installation

# Clone the repository
git clone <repository-url>
cd mcp-platform

# Install dependencies
npm install

# Build all packages
npm run build

Development

# Run all development servers
npm run dev

# Or run individually:
npm run dev --workspace=@mcp-platform/server  # MCP Server on :8787
npm run dev --workspace=@mcp-platform/web     # Dashboard on :3000

Testing the Demo

1. Start the development servers: npm run dev
2. Open the dashboard: http://localhost:3000
3. Navigate to a server's Test Harness: /servers/legal-ops-server/test
4. Try: "Show me pending contracts" or "What tickets are assigned to me?"

Connecting to ChatGPT

Using ngrok (for local development)

1. Install ngrok: https://ngrok.com/download
2. Start your MCP server: npm run dev --workspace=@mcp-platform/server
3. Expose it: ngrok http 8787
4. Copy the public URL (e.g., https://abc123.ngrok.io)

ChatGPT Configuration

1. In ChatGPT, add an MCP connector
2. Use your ngrok URL as the server endpoint
3. The MCP server will expose its tools and UI templates
4. Start chatting with your AI-powered workflows!

Creating a New Use Case

1. Define Your Data Model

Create types in packages/shared/src/demo-data/your-use-case/:

// data-sources.ts
export interface YourItem {
  id: string;
  title: string;
  status: string;
  // ... your fields
}

export const yourItems: YourItem[] = [/* sample data */];

2. Create Tools

Define tools in tools.ts:

export const yourTools: Tool[] = [
  {
    id: "get_your_items",
    name: "Get Your Items",
    description: "Retrieves items from the system",
    inputSchema: { /* JSON Schema */ },
    uiComponentId: "your-item-list",
    // ... configuration
  }
];

3. Design UI Components

Create UI component definitions in ui-components.ts:

export const yourUIComponents: UIComponent[] = [
  {
    id: "your-item-list",
    name: "Item List Card",
    templateType: "list-view",
    fieldMappings: [/* map data to display */],
    actionButtons: [/* user actions */],
    // ... styling
  }
];

4. Register the Server

Add your server configuration and export from the shared package index.

Environment Variables

MCP Server (apps/server)

PORT=8787                    # Server port
NODE_ENV=development         # Environment
CONFIG_PATH=./config         # Configuration directory

Admin Dashboard (apps/web)

NEXT_PUBLIC_MCP_SERVER_URL=http://localhost:8787  # MCP server URL

Deployment

MCP Server

Deploy to any Node.js hosting:

• Railway: Connect repo, set apps/server as root
• Render: Create Web Service, build command: npm run build
• Fly.io: Use included Dockerfile (if added)

Admin Dashboard

Deploy to Vercel:

vercel --cwd apps/web

Or any Next.js-compatible platform.

Troubleshooting

"Cannot connect to MCP server"

1. Ensure the server is running: npm run dev --workspace=@mcp-platform/server
2. Check the health endpoint: curl http://localhost:8787/health
3. If using ngrok, verify the tunnel is active

"Tools not appearing in ChatGPT"

1. Verify tools are enabled in the dashboard
2. Check the MCP server logs for errors
3. Reload the configuration: POST /admin/reload

"UI components not rendering"

1. Ensure the UI component is linked to the tool
2. Check field mappings match the tool's output schema
3. Preview the component in the UI builder

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

[Your License Here]