LLM Guide

An interactive Next.js web application that teaches LLM techniques (RAG, LoRA, Chain of Thought, Prompt Engineering) through guided learning paths with hands-on examples and multi-provider chat integration.

---

Features

Learning Content

• Interactive Guides - Deep dives into RAG, LoRA, Chain of Thought, and Prompt Engineering
• Hands-on Tutorials - Step-by-step coding tutorials with AI-assisted learning
• Prompt Playground - Experiment with prompts across different LLM providers

Multi-Provider LLM Support

• OpenAI - GPT-4, GPT-4o, GPT-3.5
• Anthropic - Claude models
• Grok - xAI's model
• LM Studio - Local models via OpenAI-compatible API
• Ollama - Local models with auto-serve and model pulling

User Experience

• Contextual Chat Assistant - AI help that adapts to your current page/topic
• Light/Dark Theme - Toggle between themes or follow system preference
• Markdown Rendering - Full markdown support with syntax highlighting
• Streaming Responses - Real-time token streaming from LLM providers
• Privacy First - API keys stored locally, never sent to our servers

---

Tech Stack

---

Getting Started

Prerequisites

• Node.js 18.17 or later
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/yourusername/llm-guide.git
   cd llm-guide
   

2. Install dependencies

   npm install
   

3. Run the development server

   npm run dev
   

4. Open your browser Navigate to http://localhost:3000

Build for Production

npm run build
npm start

---

Project Structure

src/
├── app/                          # Next.js App Router
│   ├── layout.tsx                # Root layout with ThemeProvider
│   ├── page.tsx                  # Home page
│   ├── globals.css               # Global styles & CSS variables
│   ├── guides/                   # Guide pages
│   │   ├── page.tsx              # Guide grid
│   │   └── [slug]/page.tsx       # Individual guide
│   ├── tutorials/                # Tutorial pages
│   │   ├── page.tsx              # Tutorial grid
│   │   └── [slug]/page.tsx       # Individual tutorial
│   ├── playground/page.tsx       # Prompt playground
│   ├── settings/page.tsx         # API key management
│   └── api/chat/route.ts         # Chat API endpoint
│
├── components/
│   ├── ui/                       # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   ├── Input.tsx
│   │   ├── Textarea.tsx
│   │   ├── Select.tsx
│   │   ├── Badge.tsx
│   │   └── MarkdownContent.tsx   # Markdown renderer
│   ├── layout/                   # Layout components
│   │   ├── Sidebar.tsx
│   │   ├── MainLayout.tsx
│   │   └── ThemeProvider.tsx
│   └── features/                 # Feature-specific components
│       ├── chat/                 # Chat components
│       │   ├── ChatBubble.tsx
│       │   ├── ChatDrawer.tsx
│       │   └── ChatMessage.tsx
│       ├── guides/               # Guide components
│       ├── tutorials/            # Tutorial components
│       ├── playground/           # Playground components
│       └── settings/             # Settings components
│
├── lib/
│   ├── llm/                      # LLM provider abstractions
│   │   ├── client.ts             # Unified client
│   │   ├── ollama-service.ts     # Ollama auto-serve
│   │   └── providers/            # Provider implementations
│   │       ├── base.ts
│   │       ├── openai.ts
│   │       ├── anthropic.ts
│   │       ├── grok.ts
│   │       ├── lmstudio.ts
│   │       └── ollama.ts
│   └── utils/
│       └── cn.ts                 # Class name utility
│
├── stores/                       # Zustand stores
│   ├── apiKeyStore.ts            # API key management
│   ├── chatStore.ts              # Chat state
│   └── uiStore.ts                # UI state (theme, sidebar)
│
├── hooks/                        # Custom React hooks
│   ├── useChat.ts
│   └── useCleanup.ts
│
├── content/                      # Static content
│   ├── guides.ts                 # Guide definitions
│   └── tutorials.ts              # Tutorial definitions
│
└── types/                        # TypeScript definitions
    ├── provider.ts
    ├── guide.ts
    ├── tutorial.ts
    └── chat.ts

---

Configuration

Adding API Keys

1. Navigate to Settings in the app
2. Click Add Key for your preferred provider
3. Enter your API key and click Save
4. Click Test Connection to verify

Local LLM Setup

Ollama

1. Install Ollama from ollama.ai
2. The app will auto-detect Ollama and offer to pull models
3. Select models to download directly from the Settings page

LM Studio

1. Install LM Studio from lmstudio.ai
2. Start the local server in LM Studio
3. Add the base URL in Settings (default: http://localhost:1234/v1)

---

TODO

High Priority

• Add user authentication (optional, for progress tracking)
• Implement guide progress persistence
• Add search functionality across guides and tutorials
• Create interactive code sandbox for tutorials
• Add unit tests for LLM provider integrations

Medium Priority

• Export/import chat conversations
• Add keyboard shortcuts (Cmd+K for search, etc.)
• Implement RAG demo with document upload
• Add token usage tracking and display
• Create mobile-responsive navigation

Low Priority

• Add multi-language support (i18n)
• Implement sharing functionality for prompts
• Add comparison mode (compare outputs from multiple providers)
• Create browser extension for quick access

---

Future Improvements

Content Expansion

• More Guides - Add guides for Fine-tuning, Embeddings, Vector Databases, Agent Frameworks
• Video Content - Embed video tutorials for complex topics
• Interactive Diagrams - Add animated visualizations for LLM concepts
• Quiz System - Add knowledge checks at the end of each guide

Technical Enhancements

• Offline Support - PWA capabilities for offline guide access
• Real-time Collaboration - Share sessions with others
• Custom Model Support - Allow users to add custom OpenAI-compatible endpoints
• Streaming Token Count - Show real-time token usage during generation
• Response Caching - Cache common prompt responses for faster demos

AI Features

• Smart Suggestions - Suggest relevant guides based on chat context
• Prompt Optimization - AI-powered prompt improvement suggestions
• Learning Path Generator - Personalized learning paths based on goals
• Code Review - AI code review for tutorial exercises

Platform

• VS Code Extension - Access guides directly in your editor
• CLI Tool - Command-line interface for quick prompt testing
• API Access - Public API for programmatic access to guides

---

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow the existing code style and patterns
• Add TypeScript types for all new code
• Update documentation for new features
• Test with multiple LLM providers before submitting

---

Scripts

---

Environment Variables

This project uses client-side API key storage for privacy. No environment variables are required for basic functionality.

For deployment with server-side features (optional):

# Optional: Analytics
NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id

# Optional: Rate limiting (if implementing server-side)
RATE_LIMIT_REQUESTS=100
RATE_LIMIT_WINDOW_MS=60000

---

Browser Support

• Chrome 90+
• Firefox 90+
• Safari 14+
• Edge 90+

---

Acknowledgments

• Next.js - React framework
• Tailwind CSS - Styling
• Lucide - Icons
• Zustand - State management
• OpenAI - LLM provider
• Anthropic - LLM provider
• Ollama - Local LLM runtime

---

License

MIT License

Copyright (c) 2025

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions

---

Made with Next.js and AI