mcpengine/studio/BUILD-PLAN.md

# MCPEngine Studio — Agent Team Build Plan

**Objective:** Build the no-code MCP App builder at mcpengine.com using a coordinated team of expert sub-agents.
**Timeline:** 4 weeks to MVP (V1), 8 weeks to marketplace (V2)
**Orchestrator:** Buba (main agent) — assigns work, reviews output, resolves conflicts, merges code

---

## The Agent Team

### 8 Specialist Agents

| Agent | Role | Expertise | Runs On |
|-------|------|-----------|---------|
| **SCAFFOLD** | Project Bootstrapper | Next.js 15, Tailwind, project setup, CI/CD | Opus |
| **DESIGN-SYS** | Design System Engineer | Tailwind config, component library, tokens, dark/light mode | Opus |
| **CANVAS** | Visual Editor Engineer | React Flow v12, custom nodes, drag-drop, canvas interactions | Opus |
| **AI-PIPE** | AI Pipeline Engineer | Claude API integration, streaming, skill-to-service wiring | Opus |
| **BACKEND** | Backend Engineer | Next.js API routes, PostgreSQL schema, auth, billing | Opus |
| **APP-DESIGNER** | WYSIWYG Builder | MCP Apps UI designer, component palette, data binding | Opus |
| **DEPLOY** | Deploy & Infra Engineer | Cloudflare Workers, Wrangler, R2, server hosting pipeline | Opus |
| **MARKETPLACE** | Marketplace Engineer | Template system, 37 server migration, search, fork flow | Opus |

### Orchestration Model

```
                          ┌─────────┐
                          │  BUBA   │
                          │ (main)  │
                          └────┬────┘
                               │ assigns tasks, reviews PRs,
                               │ resolves conflicts, merges
                    ┌──────────┼──────────┐
                    │          │          │
              ┌─────▼────┐ ┌──▼───┐ ┌───▼─────┐
              │ Phase 1  │ │ P2   │ │ Phase 3 │
              │ Agents   │ │      │ │ Agents  │
              └──────────┘ └──────┘ └─────────┘

Phase 1 (Week 1):    SCAFFOLD → DESIGN-SYS → BACKEND (parallel after scaffold)
Phase 2 (Week 2-3):  CANVAS + AI-PIPE + BACKEND (parallel)
Phase 3 (Week 3-4):  APP-DESIGNER + DEPLOY + MARKETPLACE (parallel)
Integration (Week 4): BUBA merges all, end-to-end testing
```

---

## Phase 1: Foundation (Week 1)

### Sprint 1A: Project Scaffold (Day 1)
**Agent: SCAFFOLD**

```
Task: Bootstrap the MCPEngine Studio monorepo

Deliverables:
├── mcpengine-studio/
│   ├── package.json              (workspace root)
│   ├── apps/
│   │   └── web/                  (Next.js 15 app)
│   │       ├── app/
│   │       │   ├── (marketing)/  (landing, pricing)
│   │       │   ├── (auth)/       (sign-in, sign-up)
│   │       │   ├── (dashboard)/  (authenticated app)
│   │       │   └── api/          (route handlers)
│   │       ├── components/
│   │       ├── lib/
│   │       ├── tailwind.config.ts
│   │       ├── next.config.ts
│   │       └── tsconfig.json
│   ├── packages/
│   │   ├── ui/                   (shared component library)
│   │   ├── db/                   (drizzle schema + migrations)
│   │   └── ai-pipeline/          (skill engine)
│   ├── turbo.json
│   └── .github/workflows/ci.yml

Setup:
- Next.js 15 with App Router + Turbopack
- Tailwind CSS 4
- TypeScript strict mode
- Drizzle ORM + Neon PostgreSQL
- Clerk auth (dev keys)
- pnpm workspaces + Turborepo
- ESLint + Prettier
- Vercel deployment config

Acceptance: `pnpm dev` runs, shows placeholder landing page
```

### Sprint 1B: Design System (Days 1-3)
**Agent: DESIGN-SYS**
**Depends on:** SCAFFOLD complete

