702 lines
27 KiB
Markdown
702 lines
27 KiB
Markdown
# 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*
|