=== NEW === - studio/ — MCPEngine Studio scaffold (Next.js monorepo, build plan) - docs/FACTORY-V2.md — Factory v2 architecture doc - docs/CALENDLY_MCP_BUILD_SUMMARY.md — Calendly MCP build report === UPDATED SERVERS === - fieldedge: Added jobs-tools, UI build script, main entry update - lightspeed: Updated main + server entry points - squarespace: Added collection-browser + page-manager apps - toast: Added main + server entry points === INFRA === - infra/command-center/state.json — Updated pipeline state - infra/command-center/FACTORY-V2.md — Factory v2 operator playbook
680 lines
29 KiB
Markdown
680 lines
29 KiB
Markdown
# MCPEngine Studio — Technical Architecture
|
|
|
|
**Version:** 1.0 | **Date:** February 2026 | **Status:** Implementation-Ready
|
|
|
|
---
|
|
|
|
## 1. System Architecture
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────┐
|
|
│ MCPEngine Studio (Vercel) │
|
|
│ │
|
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌────────────┐ │
|
|
│ │ Next.js │ │ React Flow │ │ WYSIWYG │ │ Marketplace│ │
|
|
│ │ App Shell │ │ Tool Editor │ │ App Designer│ │ Browser │ │
|
|
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ └─────┬──────┘ │
|
|
│ │ │ │ │ │
|
|
│ ▼ ▼ ▼ ▼ │
|
|
│ ┌─────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Next.js API Routes │ │
|
|
│ │ POST /api/analyze POST /api/generate POST /api/design │ │
|
|
│ │ POST /api/test POST /api/deploy GET /api/marketplace │ │
|
|
│ └──────────────────────────┬──────────────────────────────────────┘ │
|
|
│ │ │
|
|
│ ┌───────────────────────────▼─────────────────────────────────────┐ │
|
|
│ │ AI Pipeline Engine │ │
|
|
│ │ ┌─────────┐ ┌──────────┐ ┌──────────┐ ┌──────┐ ┌──────────┐ │ │
|
|
│ │ │Analyzer │ │ Builder │ │ Designer │ │Tester│ │ Deployer │ │ │
|
|
│ │ │ Skill 1 │ │ Skill 2 │ │ Skill 3 │ │Sk. 5 │ │ Skill 6 │ │ │
|
|
│ │ └────┬────┘ └────┬─────┘ └────┬─────┘ └──┬───┘ └────┬─────┘ │ │
|
|
│ │ └──────┬────┴────────┬───┴───────┬───┘ │ │ │
|
|
│ │ ▼ ▼ ▼ ▼ │ │
|
|
│ │ Claude API (anthropic/claude-sonnet-4-5) │ │
|
|
│ └─────────────────────────────────────────────────────────────────┘ │
|
|
│ │ │
|
|
│ ┌───────────────────────────▼─────────────────────────────────────┐ │
|
|
│ │ PostgreSQL (Neon) │ │
|
|
│ │ users · projects · servers · tools · apps · deployments │ │
|
|
│ │ marketplace_listings · usage_logs · api_keys │ │
|
|
│ └─────────────────────────────────────────────────────────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────────┘
|
|
│
|
|
▼
|
|
┌─────────────────────────────────────────────────────────────────────────┐
|
|
│ Cloudflare Workers (User MCP Servers) │
|
|
│ │
|
|
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
|
│ │ user-123 │ │ user-456 │ │ user-789 │ │ ... │ │
|
|
│ │ trello │ │ zendesk │ │ custom │ │ │ │
|
|
│ │ server │ │ server │ │ server │ │ │ │
|
|
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
|
|
│ │
|
|
│ Cloudflare R2: Server bundles, app assets, spec files │
|
|
└─────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 2. Skill-to-Service Mapping
|
|
|
|
Each of our 11 pipeline skills becomes an API service:
|
|
|
|
| Skill | API Endpoint | Trigger | Input | Output |
|
|
|-------|-------------|---------|-------|--------|
|
|
| **mcp-api-analyzer** | `POST /api/analyze` | User uploads spec | OpenAPI spec / URL / raw docs | Structured analysis JSON (endpoints, auth, tool groups, app candidates) |
|
|
| **mcp-server-builder** | `POST /api/generate` | User clicks "Generate" from tool editor | Tool config + analysis | TypeScript MCP server source code (streamed) |
|
|
| **mcp-app-designer** | `POST /api/design` | User triggers from App Designer | Tool definitions + layout config | HTML app files (9 patterns) |
|
|
| **mcp-localbosses-integrator** | Internal only | Automatic during generation | Server + apps | Integration config (not user-facing) |
|
|
| **mcp-qa-tester** | `POST /api/test` | User clicks "Run Tests" | Generated server code | Test results: pass/fail, coverage, issues |
|
|
| **mcp-deployment** | `POST /api/deploy` | User clicks "Deploy" | Compiled server bundle | Deployed URL + endpoint config |
|
|
| **mcp-apps-official** | Embedded in Designer | Powers App Designer WYSIWYG | User design actions | MCP App resource bundles |
|
|
| **mcp-apps-integration** | Embedded in Designer | Template patterns | structuredContent config | HTML+JS app bundles |
|
|
| **mcp-apps-merged** | Reference for all app generation | Powers validation | App config | Compliance check |
|
|
| **mcp-server-development** | Embedded in Builder | Best practices injection | Server config | TypeScript patterns |
|
|
| **mcp-skill** | `POST /api/research` | Optional: research API capabilities | Search query | API documentation findings |
|
|
|
|
---
|
|
|
|
## 3. Frontend Architecture
|
|
|
|
### Tech Stack
|
|
- **Framework:** Next.js 15 (App Router)
|
|
- **Styling:** Tailwind CSS 4 + custom design tokens
|
|
- **Visual Editor:** React Flow v12 (tool canvas)
|
|
- **App Designer:** GrapesJS or custom WYSIWYG
|
|
- **State:** Zustand (client) + React Query (server)
|
|
- **Real-time:** WebSocket via Vercel Edge Functions
|
|
- **Auth:** Clerk (dev → WorkOS for enterprise)
|
|
|
|
### Component Tree
|
|
|
|
```
|
|
app/
|
|
├── (marketing)/
|
|
│ ├── page.tsx # Landing page
|
|
│ └── pricing/page.tsx # Pricing page
|
|
├── (auth)/
|
|
│ ├── sign-in/page.tsx
|
|
│ └── sign-up/page.tsx
|
|
├── (dashboard)/
|
|
│ ├── layout.tsx # NavRail + main area
|
|
│ ├── page.tsx # Dashboard (project grid)
|
|
│ ├── projects/[id]/
|
|
│ │ ├── layout.tsx # Editor layout (canvas + inspector)
|
|
│ │ ├── page.tsx # Tool Editor (React Flow)
|
|
│ │ ├── apps/page.tsx # App Designer (WYSIWYG)
|
|
│ │ ├── test/page.tsx # Testing Dashboard
|
|
│ │ └── deploy/page.tsx # Deploy Flow
|
|
│ └── marketplace/
|
|
│ ├── page.tsx # Browse templates
|
|
│ └── [templateId]/page.tsx # Template detail
|
|
├── api/
|
|
│ ├── analyze/route.ts # Spec analysis endpoint
|
|
│ ├── generate/route.ts # Server code generation
|
|
│ ├── design/route.ts # App UI generation
|
|
│ ├── test/route.ts # Run test suite
|
|
│ ├── deploy/route.ts # Deploy to Cloudflare
|
|
│ ├── marketplace/route.ts # Marketplace CRUD
|
|
│ └── webhooks/
|
|
│ ├── stripe/route.ts # Billing webhooks
|
|
│ └── clerk/route.ts # Auth webhooks
|
|
└── components/
|
|
├── nav-rail/ # Left navigation (icon dock)
|
|
├── canvas/ # React Flow wrapper + custom nodes
|
|
│ ├── ToolNode.tsx # Visual tool block
|
|
│ ├── GroupNode.tsx # Tool group container
|
|
│ └── ConnectionEdge.tsx # Tool chain connectors
|
|
├── inspector/ # Right panel (context-sensitive)
|
|
│ ├── ToolInspector.tsx # Tool config panel
|
|
│ ├── ParamEditor.tsx # Parameter schema editor
|
|
│ └── AuthConfig.tsx # Auth flow configuration
|
|
├── app-designer/ # WYSIWYG components
|
|
│ ├── ComponentPalette.tsx # Drag-drop widget library
|
|
│ ├── DesignCanvas.tsx # Visual preview area
|
|
│ └── PropertyPanel.tsx # Widget properties
|
|
├── marketplace/ # Template browser
|
|
├── deploy/ # Deployment stepper
|
|
└── shared/ # Buttons, cards, inputs, toasts
|
|
```
|
|
|
|
### Key UI Zones (3 max)
|
|
|
|
```
|
|
┌────┬──────────────────────────────────┬──────────────┐
|
|
│ │ │ │
|
|
│ N │ │ │
|
|
│ A │ CANVAS │ INSPECTOR │
|
|
│ V │ (React Flow / WYSIWYG / │ (context- │
|
|
│ │ Test Results / Deploy) │ sensitive) │
|
|
│ R │ │ │
|
|
│ A │ │ │
|
|
│ I │ │ │
|
|
│ L │ │ │
|
|
│ │ │ │
|
|
└────┴──────────────────────────────────┴──────────────┘
|
|
64px flex-1 320px
|
|
```
|
|
|
|
---
|
|
|
|
## 4. Backend API Design
|
|
|
|
### REST Endpoints
|
|
|
|
```typescript
|
|
// === Analysis ===
|
|
POST /api/analyze
|
|
Body: { specUrl?: string, specFile?: string, rawDocs?: string }
|
|
Response: StreamingResponse (SSE) → AnalysisResult
|
|
|
|
interface AnalysisResult {
|
|
id: string;
|
|
service: string;
|
|
endpoints: Endpoint[];
|
|
authFlow: AuthConfig;
|
|
toolGroups: ToolGroup[];
|
|
appCandidates: AppCandidate[];
|
|
rateLimits: RateLimitInfo;
|
|
}
|
|
|
|
// === Generation ===
|
|
POST /api/generate
|
|
Body: { projectId: string, tools: ToolConfig[], auth: AuthConfig }
|
|
Response: StreamingResponse (SSE) → GenerationProgress → ServerBundle
|
|
|
|
interface ServerBundle {
|
|
files: { path: string; content: string }[];
|
|
packageJson: object;
|
|
tsConfig: object;
|
|
entryPoint: string;
|
|
}
|
|
|
|
// === App Design ===
|
|
POST /api/design
|
|
Body: { projectId: string, appType: AppPattern, tools: string[], layout: LayoutConfig }
|
|
Response: StreamingResponse (SSE) → AppBundle
|
|
|
|
type AppPattern =
|
|
| 'dashboard' | 'data-grid' | 'form' | 'card-list'
|
|
| 'timeline' | 'calendar' | 'kanban' | 'chart' | 'detail-view';
|
|
|
|
// === Testing ===
|
|
POST /api/test
|
|
Body: { projectId: string, testLayers: TestLayer[] }
|
|
Response: StreamingResponse (SSE) → TestResult[]
|
|
|
|
type TestLayer =
|
|
| 'protocol' | 'static' | 'visual' | 'functional'
|
|
| 'performance' | 'security';
|
|
|
|
// === Deployment ===
|
|
POST /api/deploy
|
|
Body: { projectId: string, target: DeployTarget, config: DeployConfig }
|
|
Response: StreamingResponse (SSE) → DeployResult
|
|
|
|
type DeployTarget = 'mcpengine' | 'npm' | 'docker' | 'cloudflare' | 'download';
|
|
|
|
interface DeployResult {
|
|
url: string;
|
|
endpoint: string;
|
|
status: 'live' | 'pending';
|
|
logs: string[];
|
|
}
|
|
|
|
// === Marketplace ===
|
|
GET /api/marketplace # List templates
|
|
GET /api/marketplace/:id # Template detail
|
|
POST /api/marketplace/:id/fork # Fork template into project
|
|
POST /api/marketplace/publish # Publish project as template
|
|
|
|
// === Projects ===
|
|
GET /api/projects # List user projects
|
|
POST /api/projects # Create project
|
|
GET /api/projects/:id # Get project detail
|
|
PATCH /api/projects/:id # Update project
|
|
DELETE /api/projects/:id # Delete project
|
|
```
|
|
|
|
### WebSocket (Real-time Updates)
|
|
|
|
```typescript
|
|
// Client connects to ws://app/api/ws?projectId=xxx
|
|
// Server streams events during generation/testing/deployment:
|
|
|
|
type WSEvent =
|
|
| { type: 'analysis:progress', step: string, percent: number }
|
|
| { type: 'analysis:tool_found', tool: ToolDefinition }
|
|
| { type: 'analysis:complete', result: AnalysisResult }
|
|
| { type: 'generate:progress', file: string, percent: number }
|
|
| { type: 'generate:file_ready', path: string, content: string }
|
|
| { type: 'generate:complete', bundle: ServerBundle }
|
|
| { type: 'test:running', layer: TestLayer }
|
|
| { type: 'test:result', layer: TestLayer, passed: boolean, details: string }
|
|
| { type: 'deploy:progress', step: string, percent: number }
|
|
| { type: 'deploy:live', url: string }
|
|
| { type: 'error', message: string, recoverable: boolean };
|
|
```
|
|
|
|
---
|
|
|
|
## 5. Database Schema
|
|
|
|
```sql
|
|
-- Users (synced from Clerk)
|
|
CREATE TABLE users (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
clerk_id TEXT UNIQUE NOT NULL,
|
|
email TEXT UNIQUE NOT NULL,
|
|
name TEXT,
|
|
avatar_url TEXT,
|
|
tier TEXT NOT NULL DEFAULT 'free' CHECK (tier IN ('free','pro','team','enterprise')),
|
|
stripe_customer_id TEXT,
|
|
team_id UUID REFERENCES teams(id),
|
|
created_at TIMESTAMPTZ DEFAULT now(),
|
|
updated_at TIMESTAMPTZ DEFAULT now()
|
|
);
|
|
|
|
-- Teams (for Team/Enterprise tiers)
|
|
CREATE TABLE teams (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
name TEXT NOT NULL,
|
|
slug TEXT UNIQUE NOT NULL,
|
|
owner_id UUID NOT NULL REFERENCES users(id),
|
|
tier TEXT NOT NULL DEFAULT 'team',
|
|
stripe_subscription_id TEXT,
|
|
max_seats INT DEFAULT 5,
|
|
created_at TIMESTAMPTZ DEFAULT now()
|
|
);
|
|
|
|
-- Projects (one per MCP server being built)
|
|
CREATE TABLE projects (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
user_id UUID NOT NULL REFERENCES users(id),
|
|
team_id UUID REFERENCES teams(id),
|
|
name TEXT NOT NULL,
|
|
slug TEXT NOT NULL,
|
|
description TEXT,
|
|
status TEXT DEFAULT 'draft' CHECK (status IN ('draft','analyzed','generated','tested','deployed')),
|
|
spec_url TEXT,
|
|
spec_raw JSONB,
|
|
analysis JSONB, -- cached AnalysisResult
|
|
tool_config JSONB, -- user's tool editor state
|
|
app_config JSONB, -- user's app designer state
|
|
auth_config JSONB, -- OAuth/API key config
|
|
server_bundle JSONB, -- generated code metadata
|
|
template_id UUID REFERENCES marketplace_listings(id), -- if forked
|
|
created_at TIMESTAMPTZ DEFAULT now(),
|
|
updated_at TIMESTAMPTZ DEFAULT now(),
|
|
UNIQUE(user_id, slug)
|
|
);
|
|
|
|
-- Tools (individual MCP tools within a project)
|
|
CREATE TABLE tools (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
project_id UUID NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
|
|
name TEXT NOT NULL,
|
|
description TEXT,
|
|
group_name TEXT,
|
|
input_schema JSONB NOT NULL,
|
|
output_schema JSONB,
|
|
annotations JSONB, -- readOnlyHint, destructiveHint, etc.
|
|
enabled BOOLEAN DEFAULT true,
|
|
position INT DEFAULT 0, -- order in canvas
|
|
canvas_x FLOAT, -- React Flow position
|
|
canvas_y FLOAT,
|
|
created_at TIMESTAMPTZ DEFAULT now()
|
|
);
|
|
|
|
-- Apps (MCP App UIs within a project)
|
|
CREATE TABLE apps (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
project_id UUID NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
|
|
name TEXT NOT NULL,
|
|
pattern TEXT NOT NULL, -- dashboard, data-grid, form, etc.
|
|
layout_config JSONB, -- WYSIWYG layout state
|
|
html_bundle TEXT, -- generated HTML
|
|
tool_bindings JSONB, -- which tools feed data to this app
|
|
created_at TIMESTAMPTZ DEFAULT now()
|
|
);
|
|
|
|
-- Deployments
|
|
CREATE TABLE deployments (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
project_id UUID NOT NULL REFERENCES projects(id),
|
|
user_id UUID NOT NULL REFERENCES users(id),
|
|
target TEXT NOT NULL, -- mcpengine, npm, docker, cloudflare
|
|
status TEXT DEFAULT 'pending' CHECK (status IN ('pending','building','live','failed','stopped')),
|
|
url TEXT,
|
|
endpoint TEXT,
|
|
worker_id TEXT, -- Cloudflare Worker ID
|
|
version TEXT,
|
|
logs JSONB,
|
|
created_at TIMESTAMPTZ DEFAULT now(),
|
|
stopped_at TIMESTAMPTZ
|
|
);
|
|
|
|
-- Marketplace Listings
|
|
CREATE TABLE marketplace_listings (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
project_id UUID NOT NULL REFERENCES projects(id),
|
|
author_id UUID NOT NULL REFERENCES users(id),
|
|
name TEXT NOT NULL,
|
|
slug TEXT UNIQUE NOT NULL,
|
|
description TEXT,
|
|
category TEXT, -- crm, ecommerce, hr, finance, etc.
|
|
tags TEXT[],
|
|
icon_url TEXT,
|
|
preview_url TEXT,
|
|
tool_count INT,
|
|
app_count INT,
|
|
fork_count INT DEFAULT 0,
|
|
is_official BOOLEAN DEFAULT false, -- our 37 servers
|
|
is_featured BOOLEAN DEFAULT false,
|
|
price_cents INT DEFAULT 0, -- 0 = free
|
|
status TEXT DEFAULT 'review' CHECK (status IN ('review','published','rejected','archived')),
|
|
created_at TIMESTAMPTZ DEFAULT now(),
|
|
published_at TIMESTAMPTZ
|
|
);
|
|
|
|
-- Usage Tracking
|
|
CREATE TABLE usage_logs (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
user_id UUID NOT NULL REFERENCES users(id),
|
|
action TEXT NOT NULL, -- analyze, generate, test, deploy
|
|
project_id UUID REFERENCES projects(id),
|
|
tokens_used INT,
|
|
duration_ms INT,
|
|
created_at TIMESTAMPTZ DEFAULT now()
|
|
);
|
|
|
|
-- API Keys (for deployed servers needing user's service credentials)
|
|
CREATE TABLE api_keys (
|
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
|
|
project_id UUID NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
|
|
user_id UUID NOT NULL REFERENCES users(id),
|
|
key_name TEXT NOT NULL, -- e.g., TRELLO_API_KEY
|
|
encrypted_value TEXT NOT NULL, -- AES-256 encrypted
|
|
created_at TIMESTAMPTZ DEFAULT now()
|
|
);
|
|
|
|
-- Indexes
|
|
CREATE INDEX idx_projects_user ON projects(user_id);
|
|
CREATE INDEX idx_projects_team ON projects(team_id);
|
|
CREATE INDEX idx_tools_project ON tools(project_id);
|
|
CREATE INDEX idx_apps_project ON apps(project_id);
|
|
CREATE INDEX idx_deployments_project ON deployments(project_id);
|
|
CREATE INDEX idx_marketplace_category ON marketplace_listings(category);
|
|
CREATE INDEX idx_marketplace_featured ON marketplace_listings(is_featured) WHERE is_featured = true;
|
|
CREATE INDEX idx_usage_user_date ON usage_logs(user_id, created_at);
|
|
```
|
|
|
|
---
|
|
|
|
## 6. AI Pipeline Architecture
|
|
|
|
### How User Actions Trigger Skills
|
|
|
|
```
|
|
User Action Skill Used Claude Call
|
|
─────────────────────────────────────────────────────────────────
|
|
Upload OpenAPI spec → mcp-api-analyzer → System prompt: skill content
|
|
User prompt: spec content
|
|
Streaming: tool-by-tool analysis
|
|
|
|
Click "Generate Server" → mcp-server-builder → System prompt: skill + analysis
|
|
+ mcp-server-development User prompt: tool config JSON
|
|
Streaming: file-by-file generation
|
|
|
|
Design MCP App → mcp-app-designer → System prompt: skill + patterns
|
|
+ mcp-apps-official User prompt: layout + tool bindings
|
|
+ mcp-apps-merged Streaming: HTML bundle
|
|
|
|
Run Tests → mcp-qa-tester → System prompt: skill + server code
|
|
User prompt: "run layer X tests"
|
|
Streaming: test-by-test results
|
|
|
|
Deploy → mcp-deployment → System prompt: skill
|
|
User prompt: target + config
|
|
Result: deployment script
|
|
```
|
|
|
|
### Pipeline Implementation
|
|
|
|
```typescript
|
|
// lib/ai-pipeline.ts
|
|
import Anthropic from '@anthropic-ai/sdk';
|
|
|
|
const client = new Anthropic();
|
|
|
|
// Each skill is loaded as a system prompt
|
|
const SKILLS = {
|
|
analyzer: fs.readFileSync('skills/mcp-api-analyzer/SKILL.md', 'utf-8'),
|
|
builder: fs.readFileSync('skills/mcp-server-builder/SKILL.md', 'utf-8'),
|
|
designer: fs.readFileSync('skills/mcp-app-designer/SKILL.md', 'utf-8'),
|
|
tester: fs.readFileSync('skills/mcp-qa-tester/SKILL.md', 'utf-8'),
|
|
deployer: fs.readFileSync('skills/mcp-deployment/SKILL.md', 'utf-8'),
|
|
appsGuide: fs.readFileSync('skills/mcp-apps-merged/SKILL.md', 'utf-8'),
|
|
serverDev: fs.readFileSync('skills/mcp-server-development/SKILL.md', 'utf-8'),
|
|
};
|
|
|
|
export async function* analyzeSpec(spec: string): AsyncGenerator<AnalysisEvent> {
|
|
const stream = client.messages.stream({
|
|
model: 'claude-sonnet-4-5-20250514',
|
|
max_tokens: 8192,
|
|
system: SKILLS.analyzer,
|
|
messages: [{ role: 'user', content: `Analyze this API spec:\n\n${spec}` }],
|
|
});
|
|
|
|
for await (const event of stream) {
|
|
// Parse streaming chunks → yield structured events
|
|
yield parseAnalysisChunk(event);
|
|
}
|
|
}
|
|
|
|
export async function* generateServer(
|
|
analysis: AnalysisResult,
|
|
toolConfig: ToolConfig[]
|
|
): AsyncGenerator<GenerationEvent> {
|
|
const systemPrompt = [SKILLS.builder, SKILLS.serverDev].join('\n\n---\n\n');
|
|
|
|
const stream = client.messages.stream({
|
|
model: 'claude-sonnet-4-5-20250514',
|
|
max_tokens: 16384,
|
|
system: systemPrompt,
|
|
messages: [{
|
|
role: 'user',
|
|
content: `Generate MCP server from this analysis and tool config:\n\nAnalysis:\n${JSON.stringify(analysis)}\n\nTool Config:\n${JSON.stringify(toolConfig)}`
|
|
}],
|
|
});
|
|
|
|
for await (const event of stream) {
|
|
yield parseGenerationChunk(event);
|
|
}
|
|
}
|
|
|
|
// Similar for designApp(), runTests(), deploy()
|
|
```
|
|
|
|
### Cost Estimation Per Operation
|
|
|
|
| Operation | Model | ~Tokens | ~Cost | Time |
|
|
|-----------|-------|---------|-------|------|
|
|
| Analyze spec | Sonnet | 3K in + 4K out | $0.03 | 8-15s |
|
|
| Generate server | Sonnet | 8K in + 12K out | $0.10 | 20-40s |
|
|
| Design app | Sonnet | 5K in + 6K out | $0.05 | 10-20s |
|
|
| Run tests | Sonnet | 6K in + 4K out | $0.04 | 10-15s |
|
|
| Full pipeline | Sonnet | ~22K in + 26K out | $0.22 | 60-90s |
|
|
|
|
At $0.22/pipeline run, even free tier users (3 servers) cost ~$0.66 per user. Sustainable.
|
|
|
|
---
|
|
|
|
## 7. Deployment Architecture
|
|
|
|
### App Hosting (Vercel)
|
|
```
|
|
mcpengine.com → Next.js app (Vercel)
|
|
api.mcpengine.com → API routes (Vercel Edge)
|
|
ws.mcpengine.com → WebSocket (Vercel Edge)
|
|
```
|
|
|
|
### User MCP Server Hosting (Cloudflare Workers)
|
|
```
|
|
{slug}.mcpengine.run → User's deployed MCP server
|
|
```
|
|
|
|
Each deployed server becomes a Cloudflare Worker:
|
|
1. User clicks "Deploy to MCPEngine"
|
|
2. Backend compiles TypeScript → bundled JS
|
|
3. Cloudflare API: `PUT /client/v4/accounts/{id}/workers/scripts/{name}`
|
|
4. DNS: add `{slug}.mcpengine.run` route
|
|
5. Server is live with SSE transport (MCP over HTTP)
|
|
|
|
### Asset Storage (Cloudflare R2)
|
|
```
|
|
r2://mcpengine-assets/
|
|
├── specs/ # Uploaded OpenAPI specs
|
|
├── bundles/ # Generated server bundles
|
|
├── apps/ # MCP App HTML bundles
|
|
└── marketplace/ # Template preview assets
|
|
```
|
|
|
|
### CI/CD
|
|
- **App:** Push to `main` → Vercel auto-deploy
|
|
- **Workers:** Deploy API → Cloudflare Wrangler
|
|
- **Database:** Neon branching for staging
|
|
|
|
---
|
|
|
|
## 8. Real-time Collaboration (Team Tier)
|
|
|
|
### Architecture
|
|
- **Presence:** Vercel Edge WebSocket → broadcast cursor positions
|
|
- **Conflict resolution:** Operational Transform (OT) for tool config edits
|
|
- **Change feed:** PostgreSQL LISTEN/NOTIFY → WebSocket broadcast
|
|
|
|
### Implementation
|
|
```typescript
|
|
// Multiplayer cursors on React Flow canvas
|
|
interface PresenceEvent {
|
|
userId: string;
|
|
userName: string;
|
|
avatar: string;
|
|
cursor: { x: number; y: number };
|
|
selectedNode?: string;
|
|
view: 'editor' | 'designer' | 'test' | 'deploy';
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 9. Security Model
|
|
|
|
### User Isolation
|
|
- All projects scoped to `user_id` — no cross-user data access
|
|
- Deployed Workers run in isolated V8 sandboxes (Cloudflare)
|
|
- API keys encrypted with AES-256-GCM, per-user encryption keys
|
|
|
|
### Auth Flow
|
|
1. Clerk handles sign-up/sign-in (social + email)
|
|
2. JWT in Authorization header for API calls
|
|
3. Clerk webhook syncs user to PostgreSQL
|
|
4. Team membership checked via `team_id` on every request
|
|
|
|
### API Key Security
|
|
- User's service credentials (e.g., TRELLO_API_KEY) stored encrypted
|
|
- Decrypted only at deploy time → injected as Worker environment variables
|
|
- Never exposed in generated code or API responses
|
|
- Key rotation support via re-deploy
|
|
|
|
### Rate Limiting
|
|
| Tier | Analyze/hr | Generate/hr | Deploy/day |
|
|
|------|-----------|------------|-----------|
|
|
| Free | 5 | 3 | 2 |
|
|
| Pro | 50 | 30 | 20 |
|
|
| Team | 200 | 100 | 50 |
|
|
| Enterprise | Unlimited | Unlimited | Unlimited |
|
|
|
|
---
|
|
|
|
## 10. Scaling Strategy
|
|
|
|
### Phase 1 (0-1K users): Simple
|
|
- Vercel Pro plan (~$20/mo)
|
|
- Neon free tier (PostgreSQL)
|
|
- Cloudflare Workers free tier (100K req/day)
|
|
- Total infra: ~$50/mo
|
|
|
|
### Phase 2 (1K-10K users): Scale compute
|
|
- Vercel Team (~$150/mo)
|
|
- Neon Pro ($19/mo)
|
|
- Cloudflare Workers Paid ($5/mo + usage)
|
|
- Redis (Upstash) for rate limiting + caching
|
|
- Total infra: ~$300/mo
|
|
|
|
### Phase 3 (10K+ users): Optimize
|
|
- Cloudflare Workers Bundled for user servers
|
|
- R2 for all asset storage
|
|
- Edge caching for marketplace
|
|
- Queue system (Cloudflare Queues) for async generation
|
|
- Total infra: ~$1K-5K/mo (scales with revenue)
|
|
|
|
### Performance Budgets
|
|
| Metric | Target |
|
|
|--------|--------|
|
|
| Landing page LCP | < 1.5s |
|
|
| Editor load | < 2s |
|
|
| Spec analysis start | < 500ms |
|
|
| Generation streaming start | < 1s |
|
|
| Deploy completion | < 30s |
|
|
| WebSocket reconnect | < 2s |
|
|
|
|
---
|
|
|
|
## 11. Marketplace Migration (37 Servers → Templates)
|
|
|
|
### Migration Script
|
|
```bash
|
|
for server in mcpengine-repo/servers/*/; do
|
|
name=$(basename $server)
|
|
# Extract metadata
|
|
tools=$(grep -c "server.tool(" $server/src/index.ts)
|
|
apps=$(ls $server/app-ui/*.html 2>/dev/null | wc -l)
|
|
|
|
# Create marketplace listing
|
|
INSERT INTO marketplace_listings (
|
|
name, slug, description, category,
|
|
tool_count, app_count, is_official, status
|
|
) VALUES (
|
|
$name, $name, <from README>, <auto-categorize>,
|
|
$tools, $apps, true, 'published'
|
|
);
|
|
|
|
# Bundle source into R2
|
|
tar czf /tmp/$name.tar.gz -C $server .
|
|
wrangler r2 object put mcpengine-assets/marketplace/$name.tar.gz --file /tmp/$name.tar.gz
|
|
done
|
|
```
|
|
|
|
### Categories for 37 Servers
|
|
| Category | Servers |
|
|
|----------|---------|
|
|
| **CRM** | close, pipedrive, keap, housecall-pro |
|
|
| **eCommerce** | bigcommerce, squarespace, lightspeed, clover |
|
|
| **HR/Payroll** | bamboohr, gusto, rippling |
|
|
| **Finance** | freshbooks, wave, toast |
|
|
| **Marketing** | mailchimp, brevo, constant-contact, meta-ads |
|
|
| **Support** | zendesk, freshdesk, helpscout |
|
|
| **Project Mgmt** | trello, clickup, wrike, basecamp |
|
|
| **Scheduling** | acuity-scheduling, calendly |
|
|
| **Communication** | twilio |
|
|
| **Field Service** | servicetitan, jobber, fieldedge, touchbistro |
|
|
| **Real Estate** | reonomy |
|
|
| **Dev Tools** | google-console |
|
|
| **Automation** | n8n-apps, closebot |
|
|
|
|
---
|
|
|
|
*Document Version: 1.0 | Last Updated: February 6, 2026*
|