```
Task: Build the complete component library per UX-DESIGN-SPEC.md

Deliverables in packages/ui/:
├── tokens/
│   ├── colors.ts           (all hex values, dark/light)
│   ├── typography.ts        (Inter + JetBrains Mono scale)
│   ├── spacing.ts           (4px grid)
│   └── shadows.ts           (elevation system)
├── components/
│   ├── Button.tsx           (primary/secondary/ghost/danger/success, 3 sizes)
│   ├── Card.tsx             (default/interactive/elevated/glowing)
│   ├── Input.tsx            (text/textarea/select/search + error states)
│   ├── Modal.tsx            (backdrop blur, spring animation)
│   ├── Toast.tsx            (success/error/info/loading, auto-dismiss)
│   ├── NavRail.tsx          (64px icon dock with tooltips)
│   ├── NavRailItem.tsx      (icon + tooltip + active state)
│   ├── Inspector.tsx        (slide-in right panel, context-sensitive)
│   ├── Badge.tsx            (status badges for tools)
│   ├── Skeleton.tsx         (loading placeholders)
│   ├── EmptyState.tsx       (illustration + headline + CTA)
│   ├── ProgressBar.tsx      (animated, indeterminate option)
│   ├── Stepper.tsx          (deploy progress stepper)
│   └── ConfettiOverlay.tsx  (canvas-confetti wrapper)
├── layouts/
│   ├── AppShell.tsx         (NavRail + Canvas + Inspector 3-zone layout)
│   ├── MarketingLayout.tsx  (header + footer for public pages)
│   └── AuthLayout.tsx       (centered card layout)
└── hooks/
    ├── useTheme.ts          (dark/light toggle)
    ├── useToast.ts          (toast notification system)
    └── useInspector.ts      (open/close inspector panel)

Acceptance:
- All components render in dark + light mode
- Keyboard accessible (focus rings, tab order)
- Storybook or test page showing all components
- Matches UX-DESIGN-SPEC.md color values exactly
```

### Sprint 1C: Database + Auth (Days 2-4)
**Agent: BACKEND**
**Depends on:** SCAFFOLD complete

```
Task: Set up database schema, auth, and core API structure

Deliverables in packages/db/:
├── schema.ts               (all tables from TECHNICAL-ARCHITECTURE.md)
│   - users, teams, projects, tools, apps
│   - deployments, marketplace_listings
│   - usage_logs, api_keys
├── migrations/
│   └── 0001_initial.sql
├── seed.ts                 (seed 37 marketplace templates)
└── index.ts                (drizzle client export)

Deliverables in apps/web/app/api/:
├── auth/
│   └── webhook/route.ts    (Clerk webhook → sync users to DB)
├── projects/
│   ├── route.ts            (GET list, POST create)
│   └── [id]/route.ts       (GET detail, PATCH update, DELETE)
└── middleware.ts            (Clerk auth middleware)

Deliverables in apps/web/app/(auth)/:
├── sign-in/page.tsx        (Clerk SignIn component)
└── sign-up/page.tsx        (Clerk SignUp component)

Acceptance:
- `pnpm db:push` creates all tables in Neon
- Sign up / sign in works
- CRUD projects via API
- Clerk webhook syncs user to DB
```

---

## Phase 2: Core Features (Weeks 2-3)

### Sprint 2A: Visual Tool Editor (Days 5-9)
**Agent: CANVAS**
**Depends on:** DESIGN-SYS + BACKEND complete

