Learn AI React

An interactive learning platform for AI and data engineering concepts, featuring context-aware assistance powered by Ollama.

!License !React !Ollama !MCP

🚀 Features

• Interactive Learning Paths for AI and data engineering concepts
• Context-Aware AI Assistant powered by Ollama's local LLMs
• Seamless Navigation between related topics
• Responsive Design for all device types
• Dark/Light Theme support for comfortable reading
• Rich Visualizations of complex AI architectures
• Local-First Architecture with Ollama for privacy and speed
• AI-Powered Testing with MCP Tester AI for quality assurance

🧠 Ollama Integration

This application leverages Ollama to provide context-aware assistance throughout your learning journey. The chat widget:

• 🔄 Adapts to page context - The AI assistant is aware of which page you're viewing and tailors responses accordingly
• 🏠 Runs locally - All AI processing happens on your machine, ensuring privacy and eliminating API costs
• 📚 Provides relevant examples - Based on the current topic, the assistant offers code snippets and explanations
• 🌐 Works offline - No internet required after initial setup

🤖 MCP Tester AI Integration

This application incorporates MCP Tester AI for automated testing and quality assurance:

• 🧪 Automated Bug Detection - Identifies UI/UX issues and functional bugs
• 🔍 Comprehensive Testing - Performs thorough checks across all application pages
• 📊 Detailed Reports - Generates actionable insights for developers
• 🔄 Continuous Integration - Can be integrated into CI/CD pipelines

graph TD
    subgraph Testing [AI Testing Workflow]
        App[Application] --> Tester[MCP Tester AI]
        Tester --> Report[Test Reports]
        Report --> Fixes[Bug Fixes]
        Fixes --> App
    end

📊 Architecture

graph TD
    subgraph Frontend [React Frontend]
        UI[User Interface] --> Router[React Router]
        Router --> Pages[Pages Components]
        Router --> Nav[Navigation]
        UI --> Theme[Theme Provider]
        UI --> Chat[Chat Widget]
    end
    
    subgraph Context [Context Providers]
        Theme --> GlobalStyles[Global Styles]
        Chat --> ChatContext[Chat Context]
    end
    
    subgraph Backend [Local Backend]
        ChatContext --> OllamaAPI[Ollama API]
        OllamaAPI --> LLM[Local LLM]
    end
    
    subgraph Testing [AI Testing]
        UI --> MCPTester[MCP Tester AI]
        MCPTester --> BugReports[Bug Reports]
    end
    
    User[User] --> UI
    OllamaAPI --> Response[AI Response]
    Response --> ChatContext

Data Flow Architecture

graph LR
    subgraph Data Flow
        A[Data Sources] --> B[Data Engineering]
        B --> C[AI Components]
        C --> D[AI Applications]
    end
    
    subgraph Context-Aware Assistance
        Page[Current Page] --> Context[Page Context]
        UserQuery[User Query] --> Prompt[Contextualized Prompt]
        Context --> Prompt
        Prompt --> Ollama[Ollama LLM]
        Ollama --> Response[Tailored Response]
    end

📋 Pages Overview

• Home: Introduction to AI data flow
• Data Sources: Exploration of data collection and sources
• Data Engineering: ETL processes and data preparation
• AI Components: Core technologies and machine learning concepts
• AI Applications: Real-world use cases and implementations
• Architecture Flow: System design and data flow visualization

🛠️ Technologies

• React: Frontend UI library
• React Router: Navigation management
• Styled Components: CSS-in-JS styling
• Ollama: Local large language model API
• Mermaid: Architecture visualization
• React Markdown: Rich text rendering
• MCP Tester AI: Automated application testing

📦 Installation

1. Clone the repository

git clone https://github.com/vishalm/learn-ai-react.git
cd learn-ai-react

2. Install dependencies

npm install

3. Install Ollama

Follow instructions at Ollama.ai to install Ollama on your system.

4. Pull the required model

ollama pull qwen2.5:latest

5. Start the development server

npm start

6. Start Ollama

In a separate terminal:

ollama serve

🧪 Running AI Tests

You can use MCP Tester AI to automatically test your application for bugs and issues:

1. Start your development server

npm start

2. Run basic checks

Use the MCP Tester AI Check tool to identify basic issues:

mcp_testers_ai_MCP_Server_Check --url=http://localhost:3000

3. Run comprehensive tests

For more thorough testing, use the Test tool with customizable parameters:

mcp_testers_ai_MCP_Server_Test --url=http://localhost:3000 --max_tests=10 --max_steps=5

4. Test specific pages

You can target specific pages of your application:

mcp_testers_ai_MCP_Server_Check --url=http://localhost:3000/ai-components

5. Add labels for organization

mcp_testers_ai_MCP_Server_Test --url=http://localhost:3000 --label="homepage-test" --team="frontend"

🔧 Configuration

You can configure the Ollama model used by editing the getAIResponse function in src/context/ChatContext.js:

// Change this to any model you have pulled in Ollama
model: 'qwen2.5:latest',

💡 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.