This repository helps frontend engineers progress through three stages of AI mastery:
- Use AI Tools → Improve productivity with AI coding assistants
- Add AI Features → Integrate AI capabilities into existing products
- Build AI Products → Create complete AI-powered applications
- Frontend developers (React, Vue, Next.js)
- Full-stack developers wanting to add AI features
- Engineers transitioning to AI development
- Teams building AI-powered web applications
learn-ai/
├── README.md
├── docs/
│ ├── index.md # Homepage with visual learning paths
│ │
│ ├── paths/ # NEW: Three concrete learning paths
│ │ ├── index.md # Overview of all paths
│ │ ├── productivity.md # Path 1: Use AI Tools , combine ai in your workflow
│ │ ├── integration.md # Path 2: Add AI Features in your product
│ │ └── mastery.md # Path 3: Build AI Products
│ │
│ ├── tech/ # Technical foundations (frontend-focused)
│ │ ├── index.md # Tech stack overview + decision tree
│ │ │
│ │ ├── fundamentals/ # Core concepts (frontend-relevant)
│ │ │ ├── LLM.md # Large Language Models basics
│ │ │ ├── context.md # Context window management
│ │ │ ├── embeddings.md # Vector databases & embeddings
│ │ │ └── prompt/ # Prompt engineering
│ │ │ ├── index.md
│ │ │ ├── agents-doc.md
│ │ │ └── cases/
│ │ │ └── copilot.md
│ │ │
│ │ ├── patterns/ # Application patterns (frontend-actionable)
│ │ │ ├── RAG.md # Retrieval-Augmented Generation
│ │ │ └── agent/ # Agent patterns
│ │ │ ├── index.md # ReAct, Plan-Execute patterns
│ │ │ ├── skills.md
│ │ │ └── hooks.md
│ │ │
│ │ ├── training/ # Model training concepts (concept-only)
│ │ │ ├── index.md # Overview: When to involve ML engineers
│ │ │ ├── SFT.md # Supervised Fine-Tuning basics
│ │ │ ├── RLHF.md # Reinforcement Learning concepts
│ │ │ └── PEFT.md # Parameter-Efficient Fine-Tuning
│ │ │
│ │ ├── frontend/ # USP: Frontend-specific AI tech
│ │ │ ├── streaming.md # SSE, Fetch API streaming patterns
│ │ │ ├── generative-ui.md # Tool calling → React components (GenUI)
│ │ │ ├── browser-ai.md # Transformers.js, WebGPU client-side AI
│ │ │ └── state-management.md # AI state (Vercel AI SDK) in React/Vue
│ │ │
│ │ └── engineering/ # Production practices (frontend-focused)
│ │ ├── testing.md # Unit tests, Evals, Integration tests
│ │ ├── evals.md # Quality metrics (Recall/Precision)
│ │ ├── observability.md # Monitoring & debugging
│ │ ├── security.md # API key protection, CSP
│ │ └── cost-optimization.md # Token usage, caching
│ │
│ ├── integration/ # NEW: API & Framework guides
│ │ ├── apis/ # API integration guides
│ │ │ ├── openai.md # OpenAI API + streaming
│ │ │ ├── anthropic.md # Claude API integration
│ │ │ ├── huggingface.md # Hugging Face APIs
│ │ │ └── streaming.md # Universal streaming patterns
│ │ │
│ │ ├── frameworks/ # Framework-specific patterns
│ │ │ ├── vercel-ai-sdk.md # useChat, useCompletion, RSC
│ │ │ ├── langchain-js.md # LangChain.js best practices
│ │ │ ├── llamaindex-ts.md # LlamaIndex.ts for RAG
│ │ │ └── nextjs.md # Next.js + AI patterns
│ │ │
│ │ ├── protocols/ # Communication protocols
│ │ │ ├── mcp.md # Model Context Protocol (practical)
│ │ │ └── tool-calling.md # Function calling patterns
│ │ │
│ │ └── frontend-ml/ # Browser-side ML libraries
│ │ ├── transformersjs.md # Hugging Face in browser
│ │ ├── tensorflowjs.md # TensorFlow.js guide
│ │ ├── ml5js.md # Beginner-friendly ML
│ │ └── onnx-runtime.md # ONNX in browser
│ │
│ ├── cookbook/ # NEW: Single-file snippets
│ │ ├── index.md # Recipe index
│ │ ├── chat-ui.md # Streaming chat UI component
│ │ ├── api-proxy.md # Secure API proxy implementation
│ │ ├── local-embedding.md # Browser-side embedding search fn
│ │ ├── form-autocomplete.md # Hook for AI form completion
│ │ ├── content-moderation.md # Zod schema for output filtering
│ │ └── error-handling.md # Retry logic wrapper
│ │
│ ├── projects/ # NEW: Step-by-step tutorials
│ │ ├── index.md # Projects by difficulty
│ │ │
│ │ ├── beginner/ # Starter projects
│ │ │ ├── ai-chatbot.md # Basic streaming chatbot
│ │ │ ├── text-summarizer.md # Text summarization UI
│ │ │ └── image-generator.md # DALL-E integration
│ │ │
│ │ ├── intermediate/ # Feature integration
│ │ │ ├── rag-search.md # Document Q&A with RAG
│ │ │ ├── code-completion.md # Monaco + AI completion
│ │ │ ├── ai-form-builder.md # Generative UI forms
│ │ │ └── semantic-search.md # Vector search UI
│ │ │
│ │ └── advanced/ # Complete applications
│ │ ├── full-stack-saas.md # Complete AI SaaS
│ │ ├── multi-agent-app.md # Agent-based application
│ │ └── ai-design-tool.md # AI-powered design tool
│ │
│ ├── use-cases/ # NEW: Practical scenarios
│ │ ├── index.md # Use cases by industry
│ │ ├── add-ai-search.md # Add to existing app
│ │ ├── migrate-to-ai.md # Migration strategies
│ │ ├── ai-analytics.md # Analytics dashboard
│ │ ├── recommendations.md # Recommendation engine
│ │ └── accessibility.md # AI for a11y
│ │
│ ├── deployment/ # NEW: Production guides
│ │ ├── index.md # Deployment overview
│ │ ├── vercel-edge.md # Vercel Edge Functions
│ │ ├── cloudflare-workers.md # Cloudflare AI Workers
│ │ ├── caching.md # Response caching strategies
│ │ ├── rate-limiting.md # Rate limiting patterns
│ │ ├── monitoring.md # Production monitoring
│ │ └── cost-calculator.md # Budget planning tool
│ │
│ ├── products/ # KEEP: AI tools & products
│ │ ├── ai-coding/ # AI coding assistants
│ │ │ ├── index.md # L1-L5 levels overview
│ │ │ ├── cursor.md
│ │ │ ├── copilot.md
│ │ │ ├── claude-code.md
│ │ │ ├── gemini-cli.md
│ │ │ └── othertools.md
│ │ │
│ │ └── tools/ # Development tools
│ │ ├── ollama.md
│ │ ├── figma-ai.md # NEW: AI design tools
│ │ └── testing-ai.md # NEW: Cypress AI, TestGPT
│ │
│ └── resources.md # NEW: Curated resources
│ # Libraries, UI components, videos, communities
│
├── examples/ # ENHANCED: Full working repositories
│ ├── README.md # How to run examples
│ │
│ ├── 01-chat-basic/ # NEW: Basic streaming chat
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │
│ ├── 02-rag-search/ # NEW: RAG implementation
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │
│ ├── 03-generative-ui/ # NEW: Generative UI demo
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │
│ ├── 04-browser-ai/ # NEW: Transformers.js demo
│ │ ├── README.md
│ │ ├── package.json
│ │ └── src/
│ │
│ ├── 05-full-stack-app/ # NEW: Complete SaaS
│ │ ├── README.md
│ │ ├── frontend/
│ │ └── backend/
│ │
│ ├── mcp-lab/ # KEEP: MCP tutorial
│ │ └── ...
│ │
│ └── ollama-node/ # KEEP: Local LLM example
│ └── ...
│
├── ppts/ # KEEP: Presentations
│ ├── prompt/
│ └── mcp/
│
└── _docs/ # Internal documentation
├── architecture.md # This file
└── newStructure.md # Original Chinese proposal
Beginner: Use AI Tools
- Goal: Boost productivity immediately
- Content:
/paths/productivity,/products/ - Outcome: Effective use of Cursor, Copilot, Claude CLI
Intermediate: Add AI Features
- Goal: Integrate AI into existing apps
- Content:
/integration/,/cookbook/,/projects/beginner/ - Outcome: Add chat, search, or generation features
Advanced: Build AI Products
- Goal: Create complete AI-powered applications
- Content:
/tech/patterns/,/projects/advanced/,/deployment/ - Outcome: Ship production-ready AI products
Critical Understanding: Paths (/docs/paths/) are roadmaps/organizers, not comprehensive tutorials.
What Paths Do:
- Organize existing content (cookbook, projects, guides) into structured sequences
- Provide curated learning journeys for different goals
- Support multiple learning styles (learn by doing vs learn by content)
- Link to existing resources with brief context
What Paths Don't Do:
- Duplicate content that exists in cookbook/projects/guides
- Provide step-by-step tutorials (those are in projects/)
- Include full code examples (those are in cookbook/)
- Explain concepts in depth (those are in tech/ and integration/)
Learning Styles Supported:
- Learn by Doing: Start with projects → reference guides when needed
- Learn by Content: Read concepts first → then build projects
Path Structure:
- Each path is a sequence of links to existing content
- Brief context explains why each resource is included
- Clear navigation between related resources
- Progress checkpoints link to verification exercises
It is critical to distinguish between these three:
- Cookbook (
/docs/cookbook/): Single-file, copy-paste snippets solving specific problems (e.g., "How to handle a stream error"). Focus is on logic and patterns. - Projects (
/docs/projects/): Step-by-step tutorials with complete implementations. Focus is on building features from scratch. - Paths (
/docs/paths/): Roadmaps that organize cookbook, projects, and guides into learning sequences. Focus is on navigation and structure.
Our Unique Selling Point is the Frontend AI focus. While most AI docs focus on Python backends and ML theory, we prioritize:
What We INCLUDE (Frontend-Actionable):
- Client-Side AI: Running models in browser (Transformers.js, WebGPU)
- Generative UI: React components from AI streams (Vercel AI SDK)
- Edge Architecture: Vercel Edge/Cloudflare Workers for low-latency AI
- UI/UX Patterns: Loading states, optimistic UI, streaming updates
- API Integration: How to call LLM APIs from frontend/backend
- RAG Implementation: Vector search with frontend frameworks
- Agent Patterns: Building autonomous AI features
What We EXCLUDE (Not Frontend-Actionable):
- Training Implementation: Step-by-step training code, GPU setup, hyperparameter tuning
- Custom Model Architecture: Building LLMs from scratch (PyTorch/TensorFlow)
- Distributed Training: Multi-GPU infrastructure, model parallelism
- Deep ML Theory: Transformer architecture internals, backpropagation, gradient descent
What We INCLUDE as CONCEPTS (Understanding the Landscape):
- Training Overview (
/tech/training/): What SFT/RLHF/PEFT are, when companies use them - When to Hire ML Engineers: Clear signals that you need specialist help
- Decision Guides: RAG vs SFT comparisons to understand tradeoffs
- Industry Context: How companies like OpenAI use these techniques
Philosophy: Frontend devs should KNOW these concepts exist (to communicate with ML teams), but shouldn't waste time learning to implement them.
- Prerequisites: What knowledge/tools needed
- Learning Objectives: What you'll learn
- Theory Section: Explain the concept
- Code Example: Working, runnable code
- Real-World Use Case: When to use this
- Common Pitfalls: What to avoid
- Next Steps: Where to go from here
- Complete: Copy-paste runnable
- TypeScript: Prefer TS over JS
- Modern: Use latest APIs (async/await, fetch, etc.)
- Commented: Explain non-obvious parts
- Error Handling: Show proper error patterns
- Framework Agnostic: Or show React/Vue/Next.js variants
- GitHub Repository: Template repo to clone
- Live Demo: Deployed example (Vercel/Netlify)
- Step-by-Step Guide: Numbered steps
- Commit History: Each step as a commit
- Troubleshooting: Common issues section
- Extensions: How to expand the project
What makes this resource unique:
- Frontend-First: JavaScript/TypeScript focus, not Python-centric ML theory
- Actionable Only: No ML theory that frontend devs can't apply
- Three Clear Paths: Use → Add → Build progression
- Production-Ready: Not just tutorials, but deployment guides
- Working Examples: Every concept has runnable code
- Modern Stack: Vercel AI SDK, Next.js, edge functions
- Browser AI: Transformers.js, WebGPU content
- Engineering Practices: Security, observability, cost optimization
- No Gatekeeping: Clear about what requires ML expertise vs what doesn't
- Check for broken links
- Test code examples still work
- Monitor GitHub issues
- Update dependencies in examples
- Review new AI APIs/libraries
- Update framework guides
- Add requested content
- Refresh live demos
- Major content review
- Restructure if needed
- User survey
- Competitive analysis