```
Task: Build the React Flow visual tool editor — the core canvas

Deliverables in apps/web/components/canvas/:
├── ToolCanvas.tsx           (React Flow wrapper with controls)
├── ToolNode.tsx             (custom node: tool name, method badge, description,
│                             param count, auth indicator, enabled toggle)
├── GroupNode.tsx            (tool group container with label)
├── ConnectionEdge.tsx       (animated edge for tool chaining)
├── CanvasToolbar.tsx        (zoom controls, minimap toggle, auto-layout)
├── CanvasControls.tsx       (React Flow controls wrapper)
└── hooks/
    ├── useCanvasState.ts    (Zustand store: nodes, edges, selections)
    ├── useToolDragDrop.ts   (drag from palette → canvas)
    └── useAutoLayout.ts     (dagre auto-layout algorithm)

Deliverables in apps/web/components/inspector/:
├── ToolInspector.tsx        (main inspector panel)
├── ToolNameEditor.tsx       (edit tool name + description)
├── ParamEditor.tsx          (add/remove/edit input parameters)
│   - Param name, type (string/number/boolean/array/object)
│   - Required toggle, default value, description
├── OutputSchemaEditor.tsx   (define output shape)
├── AuthConfigPanel.tsx      (API key / OAuth2 / Bearer config)
├── AnnotationsPanel.tsx     (readOnly, destructive, idempotent hints)
└── ToolPreview.tsx          (JSON preview of tool definition)

Deliverables in apps/web/app/(dashboard)/projects/[id]/:
├── page.tsx                 (Tool Editor page — canvas + inspector)
└── layout.tsx               (editor layout with NavRail)

Interactions:
- Click node → inspector opens with tool config
- Double-click node → inline rename
- Drag handle → connect tools (chaining)
- Right-click → context menu (duplicate, delete, disable)
- Cmd+Z / Cmd+Shift+Z → undo/redo
- Minimap in corner for navigation
- Auto-layout button (dagre algorithm)

Acceptance:
- Can add/remove/edit tools visually on canvas
- Inspector shows all config for selected tool
- Drag-drop between groups works
- Undo/redo works
- Canvas state persists to project (API call on change)
```

### Sprint 2B: AI Pipeline Engine (Days 5-10)
**Agent: AI-PIPE**
**Depends on:** BACKEND complete
**Parallel with:** CANVAS

```
Task: Wire our 11 skills into the AI generation pipeline

Deliverables in packages/ai-pipeline/:
├── index.ts                 (pipeline orchestrator)
├── skills/
│   ├── loader.ts            (load skill SKILL.md files as system prompts)
│   └── registry.ts          (skill name → file path mapping for all 11)
├── services/
│   ├── analyzer.ts          (spec → AnalysisResult, uses mcp-api-analyzer)
│   ├── generator.ts         (config → ServerBundle, uses mcp-server-builder
│   │                          + mcp-server-development)
│   ├── designer.ts          (config → AppBundle, uses mcp-app-designer
│   │                          + mcp-apps-official + mcp-apps-merged)
│   ├── tester.ts            (server → TestResults, uses mcp-qa-tester)
│   └── deployer.ts          (bundle → DeployResult, uses mcp-deployment)
├── streaming/
│   ├── sse.ts               (Server-Sent Events helper for API routes)
│   └── parser.ts            (parse Claude streaming → structured events)
├── types.ts                 (AnalysisResult, ServerBundle, AppBundle, etc.)
└── cost-tracker.ts          (track tokens/cost per operation)

Deliverables in apps/web/app/api/:
├── analyze/route.ts         (POST — upload spec → stream analysis)
├── generate/route.ts        (POST — tool config → stream server code)
├── design/route.ts          (POST — app config → stream HTML apps)
├── test/route.ts            (POST — server → stream test results)
└── ws/route.ts              (WebSocket for real-time progress)

Skill Loading Strategy:
- All 11 SKILL.md files copied into packages/ai-pipeline/skills/data/
- Loaded at startup, cached in memory
- Composed into system prompts per operation:
  * Analyze: mcp-api-analyzer
  * Generate: mcp-server-builder + mcp-server-development
  * Design: mcp-app-designer + mcp-apps-official + mcp-apps-merged + mcp-apps-integration
  * Test: mcp-qa-tester
  * Deploy: mcp-deployment

Streaming UX:
- All endpoints use SSE (text/event-stream)
- Events: progress, tool_found, file_generated, test_result, deploy_step
- Frontend renders events in real-time (tools appearing, code streaming)

Acceptance:
- POST /api/analyze with OpenAPI spec → streams tool definitions
- POST /api/generate with tool config → streams TypeScript files
- POST /api/test with server code → streams test results
- Cost tracking logs tokens per call
- Error handling: retries, partial results, timeout recovery
```

### Sprint 2C: Spec Upload + Analysis Flow (Days 7-10)
**Agent: BACKEND** (continued)
**Depends on:** AI-PIPE started

