jake/clawdbot-workspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
clawdbot-workspace/jakes-learning-guide.md

696 lines
50 KiB
Markdown
Raw Blame History

# Jake Shore's Tech Stack & Business Operations — Complete Learning Guide
> **A comprehensive syllabus for mastering full-stack AI product development, MCP protocol engineering, business automation, and creative tech.**
---
## 1. Executive Summary
Jake Shore is a full-stack developer and technical entrepreneur who builds AI-powered products at the intersection of developer tooling, business automation, and creative technology. His flagship work includes **30+ MCP (Model Context Protocol) servers** spanning CRM, advertising, communications, and workflow automation platforms — totaling ~240 tools with rich visual app interfaces. His centerpiece product, **LocalBosses**, is a Next.js application with a Discord-like UI that embeds MCP apps via iframe with intent-based smart filtering, powered by Anthropic's Claude API with real-time streaming responses. He operates across multiple verticals: EdTech (The Burton Method LSAT platform), commercial real estate CRM (CRE Sync/Real Connect V2), music technology (Remix Sniper Discord bot, bass music production, artist management), and market intelligence (competitive analysis across 30 companies, 10 SMB verticals).
Jake's technical range is unusually broad. He writes production TypeScript across the entire stack — from Three.js 3D visualizations and Remotion video generation to Puppeteer-based web scraping with anti-detection measures, n8n/Make.com workflow automation, and Docker containerized deployments on Vercel and Railway. His business acumen matches his technical depth: he builds revenue models, pricing strategies, and probability-based investment frameworks alongside the code. He leverages Clawdbot (an AI assistant framework with skills, memory, cron, and multi-channel support) as his operational backbone, and integrates tools like Google Veo 3, ffmpeg, and Supabase/Postgres into cohesive systems. Understanding Jake's work means understanding how a single developer can architect, build, ship, and monetize sophisticated AI-native products across wildly different domains.
---
## 2. Syllabus
---
### Module 1: Foundations — TypeScript, Node.js, React/Next.js, Git
**Learning Objectives:**
- Write fluent, type-safe TypeScript with generics, utility types, discriminated unions, and module patterns
- Build Node.js applications with ES modules, async patterns, and the standard library
- Create React applications with hooks, context, server components, and the App Router in Next.js
- Use Git professionally (branching strategies, rebasing, monorepo management)
**Key Concepts:**
- TypeScript: `type` vs `interface`, generics (`<T>`), `Zod` for runtime validation, `tsconfig.json` configuration for Node + browser targets
- Node.js: Event loop, streams, `child_process`, ES module resolution (`"type": "module"`), environment variables
- React: Component lifecycle, `useState`/`useEffect`/`useRef`/`useCallback`, Server Components vs Client Components, Suspense boundaries
- Next.js: App Router, `page.tsx`/`layout.tsx`/`loading.tsx`, Server Actions, API routes (`route.ts`), middleware, ISR/SSG/SSR rendering strategies
- Git: Feature branches, interactive rebase, `.gitignore`, monorepo tools (turborepo/nx)
**Estimated Time:** 4-6 weeks (if starting from intermediate JavaScript)
---
### Module 2: AI & LLM Integration — Anthropic API, Vercel AI SDK, Prompt Engineering
**Learning Objectives:**
- Call the Anthropic Messages API directly and via the Vercel AI SDK
- Design system prompts that control AI behavior, persona, and output format
- Implement streaming responses with proper UI feedback
- Build tool-use flows where the LLM calls functions and you return results
- Understand token economics, context windows, and model selection
**Key Concepts:**
- Anthropic Messages API: `/v1/messages`, `system` / `user` / `assistant` roles, `max_tokens`, `temperature`, tool definitions
- Vercel AI SDK: `useChat` hook, `streamText`, `generateText`, `tool` definitions, `onToolCall` handlers
- Prompt Engineering: XML-structured prompts, few-shot examples, chain-of-thought, system prompt architecture for multi-tool routing
- Streaming: Server-Sent Events (SSE), `ReadableStream`, chunked transfer encoding, UI state management during streams
- Tool Use: JSON Schema for tool input definitions, multi-turn tool-use conversations, parallel tool calls
**Estimated Time:** 2-3 weeks
---
### Module 3: MCP Protocol Deep Dive — Servers, Tools, Apps, SDK
**Learning Objectives:**
- Understand the MCP architecture: hosts, clients, servers, and the JSON-RPC transport layer
- Build an MCP server from scratch with tools, resources, and prompts
- Create rich visual apps using `structuredContent` HTML renders
- Integrate with the MCP Apps SDK (JSON-RPC postMessage protocol between host + iframe)
- Implement lazy-loaded tool packs for large servers (50+ tools)
- Design intent-based smart filtering for app surfacing
**Key Concepts:**
- MCP Protocol: JSON-RPC 2.0 over stdio/SSE, `tools/list`, `tools/call`, `resources/list`, `resources/read`, `prompts/list`
- Server Architecture: Tool definitions with `inputSchema` (JSON Schema), handler functions, error handling
- Visual Apps: `structuredContent` with HTML/CSS renders, responsive layouts, interactive dashboards
- Apps SDK: `window.postMessage` protocol, iframe sandboxing, bidirectional communication between host and embedded apps
- Lazy Loading: Tool pack registration, on-demand loading, memory-efficient server design for 50+ tool servers
- Real-world patterns: OAuth token forwarding, pagination across APIs, rate limit handling, webhook registration via tools
**Estimated Time:** 3-4 weeks
---
### Module 4: CRM & Business Automation — GoHighLevel, n8n, Make.com, Webhooks
**Learning Objectives:**
- Navigate the GoHighLevel API (OAuth2, sub-accounts, contacts, opportunities, pipelines)
- Build n8n workflows that connect multiple SaaS tools with conditional logic
- Design webhook architectures for real-time event processing
- Implement CRM automation flows: lead capture → qualification → assignment → follow-up
- Build onboarding flows with conditional branching (Supabase)
**Key Concepts:**
- GoHighLevel: OAuth2 app marketplace flow, sub-account architecture, contact/opportunity CRUD, workflow triggers, custom fields/values
- n8n: Nodes, triggers, expressions, error handling, sub-workflows, credential management, self-hosting
- Make.com: Scenarios, modules, routers, iterators, data stores, scheduling
- Webhooks: Inbound webhook receivers (Express/Next.js API routes), outbound webhook registration, HMAC signature verification, retry logic
- CRM Patterns: Tagging systems, KPI tracking, dialer integration (CallTools), calendar booking (Calendly), document generation (LOI drafting)
**Estimated Time:** 3-4 weeks
---
### Module 5: Advertising & Marketing Tech — Google Ads API, Meta Marketing API, Search Console API
**Learning Objectives:**
- Authenticate with and query the Google Ads API (campaigns, ad groups, keywords, reporting)
- Use the Meta Marketing API (campaigns, ad sets, ads, insights, audiences)
- Pull search analytics from Google Search Console API (queries, pages, impressions, clicks, CTR, position)
- Build dashboards and reporting tools on top of these APIs
- Understand the advertising data model (campaign → ad group/ad set → ad → creative)
**Key Concepts:**
- Google Ads API: OAuth2 + developer token, GAQL (Google Ads Query Language), resource hierarchy, change history, recommendations API
- Meta Marketing API: Access tokens (system user vs user), campaign structure, Ads Insights API, custom audiences, pixel events
- Google Search Console: Search Analytics API, URL inspection API, sitemaps API, dimension/filter combinations
- Reporting: Date range aggregation, metric calculations (ROAS, CPA, CTR), trend analysis, anomaly detection
- Visual Dashboards: HTML/CSS renders for campaign performance, keyword analysis views, audience breakdowns
**Estimated Time:** 3-4 weeks
---
### Module 6: Full-Stack Product Development — Next.js Apps, Streaming, iframe Embedding
**Learning Objectives:**
- Architect a production Next.js application with a Discord-like UI (channel sidebar, server sidebar, chat interface)
- Implement real-time streaming AI responses with proper loading states
- Embed MCP apps via iframes with secure postMessage communication
- Design intent-based smart filtering (surfacing the right app based on conversation context)
- Build channel-specific system prompts and tool routing
**Key Concepts:**
- Layout Architecture: Nested layouts, sidebar navigation, responsive design, CSS Grid/Flexbox for Discord-style layouts
- Streaming UI: `useChat` with streaming, message state management, auto-scroll, markdown rendering, code highlighting
- iframe Embedding: `<iframe sandbox>` attributes, `postMessage` API, origin validation, bidirectional data flow
- Smart Filtering: Intent classification from conversation, app metadata matching, relevance scoring, dynamic app panel
- Multi-channel Architecture: Channel models in database, per-channel system prompts, tool routing tables, context isolation
- Auth & Data: Supabase Auth, Row Level Security (RLS), real-time subscriptions, optimistic updates
**Estimated Time:** 4-6 weeks
---
### Module 7: Data & Scraping — Puppeteer, Anti-Detection, API Recon, Postgres
**Learning Objectives:**
- Build web scrapers with Puppeteer and Playwright
- Implement anti-detection measures (stealth plugins, fingerprint randomization, session management)
- Perform API reconnaissance (intercepting network requests, reverse-engineering endpoints)
- Design Postgres schemas for scraped data storage and tracking
- Handle rate limits, pagination, and error recovery in scrapers
**Key Concepts:**
- Puppeteer/Playwright: Page navigation, element selectors, `waitForSelector`, screenshot/PDF generation, request interception
- Anti-Detection: `puppeteer-extra-plugin-stealth`, user-agent rotation, viewport randomization, cookie management, proxy rotation
- Session Management: Login persistence, cookie jars, rate limiting (e.g., 50/day caps), scheduling with cron
- API Recon: Browser DevTools network tab analysis, header reconstruction, authentication token extraction, endpoint mapping
- Postgres: Schema design for scraped entities, `UPSERT` patterns, indexing for search, `pg` / `drizzle-orm` / `prisma` usage
- Scoring Algorithms: Multi-factor scoring (velocity, signal, viral potential, saturation — like Remix Sniper's algorithm)
**Estimated Time:** 3-4 weeks
---
### Module 8: Creative Tech — Three.js, Remotion, Music Production, Animation
**Learning Objectives:**
- Build interactive 3D visualizations with Three.js (scenes, cameras, geometries, materials, animation loops)
- Create programmatic videos with Remotion (compositions, sequences, spring animations)
- Understand music production concepts relevant to tech (Ableton, Serum, audio processing)
- Build animated marketing content and explainer videos
**Key Concepts:**
- Three.js: Scene graph, PerspectiveCamera, meshes (geometry + material), OrbitControls, raycasting, particle systems, shaders (GLSL)
- Interactive Visualizations: Data-driven 3D scenes (genre universe), click interactions, camera transitions, responsive WebGL canvas
- Remotion: `<Composition>`, `<Sequence>`, `useCurrentFrame()`, `interpolate()`, `spring()`, rendering to MP4/GIF
- Camera Animation: Dolly movements, easing functions, keyframe interpolation, cinematic camera paths
- Sprite Studio: Frame-by-frame animation, sprite sheets, animated explainer video production
- Audio/Video Processing: ffmpeg for transcoding, format conversion, audio extraction, thumbnail generation
- Music Tech: DAW concepts (Ableton), synthesizer programming (Serum), waveform manipulation, MIDI
**Estimated Time:** 3-4 weeks
---
### Module 9: Business Intelligence — Competitive Analysis, Pricing, Revenue Modeling
**Learning Objectives:**
- Conduct structured competitive analysis across a market landscape
- Build revenue projection models with multiple pricing scenarios
- Design intake forms and dashboards for market intelligence
- Analyze SMB verticals for product-market fit
- Build probability models for investment decisions
**Key Concepts:**
- Competitive Analysis: Feature matrices, pricing comparisons, market positioning maps, SWOT analysis, moat identification
- Revenue Modeling: Bottom-up vs top-down projections, cohort analysis, churn modeling, LTV/CAC calculations
- Pricing Strategy: Value-based pricing, tiered pricing design, freemium conversion modeling, price sensitivity analysis
- Market Research: TAM/SAM/SOM estimation, vertical-specific research frameworks, customer interview synthesis
- SMB Intelligence: 10-vertical research methodology, vertical-specific pain points, technology adoption patterns
- Probability Models: Expected value calculations, scenario analysis, Monte Carlo basics, catalyst tracking (crypto/macro)
- Dashboards: Building HTML/CSS visual dashboards for market intel, competitor tracking over time
**Estimated Time:** 2-3 weeks
---
### Module 10: Infrastructure & DevOps — Docker, Vercel, Railway, Multi-Service Architecture
**Learning Objectives:**
- Containerize Node.js/Next.js applications with Docker
- Deploy to Vercel (frontend/serverless) and Railway (backend/databases/persistent services)
- Set up cron jobs for automated workflows (daily scans, weekly reports)
- Design multi-service architectures where MCP servers, web apps, bots, and databases coordinate
- Manage environment variables, secrets, and deployment pipelines
**Key Concepts:**
- Docker: `Dockerfile` (multi-stage builds), `docker-compose.yml`, volume mounts, networking between containers, health checks
- Vercel: `vercel.json` configuration, serverless function limits, edge functions, preview deployments, environment variables
- Railway: Service deployment, Postgres provisioning, persistent storage, custom domains, logging, cost management
- Cron & Scheduling: Node-cron, system crontab, Railway cron services, n8n scheduled workflows
- Multi-Service Architecture: Service communication patterns (HTTP, webhooks, queues), shared databases, API gateways
- Clawdbot Framework: Skills system, memory management, cron tasks, multi-channel support (Discord, etc.)
- CI/CD: GitHub Actions basics, automated testing, deployment pipelines, branch protection
**Estimated Time:** 2-3 weeks
---
## 3. YouTube Resources
### Module 1: Foundations
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| TypeScript in 100 Seconds | Fireship | https://www.youtube.com/watch?v=zQnBQ4tB3ZA |
| React in 100 Seconds | Fireship | https://www.youtube.com/watch?v=Tn6-PIqc4UM |
| Next.js in 100 Seconds + Full Tutorial | Fireship | https://www.youtube.com/watch?v=Sklc_fQBmcs |
| Node.js Crash Course 2024 | Traversy Media | https://www.youtube.com/watch?v=32M1al-Y6Ag |
| Express.js Crash Course | Traversy Media | https://www.youtube.com/watch?v=CnH3kAXSrmU |
| Advanced Next.js Patterns | Jack Herrington | https://www.youtube.com/@jherr |
| ProNextJS Course (free tutorials) | Jack Herrington | https://www.pronextjs.dev/tutorials |
| TypeScript Full Stack (opinions + depth) | Theo - t3.gg | https://www.youtube.com/c/TheoBrowne1017 |
| Fireship Channel (all 100 Seconds series) | Fireship | https://www.youtube.com/c/Fireship |
### Module 2: AI & LLM Integration
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| Claude AI Prompt Engineering Guide (2025) | Skill Leap AI | https://www.youtube.com/watch?v=dG2iFVKdyhs |
| Build AI Chatbot with Vercel AI SDK | NestJS + Next.js tutorial | https://www.youtube.com/watch?v=ad_g8ajmFy0 |
| Anthropic's Interactive Prompt Engineering Tutorial | Anthropic (GitHub) | https://github.com/anthropics/prompt-eng-interactive-tutorial |
| AI Tools for Developers | Matt Wolfe | https://www.youtube.com/@mreflow |
| Anthropic Academy: Build with Claude | Anthropic | https://www.anthropic.com/learn/build-with-claude |
### Module 3: MCP Protocol Deep Dive
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| MCP Explained in 20 Minutes | Shaw Talebi | https://www.youtube.com/watch?v=N3vHJcHBS-w |
| MCP Clearly Explained (Why It Matters) | Greg Isenberg | https://www.youtube.com/watch?v=7j_NE6Pjv-E |
| You Need to Learn MCP RIGHT NOW | TechWorld with Nana | https://www.youtube.com/watch?v=GuTcle5edjk |
| MCP End-to-End Course 2025 (Playlist) | Sunny Savita | https://www.youtube.com/playlist?list=PL6tW9BrhiPTCDteflzehKS6Cn3a79-iCs |
| Anthropic's Introduction to MCP (Official Course) | Anthropic | https://anthropic.skilljar.com/introduction-to-model-context-protocol |
| Build an MCP Server (Official Docs) | MCP | https://modelcontextprotocol.io/docs/develop/build-server |
### Module 4: CRM & Business Automation
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| GoHighLevel SaaS Mode Setup (2024) | GHL Tutorials | https://www.youtube.com/watch?v=5F9spSSExoI |
| GoHighLevel Complete Setup Tutorial (2025) | Keaton Walker | https://www.youtube.com/watch?v=eQudUY-w3vg |
| GoHighLevel Calendars Automation | Dom Bavaro | https://www.youtube.com/watch?v=9sT2Nr6t7Bo |
| n8n Complete Beginner Course (2025) | n8n Official (Playlist) | https://www.youtube.com/playlist?list=PLYLEmQupIzOEEvgtBduSgYLaug7LKqlSo |
| n8n Quick Start Tutorial (2025) | The Flowgrammer | https://www.youtube.com/watch?v=4cQWJViybAQ |
| n8n Full Course for Beginners | freeCodeCamp / Gavin Lon | https://www.youtube.com/watch?v=GIZzRGYpCbM |
### Module 5: Advertising & Marketing Tech
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| Google Ads API Video Guides (Official) | Google Ads Developers | https://www.youtube.com/c/GoogleAdsDevelopers |
| Google Ads API Video Catalog | Google for Developers | https://developers.google.com/google-ads/api/videos/catalog |
| Matt Wolfe - Best AI Tools for Marketers | Matt Wolfe | https://www.youtube.com/watch?v=DeeVKUuEv6Y |
### Module 6: Full-Stack Product Development
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| Build an AI Chatbot with Streaming | Vercel AI SDK tutorial | https://www.youtube.com/watch?v=ad_g8ajmFy0 |
| Supabase Full-Stack Course | Fireship / Supaship | https://fireship.io/courses/supabase/ |
| Supabase Official Channel | Supabase | https://www.youtube.com/c/supabase |
| Advanced React/Next.js Patterns | Jack Herrington | https://www.youtube.com/@jherr |
| Next.js AI Chatbot Template | Vercel | https://vercel.com/templates/next.js/nextjs-ai-chatbot |
### Module 7: Data & Scraping
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| Puppeteer Anti-Detection Scraping | Coding with Robby | https://www.youtube.com/watch?v=9zwyfrVv3hg |
| Puppeteer Stealth Guide | ScrapingBee Blog | https://www.scrapingbee.com/blog/puppeteer-stealth-tutorial-with-examples/ |
### Module 8: Creative Tech
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| Three.js Journey (Full Course) | Bruno Simon | https://threejs-journey.com/ |
| Three.js + Prismic Tutorial | Bruno Simon | https://www.youtube.com/watch?v=tVr89249gwM |
| Three.js Learning Path 2025 | threejsresources.com | https://threejsresources.com/blog/three-js-learning-path-from-zero-to-mastery |
| Remotion - Create Videos with React | Jonny Burger (creator) | https://www.youtube.com/watch?v=gwlDorikqgY |
| Building Videos with React & Remotion | Maximilian Schwarzmüller | https://www.youtube.com/watch?v=qlYhdO11EfQ |
### Module 10: Infrastructure & DevOps
| Topic | Video/Channel | URL |
|-------|--------------|-----|
| Docker in 100 Seconds | Fireship | https://www.youtube.com/watch?v=Gjnup-PuquQ |
| Kubernetes in 100 Seconds | Fireship | https://www.youtube.com/watch?v=PziYflu8cB8 |
| Railway Quick Start | Railway Docs | https://docs.railway.com/quick-start |
---
## 4. Articles & Documentation
### Core Platform Docs
| Resource | URL |
|----------|-----|
| **MCP Protocol Specification** | https://modelcontextprotocol.io/ |
| **MCP — Build a Server (Official Tutorial)** | https://modelcontextprotocol.io/docs/develop/build-server |
| **MCP Reference Servers (GitHub)** | https://github.com/modelcontextprotocol/servers |
| **Anthropic API Docs (Messages API)** | https://docs.anthropic.com/en/api/messages |
| **Anthropic Prompt Engineering Guide** | https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/overview |
| **Anthropic Prompt Engineering Tutorial (Interactive)** | https://github.com/anthropics/prompt-eng-interactive-tutorial |
| **Anthropic Academy** | https://www.anthropic.com/learn/build-with-claude |
| **Vercel AI SDK Docs** | https://ai-sdk.dev/docs/introduction |
| **Next.js Documentation** | https://nextjs.org/docs |
| **React Documentation** | https://react.dev/ |
| **TypeScript Handbook** | https://www.typescriptlang.org/docs/handbook/ |
| **Node.js Documentation** | https://nodejs.org/docs/latest/api/ |
### Automation & CRM
| Resource | URL |
|----------|-----|
| **GoHighLevel API Docs** | https://marketplace.gohighlevel.com/docs/ |
| **GoHighLevel Support Portal** | https://help.gohighlevel.com/support/solutions/articles/48001060529-highlevel-api |
| **n8n Documentation** | https://docs.n8n.io/ |
| **Make.com Documentation** | https://www.make.com/en/help |
### Advertising APIs
| Resource | URL |
|----------|-----|
| **Google Ads API — Getting Started** | https://developers.google.com/google-ads/api/docs/get-started/introduction |
| **Google Ads API — GAQL Reference** | https://developers.google.com/google-ads/api/docs/query/overview |
| **Meta Marketing API — Getting Started** | https://developers.facebook.com/docs/marketing-api/get-started/ |
| **Meta Marketing API — Insights** | https://developers.facebook.com/docs/marketing-api/insights/ |
| **Google Search Console API** | https://developers.google.com/webmaster-tools |
| **Google Search Console API — Getting Started** | https://developers.google.com/webmaster-tools/v1/getting-started |
### Creative Tech
| Resource | URL |
|----------|-----|
| **Three.js Documentation** | https://threejs.org/docs/ |
| **Three.js Examples** | https://threejs.org/examples/ |
| **Three.js Journey (Course)** | https://threejs-journey.com/ |
| **Remotion Documentation** | https://www.remotion.dev/docs/ |
| **Remotion GitHub** | https://github.com/remotion-dev/remotion |
### Data & Infrastructure
| Resource | URL |
|----------|-----|
| **Supabase Documentation** | https://supabase.com/docs |
| **PostgreSQL Documentation** | https://www.postgresql.org/docs/ |
| **Puppeteer Documentation** | https://pptr.dev/ |
| **Playwright Documentation** | https://playwright.dev/docs/intro |
| **Puppeteer Stealth Plugin** | https://github.com/berstend/puppeteer-extra/tree/master/packages/puppeteer-extra-plugin-stealth |
| **Docker Documentation** | https://docs.docker.com/ |
| **Vercel Documentation** | https://vercel.com/docs |
| **Railway Documentation** | https://docs.railway.com/ |
### Business & Strategy
| Resource | URL |
|----------|-----|
| **Anthropic's MCP Announcement** | https://www.anthropic.com/news/model-context-protocol |
| **Streaming AI Responses in Next.js (LogRocket)** | https://blog.logrocket.com/nextjs-vercel-ai-sdk-streaming/ |
| **Puppeteer Web Scraping Guide 2025** | https://www.browserless.io/blog/ultimate-guide-to-puppeteer-web-scraping-in-2025 |
---
## 5. AI Rabbit Hole Prompts
### Module 1: Foundations
1. **"Explain TypeScript's type system in depth. Cover generics with constraints (`<T extends Base>`), conditional types (`T extends U ? X : Y`), mapped types, template literal types, and the `infer` keyword. Give me real-world examples of each that I'd actually use in a Next.js application."**
2. **"Walk me through the Node.js event loop in detail. Explain the phases (timers, pending callbacks, poll, check, close), how `process.nextTick` and `queueMicrotask` fit in, and how this affects async/await patterns. Show me common mistakes developers make with the event loop."**
3. **"Explain React Server Components vs Client Components in Next.js App Router. When should I use `'use client'`? How do Server Actions work? Walk me through the rendering lifecycle of a page that has both server and client components, including how data flows between them."**
4. **"I'm building a Next.js 14+ app with the App Router. Explain the file-based routing system in depth: `page.tsx`, `layout.tsx`, `loading.tsx`, `error.tsx`, `not-found.tsx`, route groups `(group)`, parallel routes `@slot`, and intercepting routes `(.)`. Give me a real example of a complex routing setup."**
5. **"Explain ES Modules in Node.js vs CommonJS. How does `'type': 'module'` in package.json work? What are the gotchas with `__dirname`, `require`, and interop between ESM and CJS? How should I configure `tsconfig.json` for a Node.js project using ES Modules with TypeScript?"**
6. **"Design a TypeScript project structure for a monorepo that has: a Next.js frontend, a Node.js MCP server, shared types, and a Postgres database layer. Explain the directory structure, `tsconfig` setup for each package, and how to share types between frontend and backend."**
7. **"Explain Zod for runtime validation in TypeScript. How does `z.infer<typeof schema>` work? Show me patterns for validating API inputs, environment variables, and webhook payloads. How does Zod compare to `io-ts` and `yup`?"**
### Module 2: AI & LLM Integration
1. **"Explain the Anthropic Messages API in detail. What are the fields in a messages request (`model`, `max_tokens`, `system`, `messages`, `tools`, `temperature`)? Walk me through the response format, including streaming with Server-Sent Events. Show me the TypeScript types for the request and response."**
2. **"I'm using the Vercel AI SDK with Next.js and Anthropic's Claude. Explain how `useChat` works on the client side, how `streamText` works on the server side, and how the two connect. Show me the complete code for a streaming chat interface with error handling and loading states."**
3. **"Explain tool use with Claude in depth. How do I define tools with JSON Schema? Walk me through the multi-turn conversation flow where Claude calls a tool, I return the result, and Claude uses it in its response. What are `tool_use` and `tool_result` content blocks?"**
4. **"I'm designing system prompts for a multi-channel chat application where different channels have different tools available. Explain how to architect system prompts that: (1) define the AI's persona, (2) list available tools contextually, (3) handle tool routing, and (4) maintain conversation context. Give me a real example."**
5. **"Explain prompt engineering best practices for Claude specifically. Cover XML-structured prompts, giving Claude a role, prefilling assistant responses, using examples (few-shot), chain-of-thought reasoning, and how to handle long context windows effectively. What are Claude-specific tricks that don't work as well with GPT?"**
6. **"Compare the Vercel AI SDK, LangChain, and calling the Anthropic API directly. When should I use each? What are the tradeoffs in terms of abstraction, flexibility, streaming support, and tool use? I'm building a production chat app — which approach gives me the most control?"**
7. **"Explain token economics for building AI-powered products. How do I estimate costs for a chat application with streaming responses? What's the difference between input and output tokens? How do I optimize prompts to reduce token usage without losing quality? What's the cost difference between Claude Sonnet and Opus?"**
### Module 3: MCP Protocol Deep Dive
1. **"Explain the MCP protocol architecture. How does a host communicate with an MCP server? Walk me through the JSON-RPC message flow for listing tools and calling a tool, including the TypeScript types involved. What are the three primitives (tools, resources, prompts) and when should I use each?"**
2. **"I want to build an MCP server in TypeScript that wraps a REST API (like ServiceTitan or Gusto). Walk me through the complete setup: project structure, the `@modelcontextprotocol/sdk` package, defining tools with `inputSchema`, implementing handlers, and testing with the MCP inspector. Give me working code."**
3. **"Explain MCP's `structuredContent` for rich UI rendering. How do I return HTML/CSS in tool responses that the host can render as visual apps? Walk me through building a dashboard-style visual app that displays data in a styled HTML layout. What are the security considerations?"**
4. **"I'm building a large MCP server with 50+ tools (like a GoHighLevel integration with 65 apps). How should I organize the code? Explain patterns for: tool registration, lazy-loaded tool packs, category-based organization, shared utilities, and keeping the server performant."**
5. **"Explain the MCP Apps SDK and JSON-RPC postMessage protocol. How does a host application embed MCP apps in iframes and communicate with them? Walk me through the bidirectional message flow, security model (origin validation, sandboxing), and how to build an interactive app that sends data back to the host."**
6. **"I need to build intent-based smart filtering for MCP apps. When a user is chatting with an AI, I want to automatically surface the most relevant visual app (e.g., show a 'Campaign Dashboard' app when discussing Google Ads performance). Explain how to design this system: intent classification, app metadata, relevance scoring, and the UI pattern."**
7. **"Walk me through building an MCP server for the Twilio API with 54 tools and 23 visual apps. How do I handle: OAuth token management, SMS/call operations, webhook configuration, usage analytics dashboards, and conversation history views? Focus on the architecture decisions."**
8. **"Compare MCP to other AI-tool protocols (OpenAI's function calling, LangChain tools, custom tool systems). What makes MCP different? Why would I build an MCP server instead of a custom API? What are the advantages of the standardized protocol?"**
### Module 4: CRM & Business Automation
1. **"I'm building a GoHighLevel integration. Explain the OAuth2 flow for GHL's API, how sub-accounts work, and how to structure webhooks for real-time contact updates. What's the difference between agency-level and sub-account-level API access?"**
2. **"Design an n8n workflow that: (1) receives a webhook from GoHighLevel when a new contact is created, (2) enriches the contact data by calling an external API, (3) creates a task in Trello, (4) sends a Slack notification, and (5) updates the contact in GHL with the enriched data. Walk me through each node and the error handling."**
3. **"Explain how to build a conditional onboarding flow using Supabase. A new user signs up, and based on their answers to intake questions, they're routed to different onboarding paths with different data collected. Show me the database schema, the API routes, and the frontend flow."**
4. **"I'm integrating CallTools (a dialer) with GoHighLevel for a commercial real estate CRM. Explain: how to set up call disposition webhooks, how to track KPIs (calls made, contacts reached, appointments set), and how to automate follow-up sequences based on call outcomes."**
5. **"Compare n8n vs Make.com vs Zapier for building business automations. I need: complex conditional logic, API integrations, self-hosting capability, and webhook handling. Which platform is best for each use case? Can I use them together?"**
6. **"Explain how to build a lead scoring system in a CRM. A lead comes in from multiple sources (web form, API, referral). I need to: assign initial scores, adjust based on engagement (email opens, page visits, form fills), and trigger automated actions when scores cross thresholds. Show me the data model and automation logic."**
### Module 5: Advertising & Marketing Tech
1. **"Walk me through the Google Ads API authentication flow for a production application. Explain: developer tokens, OAuth2 client credentials, refresh tokens, the `google-ads-api` npm package, and how to make your first GAQL query to fetch campaign performance data."**
2. **"Explain GAQL (Google Ads Query Language) in depth. How do I query campaigns, ad groups, keywords, and search terms? Show me queries for: top spending campaigns, keyword performance with quality scores, search term reports, and audience performance. How does GAQL compare to SQL?"**
3. **"I'm building a Meta Ads reporting tool. Explain the Facebook Marketing API's campaign structure (Campaign → Ad Set → Ad), how to query the Insights API for performance metrics, and how to handle the asynchronous report generation flow. Show me the API calls and response formats."**
4. **"Explain how to build a Google Search Console analytics dashboard. I need to: pull search query data, track keyword rankings over time, identify content gaps, and compare performance across date ranges. Walk me through the API calls, data processing, and visualization approach."**
5. **"Design a unified advertising dashboard that pulls data from Google Ads, Meta Ads, and Google Search Console into a single view. How do I normalize the metrics across platforms? What's the common data model? How do I handle the different date ranges, attribution models, and rate limits?"**
6. **"I want to build automated alerting for advertising campaigns. If a campaign's CPA exceeds a threshold, or spend is pacing too fast, or conversions drop significantly — I want to get notified. Explain the architecture: polling intervals, metric calculations, anomaly detection logic, and notification delivery."**
### Module 6: Full-Stack Product Development
1. **"I'm building a Next.js app with a Discord-like UI: left sidebar for servers, second sidebar for channels within a server, main content area for chat, and a right panel for contextual tools/apps. Walk me through the component architecture, layout system (CSS Grid), and responsive behavior."**
2. **"Explain how to implement real-time streaming AI responses in a Next.js chat interface. Cover: the server-side streaming with `ReadableStream`, client-side consumption with `useChat`, progressive rendering of markdown, auto-scrolling behavior, and how to show typing indicators. Give me production-quality code."**
3. **"I need to embed third-party apps (MCP visual apps) in iframes within my Next.js chat application. Explain: secure iframe sandboxing, the `postMessage` protocol for bidirectional communication, how to pass data from the chat context to the iframe app, and how to handle iframe loading states and errors."**
4. **"Design a system where different chat channels have different AI personas and tool sets. Channel A is a 'Marketing Assistant' with access to Google Ads tools, Channel B is a 'CRM Manager' with GoHighLevel tools. Explain the database schema, system prompt architecture, and tool routing logic."**
5. **"Walk me through building an intent-based app filtering system. During a chat conversation, I want to dynamically show relevant visual apps in a sidebar panel. For example, if the user asks about 'campaign performance,' show the Campaign Dashboard app. Explain: intent extraction, app registry design, relevance scoring, and smooth UI transitions."**
6. **"Explain how to handle authentication and authorization in a multi-tenant Next.js application using Supabase. Cover: Supabase Auth (magic links, OAuth), Row Level Security policies, organization/team membership, and how to scope data access per user."**
7. **"I want to add real-time collaboration features to my chat app (presence indicators, typing status, live updates when other users send messages). Explain how to implement this with Supabase Realtime subscriptions, and how to handle optimistic updates and conflict resolution."**
### Module 7: Data & Scraping
1. **"I'm building a web scraper with Puppeteer that needs to avoid detection. Explain: `puppeteer-extra-plugin-stealth`, what browser fingerprints are checked (WebDriver, navigator properties, WebGL renderer), how to randomize fingerprints, and how to manage sessions across multiple scraping runs."**
2. **"Walk me through building a Reonomy-style property data scraper (v13 level). Cover: session management for authenticated scraping, rate limiting (50 requests/day), request queuing, data extraction with CSS selectors, error recovery, and Postgres storage for the extracted data."**
3. **"Explain API reconnaissance techniques. I have a web application that loads data dynamically. How do I: intercept network requests in Puppeteer, identify the underlying API endpoints, reconstruct the authentication headers, and build a direct API client that's more efficient than browser automation?"**
4. **"Design a Postgres schema for a remix opportunity tracking system (like Remix Sniper). I need to: store song data from multiple sources (Spotify, Shazam, TikTok, SoundCloud), track scores over time, record prediction accuracy, and query for the best current opportunities. Show me the schema and key queries."**
5. **"Explain how to build a multi-factor scoring algorithm. I'm scoring music tracks for remix potential based on: velocity (growth rate), signal strength, viral coefficient, market saturation, label tolerance, and audio fit. How do I normalize these factors, weight them, and combine into a single score? Show me the math and the TypeScript implementation."**
6. **"I need to schedule daily and weekly scraping jobs. Explain the options: node-cron in a long-running process, system crontab, Railway cron services, n8n scheduled workflows. Which is best for: a Discord bot that scans Spotify daily, a web scraper that runs 50 times per day, and a weekly report generator?"**
### Module 8: Creative Tech
1. **"Walk me through building an interactive 3D genre universe visualization with Three.js. I want to: create a scene with floating spheres representing music genres, size them by popularity, color them by category, add labels, enable orbit controls for navigation, and add click interactions that show genre details."**
2. **"Explain how to build a marketing animation with Remotion. I want to create a 30-second video that: shows a product logo, animates text with spring physics, does a dolly camera movement through a scene, and renders to MP4. Walk me through the composition structure, animation utilities, and rendering pipeline."**
3. **"I want to create animated explainer videos using code. Compare Remotion, Motion Canvas, and traditional tools like After Effects/Sprite Studio. For a developer who thinks in code, which approach gives the best results for: product demos, social media clips, and educational content?"**
4. **"Explain ffmpeg for developers. I need to: transcode video formats, extract audio from video, generate thumbnails at specific timestamps, concatenate clips, add text overlays, and compress for web delivery. Give me the ffmpeg commands and explain how to call them from Node.js."**
5. **"Walk me through Three.js shaders (GLSL). I want to create a custom material that: has a gradient color based on vertex position, pulses with time, and responds to mouse position. Explain vertex shaders, fragment shaders, uniforms, varyings, and how to integrate custom shaders in a Three.js scene."**
### Module 9: Business Intelligence
1. **"I'm conducting competitive analysis on 30 companies in the MCP ecosystem. Design a structured framework: what data to collect (pricing, features, team size, funding, positioning), how to organize it (spreadsheet vs database), how to identify competitive advantages and gaps, and how to present findings. Give me the actual template."**
2. **"Build a revenue projection model for a SaaS product that sells MCP servers. I have three pricing tiers ($29/$99/$299), an estimated market of 10,000 potential customers, and 5% monthly growth. Walk me through: bottom-up revenue modeling, churn assumptions, LTV/CAC calculations, and how to present this to investors."**
3. **"I need to research 10 SMB verticals (plumbing, HVAC, legal, dental, etc.) for product-market fit. Design a research framework: what questions to answer for each vertical, where to find the data, how to score vertical attractiveness, and how to present a recommendation on which vertical to target first."**
4. **"Explain how to build probability models for investment decisions. I'm tracking Bitcoin/crypto catalysts and want to assign probabilities to different scenarios, calculate expected values, and update my beliefs as new information comes in. Walk me through Bayesian updating for investment analysis."**
5. **"Design an intake form and dashboard system for competitor research. A user fills out a form with their company details and competitors, and the system generates a competitive analysis dashboard. Explain: form design, data collection, analysis logic, and the HTML/CSS dashboard layout."**
### Module 10: Infrastructure & DevOps
1. **"Write a production Dockerfile for a Next.js 14 application with: multi-stage builds, minimal final image size, proper `.dockerignore`, environment variable handling, and health check configuration. Explain each stage and why it's structured that way."**
2. **"I'm deploying a multi-service architecture: a Next.js frontend on Vercel, an MCP server on Railway, a Postgres database on Railway, and a Discord bot on Railway. Explain: how to set up each service, configure networking between them, manage shared environment variables, and handle deployments. What are the cost considerations?"**
3. **"Design a cron-based automation system for a Discord bot. I need: daily scans at 6 AM (scrape Spotify for new tracks), weekly reports every Monday (generate and post analytics), and real-time webhook processing. Explain the architecture: where each job runs, how to handle failures, and how to monitor execution."**
4. **"Explain the Clawdbot AI assistant framework architecture. It has: skills, memory, cron, multi-channel support (Discord, etc.), and a workspace system. How would I design a similar framework? What are the key abstractions? How does memory work across sessions? How does cron integrate with an LLM?"**
5. **"I'm managing 30+ MCP servers and multiple web applications. Design a CI/CD pipeline with GitHub Actions that: runs tests, builds Docker images, deploys to Railway/Vercel, and handles rollbacks. How do I manage the complexity of many services without drowning in configuration?"**
6. **"Explain the tradeoffs between Vercel, Railway, Fly.io, and running your own VPS for different types of services. I have: serverless API routes, long-running processes, WebSocket servers, and cron jobs. Which platform is best for each? How do I minimize costs while maintaining reliability?"**
---
## 6. Hands-On Projects
### Project 1: Simple MCP Server with 5 Tools
**Difficulty:** ⭐⭐ | **Time:** 1 week
**What you build:** An MCP server that wraps the JSONPlaceholder API (or any simple REST API) with 5 tools: list users, get user by ID, list posts by user, create post, search posts.
**Skills practiced:**
- MCP SDK setup and TypeScript configuration
- Tool definition with JSON Schema input validation
- HTTP requests from tool handlers
- Testing with MCP inspector
**Steps:**
1. Initialize a Node.js project with TypeScript and `@modelcontextprotocol/sdk`
2. Define 5 tools with proper `inputSchema` using JSON Schema
3. Implement handlers that call the REST API and return formatted results
4. Add error handling for network failures and invalid inputs
5. Test with the MCP inspector and connect to Claude Desktop
**Stretch:** Add a 6th tool that returns `structuredContent` with a simple HTML table.
---
### Project 2: Next.js Chat App with Streaming AI Responses
**Difficulty:** ⭐⭐⭐ | **Time:** 2 weeks
**What you build:** A chat application built with Next.js App Router and the Vercel AI SDK that streams responses from Claude. Has a clean UI with message history, loading states, and markdown rendering.
**Skills practiced:**
- Next.js App Router and Server Actions
- Vercel AI SDK (`useChat`, `streamText`)
- Anthropic API integration
- Real-time UI updates during streaming
- Markdown rendering and code highlighting
**Steps:**
1. Set up a Next.js 14+ project with the App Router
2. Create a chat UI with a message list and input form
3. Implement the API route using `streamText` with Anthropic's Claude
4. Connect the UI with `useChat` hook for streaming
5. Add markdown rendering (react-markdown) and code syntax highlighting
6. Implement conversation persistence with localStorage (or Supabase)
7. Add system prompt configuration
**Stretch:** Add 2-3 tools (web search, calculator, date/time) and display tool-use in the UI.
---
### Project 3: Full MCP Server with Visual Apps (HTML Renders)
**Difficulty:** ⭐⭐⭐⭐ | **Time:** 3 weeks
**What you build:** An MCP server for a real API (GitHub, Notion, or a CRM) with 15+ tools organized into categories, plus 5+ visual apps that render HTML dashboards.
**Skills practiced:**
- Large MCP server architecture and organization
- Category-based tool registration
- `structuredContent` HTML/CSS visual apps
- OAuth/API key authentication
- Complex data transformation and formatting
**Steps:**
1. Choose a real API with good documentation (GitHub API recommended for learning)
2. Design 15+ tools across 3-4 categories (e.g., Repos, Issues, Users, Analytics)
3. Implement category-based code organization (one file per category)
4. Build 5 visual apps: user profile card, repo stats dashboard, issue tracker view, contribution chart, org overview
5. Add shared utilities for authentication, pagination, and error handling
6. Implement lazy-loaded tool packs (tools are registered but handlers loaded on-demand)
7. Write comprehensive tool descriptions that help the AI use them correctly
**Stretch:** Implement the MCP Apps SDK protocol for interactive iframes that can send data back to the host.
---
### Project 4: Multi-Channel Automation Platform
**Difficulty:** ⭐⭐⭐⭐ | **Time:** 3-4 weeks
**What you build:** A platform that connects multiple services via webhooks and automated workflows. Includes: a webhook receiver (Next.js API routes), an n8n workflow engine, a Discord bot for notifications, and a Supabase database for tracking.
**Skills practiced:**
- Webhook architecture (inbound + outbound)
- n8n workflow design
- Discord bot development (discord.js)
- Supabase schema design and real-time subscriptions
- Multi-service orchestration
- Cron scheduling
**Steps:**
1. Design the data model in Supabase (events, contacts, tasks, notifications)
2. Build a webhook receiver that accepts events from multiple sources (form submissions, CRM updates)
3. Create n8n workflows that: enrich data, route to appropriate channels, trigger follow-ups
4. Build a Discord bot that: posts notifications, responds to commands, runs scheduled reports
5. Implement a scoring algorithm for prioritizing incoming leads/events
6. Add a simple dashboard (Next.js page) that shows system activity
7. Deploy: Next.js on Vercel, n8n on Railway, Postgres on Railway, bot on Railway
**Stretch:** Add GoHighLevel or Calendly integration for real CRM automation.
---
### Project 5: Full LocalBosses-Style Product
**Difficulty:** ⭐⭐⭐⭐⭐ | **Time:** 6-8 weeks
**What you build:** A production-grade AI chat platform with: Discord-like UI (servers + channels + chat), multiple MCP server integrations, iframe-embedded visual apps with smart filtering, real-time streaming, and multi-tenant architecture.
**Skills practiced:**
- Everything from Projects 1-4, combined
- Complex UI architecture (multi-panel layouts)
- iframe embedding with postMessage protocol
- Intent-based smart filtering
- Multi-tenant auth and data isolation
- Production deployment and monitoring
**Steps:**
1. **Week 1-2:** Build the UI shell — server sidebar, channel sidebar, main chat area, right app panel. Use CSS Grid for the layout. Implement routing with Next.js App Router.
2. **Week 2-3:** Implement the chat backend — Supabase for message storage, Vercel AI SDK for streaming, system prompts per channel, message history loading.
3. **Week 3-4:** Build 2-3 MCP servers — connect them as tool providers. Implement tool routing (Channel A gets MCP Server 1's tools, Channel B gets MCP Server 2's tools).
4. **Week 4-5:** Build visual apps for each MCP server — render them as `structuredContent` HTML. Embed them in the right panel using iframes. Implement the postMessage protocol for bidirectional communication.
5. **Week 5-6:** Build intent-based smart filtering — analyze conversation context, match to app metadata, auto-surface the most relevant app in the right panel.
6. **Week 6-7:** Add auth (Supabase Auth), multi-tenant data isolation (RLS), user settings, and team/org management.
7. **Week 7-8:** Deploy to production — Next.js on Vercel, MCP servers on Railway, Postgres on Railway. Set up monitoring, error tracking, and usage analytics.
**Stretch goals:**
- Add real-time presence (who's online, typing indicators)
- Implement conversation search across channels
- Build an admin panel for managing servers, channels, and system prompts
- Add file upload support (images, documents) in chat
- Integrate Google Ads + Meta Ads MCP servers for a real marketing use case
---
## Appendix: Jake's Complete Tech Stack Reference
| Category | Technologies |
|----------|-------------|
| **Languages** | TypeScript, JavaScript, SQL, GLSL, HTML/CSS |
| **Frontend** | React, Next.js (App Router), Tailwind CSS |
| **Backend** | Node.js, Express (API routes in Next.js) |
| **AI/LLM** | Anthropic Claude API, Vercel AI SDK, MCP Protocol |
| **Database** | Supabase, PostgreSQL, Drizzle ORM |
| **Automation** | n8n, Make.com, GoHighLevel, Calendly, CallTools |
| **Advertising** | Google Ads API, Meta Marketing API, Google Search Console API |
| **Communications** | Twilio, Discord.js |
| **Scraping** | Puppeteer, Playwright, puppeteer-extra-plugin-stealth |
| **3D/Video** | Three.js, Remotion, Sprite Studio, ffmpeg |
| **Music** | Ableton Live, Serum (synth), audio processing |
| **Infrastructure** | Docker, Vercel, Railway, GitHub Actions |
| **AI Tooling** | Clawdbot, Google Veo 3 (Vertex AI) |
| **APIs Integrated** | ServiceTitan, Gusto, Rippling, Mailchimp, Toast, Zendesk, Trello, Close, Pipedrive, Spotify, Shazam, TikTok, SoundCloud |
---
*Last updated: February 3, 2026*
*Guide authored by Clawdbot for Jake Shore's workspace*
Reference in New Issue View Git Blame Copy Permalink