# 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*