```
Task: Build the spec upload and analysis review screens

Deliverables in apps/web/app/(dashboard)/projects/new/:
├── page.tsx                 (New Project wizard)
│   Step 1: Name + description
│   Step 2: Upload spec (URL paste, file upload, or pick template)
│   Step 3: Watch analysis (streaming — tools appear as found)
│   Step 4: Review tools (toggle on/off, quick edit names)
│   Step 5: → Redirect to Tool Editor

Deliverables in apps/web/components/:
├── spec-upload/
│   ├── SpecUploader.tsx     (URL input + file drop zone + template picker)
│   ├── AnalysisStream.tsx   (real-time analysis display — tools appearing)
│   ├── ToolReview.tsx       (checklist of discovered tools, toggles)
│   └── AnalysisProgress.tsx (animated progress bar + status messages)
└── project/
    ├── ProjectCard.tsx      (dashboard grid card)
    └── ProjectGrid.tsx      (responsive grid of project cards)

Acceptance:
- Can paste URL → analysis runs → tools discovered
- Can upload JSON/YAML file → same flow
- Can pick from template → pre-populated
- Streaming analysis shows tools appearing in real-time
- Can toggle tools before proceeding to editor
```

---

## Phase 3: Advanced Features (Weeks 3-4)

### Sprint 3A: MCP App Designer (Days 10-14)
**Agent: APP-DESIGNER**
**Depends on:** CANVAS + AI-PIPE complete

```
Task: Build the WYSIWYG MCP App designer

Deliverables in apps/web/components/app-designer/:
├── AppDesigner.tsx          (main 3-column layout: palette + preview + properties)
├── ComponentPalette.tsx     (draggable widget list)
│   Widgets: DataGrid, Chart (bar/line/pie), Form, CardList,
│            StatsRow, Timeline, Calendar, Map, DetailView
├── DesignCanvas.tsx         (drop zone + visual preview)
├── PropertyPanel.tsx        (selected widget properties)
├── DataBindingEditor.tsx    (wire widget fields → tool outputs)
├── PreviewToggle.tsx        (preview as: Claude / ChatGPT / VS Code)
├── widgets/
│   ├── DataGridWidget.tsx   (sortable table with columns config)
│   ├── ChartWidget.tsx      (chart type + data mapping)
│   ├── FormWidget.tsx       (input fields → tool inputs)
│   ├── CardListWidget.tsx   (repeating card template)
│   ├── StatsRowWidget.tsx   (3-4 stat boxes with icons)
│   ├── TimelineWidget.tsx   (vertical event timeline)
│   └── DetailViewWidget.tsx (key-value detail display)
└── hooks/
    ├── useAppState.ts       (Zustand: widgets, layout, bindings)
    └── useAppPreview.ts     (generate preview HTML from state)

Deliverables in apps/web/app/(dashboard)/projects/[id]/apps/:
├── page.tsx                 (App Designer page)
└── [appId]/page.tsx         (Individual app editor)

The Key Innovation:
- User drags DataGrid widget onto canvas
- Opens property panel → selects "get_contacts" tool as data source
- Maps columns: name→contactName, email→email, phone→phone
- Clicks "Preview" → sees live HTML rendering
- Clicks "Generate" → AI-PIPE uses mcp-app-designer + mcp-apps-official
  to produce production HTML with proper postMessage handling

Acceptance:
- Can drag widgets onto canvas
- Can bind widget data to tool outputs
- Preview renders styled HTML matching dark theme
- Generate produces valid MCP App HTML bundle
- Apps saved to project and database
```

### Sprint 3B: Deploy Pipeline (Days 10-14)
**Agent: DEPLOY**
**Parallel with:** APP-DESIGNER

