A frontend-first AI learning platform - Learn to use AI tools, add AI features to your apps, and build AI-powered products with JavaScript/TypeScript.
Currently under active development! We're implementing a comprehensive learning platform following our architecture roadmap.
- ✅ Available Now:
- AI coding tools documentation (Cursor, Copilot, Claude CLI, Gemini CLI)
- Learning paths (roadmaps organizing all content)
- Project tutorials and cookbook recipes
- 🚧 In Progress: Additional projects and advanced patterns
- 📋 Roadmap: See todo.md for detailed implementation plan
This platform is an AI learning resource specifically engineered for frontend developers. Unlike most AI tutorials focused on Python and data science, we teach AI development through the lens of React, Vue, Next.js, and modern JavaScript/TypeScript.
Our core philosophy:
- ✅ Frontend-First: All examples use JavaScript/TypeScript, not Python
- ✅ Actionable Only: No ML theory you can't apply (no GPU training, no PyTorch)
- ✅ Production-Ready: From quickstart to deployment, with real-world patterns
- ✅ Three Clear Paths: Use AI Tools → Add AI Features → Build AI Products
We empower you to seamlessly integrate AI capabilities into your daily development workflow, dramatically enhancing both your efficiency and professional capabilities.
As a frontend engineer, you are at the forefront of a new technological paradigm: AI is no longer a niche specialization but a foundational skill. However, most AI learning resources are tailored for data scientists or backend specialists, often overlooking the unique context and powerful skill set you already possess.
| The Problem with Traditional AI Learning | Our Solution: A Frontend-First Approach |
|---|---|
| Academic Overload | High-ROI, Practical Learning: We focus on the 20% of AI knowledge that delivers 80% of the practical results for application development. |
| Python-Centric Examples | JavaScript/TypeScript Native: All examples use Node.js and TypeScript, fitting directly into your existing technology stack. |
| Abstract API Calls | Architecture & Integration Patterns: We teach you how to build and architect AI features, not just consume them. |
| Information Overwhelm | Scenario-Driven Paths: We provide clear, structured learning paths based on real-world frontend development scenarios. |
Launch your AI-enhanced development environment in minutes.
Available now: Learn about AI coding assistants 👉 AI Coding Tools Documentation - Cursor, Copilot, Claude CLI, and more
To run this documentation locally:
# 1. Clone the repository
git clone https://github.com/zenheart/learn-ai.git
cd learn-ai
# 2. Install dependencies and run the documentation site
pnpm install
pnpm docs:dev
# Open http://localhost:5173 to explore the learning materials.This guide is structured around scenario-driven learning paths. Paths are roadmaps that organize our content (cookbook recipes, project tutorials, integration guides) into structured learning sequences.
Choose your learning style:
- Learn by Doing: Start with project tutorials → reference cookbook recipes when needed
- Learn by Content: Read integration guides first → then build projects
Goal: Master AI coding assistants to code 2-3x faster
- Master Cursor, Copilot, Claude CLI
- Write effective prompts for code generation
- Debug faster with AI assistance
- Status: ✅ Available - Start Path 1
Goal: Build AI-powered features like chatbots, search, and smart forms
- Integrate OpenAI/Claude/Gemini APIs into React apps
- Build streaming chat interfaces with Vercel AI SDK
- Implement RAG (Retrieval-Augmented Generation)
- Create AI agents that can use tools
- Status: ✅ Available - Start Path 2
Goal: Design, build, and deploy complete AI-powered applications
- Production deployment (Edge, Workers)
- Advanced RAG patterns (hybrid search, reranking)
- AI engineering (testing, monitoring, cost optimization)
- Browser-side AI (Transformers.js, WebGPU)
- Status: ✅ Available - Start Path 3
Knowing which AI technique to use is as important as knowing how to use it.
| When your goal is to... | The best approach is... | Because... |
|---|---|---|
| Enhance AI with external, real-time, or private data | Retrieval-Augmented Generation (RAG) | It grounds the AI in factual, up-to-date information without retraining. Ideal for Q&A over documents. |
| Create an AI that can perform actions and use tools | Agents with MCP/Tool Calling | Allows AI to interact with APIs and databases, moving beyond simple text generation to task execution. |
| Adapt the AI's style, tone, or format to a specific domain | Prompt Engineering (First Step) | Always start here. Advanced prompting solves 90% of "style" issues cheaper than fine-tuning. |
All examples use JavaScript/TypeScript and are runnable locally.
- 🚧 AI Chatbot - Streaming chat with OpenAI + React (planned)
- 🚧 RAG Search - Document Q&A with vector search (planned)
- 🚧 Generative UI - Dynamic form generation (planned)
- 🚧 Full-Stack AI SaaS - Complete production app (planned)
- ✅ MCP Lab - Build your own AI tools with Model Context Protocol
- ✅ Ollama Node - Local LLM integration
- Documentation: VitePress 1.6.4 + Vue 3
- Presentations: Slidev 0.49.0
- AI SDKs: Vercel AI SDK, OpenAI, Ollama
- Package Manager: pnpm 9.15.4
We welcome contributions! Please read our Contribution Guidelines.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
ISC
Made with passion for frontend engineers learning AI 💻🤖