27 KiB
27 KiB
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
- All code goes to:
mcpengine-studio/workspace directory - Each agent writes to its designated directories (no conflicts)
- Shared interfaces defined in
packages/ai-pipeline/types.ts— BACKEND writes first, others import - Buba reviews every deliverable before next agent starts dependent work
- 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