```
Task: Build the one-click deployment system

Deliverables in packages/deploy-engine/:
├── index.ts                 (deploy orchestrator)
├── targets/
│   ├── mcpengine.ts         (Cloudflare Workers deploy via Wrangler API)
│   ├── npm.ts               (npm publish automation)
│   ├── docker.ts            (Dockerfile generation + build)
│   └── download.ts          (zip bundle for self-hosting)
├── compiler.ts              (TypeScript → bundled JS for Workers)
├── worker-template.ts       (Cloudflare Worker wrapper for MCP server)
└── dns.ts                   (add {slug}.mcpengine.run route)

Deliverables in apps/web/app/api/:
├── deploy/route.ts          (POST — trigger deployment, stream progress)
└── deployments/
    ├── route.ts             (GET — list user deployments)
    └── [id]/
        ├── route.ts         (GET status, DELETE stop)
        └── logs/route.ts    (GET deployment logs)

Deliverables in apps/web/app/(dashboard)/projects/[id]/deploy/:
└── page.tsx                 (Deploy screen with stepper UI)
    - Target selector (MCPEngine / npm / Docker / Download)
    - Progress stepper (Build → Test → Package → Deploy → Verify)
    - Live log viewer (streaming)
    - Success screen with URL + confetti
    - "Add to Claude Desktop" config snippet

Cloudflare Workers Flow:
1. Compile TypeScript server → single JS bundle
2. Wrap in Worker template (handles HTTP → MCP transport)
3. Upload via Cloudflare API: PUT /workers/scripts/{name}
4. Set environment variables (user's API keys, decrypted)
5. Add route: {slug}.mcpengine.run
6. Health check: GET {slug}.mcpengine.run/health
7. Done → return URL

Acceptance:
- Can deploy to MCPEngine hosting → get live URL
- Can download as zip
- Progress stepper animates through stages
- Confetti fires on success
- Deployed server responds to MCP tool/list
- "Add to Claude Desktop" shows correct JSON config
```

### Sprint 3C: Marketplace (Days 12-16)
**Agent: MARKETPLACE**
**Parallel with:** DEPLOY

```
Task: Build the template marketplace seeded with our 37 servers

Deliverables in apps/web/app/(dashboard)/marketplace/:
├── page.tsx                 (Marketplace browser)
│   - Search bar with full-text search
│   - Category filter tabs (CRM, eCommerce, HR, Marketing, etc.)
│   - Grid of template cards (name, tool count, app count, rating, fork count)
│   - Sort: popular / newest / most forked
├── [templateId]/page.tsx    (Template detail page)
│   - Name, description, author
│   - Tool list preview
│   - App screenshots
│   - [Fork to My Projects] button
│   - README rendered as markdown
└── publish/page.tsx         (Publish your project as template)

Deliverables in apps/web/app/api/marketplace/:
├── route.ts                 (GET list + search, POST publish)
├── [id]/route.ts            (GET detail)
├── [id]/fork/route.ts       (POST fork → create project from template)
└── categories/route.ts      (GET category list with counts)

Deliverables in packages/db/:
└── seed-marketplace.ts      (migrate 37 servers into marketplace)
    For each server:
    - Extract tool count from src/index.ts
    - Extract app count from app-ui/
    - Auto-categorize (CRM, eCommerce, etc.)
    - Set is_official = true
    - Generate preview metadata

Acceptance:
- Browse 37 official templates with categories
- Search by name/description
- Fork template → creates new project with tools pre-loaded
- Category counts are accurate
- Template detail shows tool list and README
```

---

## Phase 4: Integration & Polish (Week 4)

### Sprint 4A: Landing Page + Onboarding (Days 16-18)
**Agent: DESIGN-SYS** (returns)

```
Task: Build the marketing landing page and 60-second onboarding

Landing Page:
- Hero: gradient text headline, demo video embed, dual CTAs
- Value props: 3 cards (Upload → Customize → Deploy)
- Social proof: "Built on" logos (MCP, Anthropic, Cloudflare)
- Template showcase: 6 featured from marketplace
- Pricing: 4 tier cards from PRODUCT-SPEC.md
- Final CTA: email capture

Onboarding (per UX-DESIGN-SPEC.md):
- Welcome → paste spec → watch analysis → see tools → deploy → confetti
- 60-second target, minimal clicks
- Guided tooltip overlays for first-time users
```

### Sprint 4B: Testing Dashboard (Days 16-18)
**Agent: AI-PIPE** (returns)

```
Task: Build the in-app testing playground

Deliverables:
├── apps/web/app/(dashboard)/projects/[id]/test/
│   └── page.tsx             (Testing Dashboard)
└── apps/web/components/testing/
    ├── TestDashboard.tsx    (test layer selector + results)
    ├── TestRunner.tsx       (run button + streaming results)
    ├── TestResult.tsx       (pass/fail card with details)
    ├── ToolPlayground.tsx   (manual tool invocation — input JSON → run → see output)
    └── LLMSandbox.tsx       (chat with your MCP server through Claude)

Test layers available:
1. Protocol compliance (MCP Inspector equivalent)
2. Static analysis (TypeScript build check)
3. Tool invocation (run each tool with sample data)
4. Schema validation (input/output match)
```

### Sprint 4C: End-to-End Integration (Days 18-20)
**Agent: BUBA (me)**

```
Task: Wire everything together, fix integration issues, e2e test

- Connect all pages via NavRail navigation
- Ensure project state flows: create → analyze → edit → test → deploy
- Dashboard shows real project status
- Marketplace fork → editor works end-to-end
- Auth gates all authenticated routes
- Error boundaries on every page
- Loading states on every async operation
- Mobile responsive check (dashboard + marketplace)
- Performance: LCP < 2s, editor load < 3s
- Final deploy to Vercel
```

---

## Dependency Graph

```
Week 1:
  SCAFFOLD ─────────┐
                     ├──→ DESIGN-SYS (components)
                     ├──→ BACKEND (DB + auth + API)
                     │
Week 2:              │
  DESIGN-SYS done ───┤
  BACKEND done ──────┼──→ CANVAS (tool editor)
                     ├──→ AI-PIPE (skill engine)
                     └──→ BACKEND cont. (spec upload)
                     
Week 3:
  CANVAS done ───────┤
  AI-PIPE done ──────┼──→ APP-DESIGNER (WYSIWYG)
                     ├──→ DEPLOY (hosting pipeline)
                     └──→ MARKETPLACE (templates)

Week 4:
  All features ──────┼──→ DESIGN-SYS (landing + onboarding)
                     ├──→ AI-PIPE (testing dashboard)
                     └──→ BUBA (integration + polish)
```

---

## Agent Communication Protocol

### How Agents Share Work

1. **All code goes to:** `mcpengine-studio/` workspace directory
2. **Each agent writes to its designated directories** (no conflicts)
3. **Shared interfaces** defined in `packages/ai-pipeline/types.ts` — BACKEND writes first, others import
4. **Buba reviews** every deliverable before next agent starts dependent work
5. **Integration issues** flagged back to Buba for resolution

### Agent Task Format

Each agent receives:
```
TASK: [specific deliverable]
WRITE TO: [exact file paths]
DEPENDS ON: [files that must exist first]
INTERFACES: [TypeScript types to import/implement]
ACCEPTANCE: [how Buba will verify completion]
REFERENCE: [which docs to read — PRODUCT-SPEC.md, TECHNICAL-ARCHITECTURE.md, etc.]
```

### Quality Gates

| Gate | Check | Blocker? |
|------|-------|----------|
| TypeScript compiles | `pnpm build` passes | Yes |
| No lint errors | `pnpm lint` passes | Yes |
| Component renders | Visual check in browser | Yes |
| API endpoint works | curl test returns expected data | Yes |
| Matches design spec | Colors/spacing match UX doc | Soft |
| Accessible | Focus rings, aria labels present | Soft |

---

## Risk Mitigations

| Risk | Mitigation |
|------|-----------|
| Agent timeout (5 min) | Break tasks into smaller chunks — 1-3 files per agent call, not entire features |
| Integration conflicts | Shared types defined upfront, strict directory ownership |
| Scope creep | V1 = spec upload + tool editor + deploy ONLY. No apps designer in V1. |
| API key costs | Use Sonnet for generation (not Opus) — $0.22/pipeline run |
| Agent writes bad code | Buba reviews + runs TypeScript compiler before accepting |
| Feature doesn't work e2e | Integration sprint (Week 4) dedicated to wiring + fixing |

---

## V1 MVP Definition (Ship in 4 Weeks)

**In scope:**
- ✅ Landing page + sign up
- ✅ Dashboard with project grid
- ✅ Spec upload (URL paste, file upload)
- ✅ AI analysis (streaming tool discovery)
- ✅ Visual tool editor (React Flow canvas)
- ✅ Tool inspector (params, auth, annotations)
- ✅ Deploy to MCPEngine hosting (Cloudflare Workers)
- ✅ Download as zip
- ✅ Marketplace (browse + fork 37 templates)
- ✅ Basic testing (tool invocation playground)

**V2 (Weeks 5-8):**
- MCP App Designer (WYSIWYG)
- npm publish
- Docker export
- LLM sandbox testing
- User-submitted marketplace templates

**V3 (Months 3-6):**
- Team collaboration (multiplayer canvas)
- Enterprise SSO
- Stripe billing
- Custom domains for hosted servers
- Smithery auto-publish

---

## Execution: Day-by-Day Schedule

### Week 1
| Day | Agent | Task | Hours |
|-----|-------|------|-------|
| Mon | SCAFFOLD | Bootstrap monorepo, Next.js, Tailwind, Turbo | 2-3h |
| Mon-Tue | BACKEND | DB schema, Drizzle, migrations, Clerk auth | 3-4h |
| Tue-Wed | DESIGN-SYS | Component library (all 13+ components) | 4-5h |
| Wed-Thu | BACKEND | Projects CRUD API, spec upload endpoint | 2-3h |
| Thu-Fri | DESIGN-SYS | AppShell layout, NavRail, Inspector, themes | 2-3h |

### Week 2
| Day | Agent | Task | Hours |
|-----|-------|------|-------|
| Mon-Tue | AI-PIPE | Skill loader, analyzer service, SSE streaming | 3-4h |
| Mon-Wed | CANVAS | React Flow setup, ToolNode, GroupNode, canvas state | 4-5h |
| Wed-Thu | AI-PIPE | Generator service, streaming file output | 3-4h |
| Thu-Fri | CANVAS | Inspector panels (params, auth, annotations) | 3-4h |
| Fri | BACKEND | Spec upload UI, analysis streaming page | 2-3h |

### Week 3
| Day | Agent | Task | Hours |
|-----|-------|------|-------|
| Mon-Tue | DEPLOY | Cloudflare Workers pipeline, compiler, DNS | 3-4h |
| Mon-Tue | MARKETPLACE | DB seed script, browse page, search | 3-4h |
| Wed-Thu | DEPLOY | Deploy UI (stepper, logs, confetti) | 2-3h |
| Wed-Thu | MARKETPLACE | Template detail, fork flow, categories | 2-3h |
| Fri | AI-PIPE | Testing playground (tool invocation) | 2-3h |

### Week 4
| Day | Agent | Task | Hours |
|-----|-------|------|-------|
| Mon | DESIGN-SYS | Landing page, pricing section | 2-3h |
| Mon-Tue | DESIGN-SYS | Onboarding flow (60-second wizard) | 2-3h |
| Tue-Wed | BUBA | Wire all pages, NavRail routing, project flow | 3-4h |
| Wed-Thu | BUBA | E2E testing, bug fixes, error boundaries | 3-4h |
| Fri | BUBA | Deploy to Vercel, final check, launch prep | 2-3h |

---

## Launch Checklist

- [ ] Landing page live at mcpengine.com
- [ ] Sign up / sign in working
- [ ] Can create project from spec URL
- [ ] AI analysis streams tool discovery
- [ ] Tool editor canvas fully functional
- [ ] Inspector edits persist
- [ ] Deploy to MCPEngine hosting works
- [ ] Download zip works
- [ ] 37 templates browseable in marketplace
- [ ] Fork template → edit → deploy flow works
- [ ] Mobile-friendly dashboard + marketplace
- [ ] Error states on all pages
- [ ] Loading states on all async ops
- [ ] Vercel deployment stable
- [ ] Domain configured
- [ ] Analytics (Vercel Analytics or PostHog)

**Ship it.** ᕕ( ᐛ )ᕗ

---

*Last updated: February 6, 2026*