Change to ask me anything

CLAUDE.md

@@ -0,0 +1,84 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a Course Materials RAG (Retrieval-Augmented Generation) system - a full-stack web application that enables semantic search and AI-powered question answering over course documents. The system uses ChromaDB for vector storage, Anthropic's Claude for generation, and serves a web interface for user interaction.
+
+## Essential Commands
+
+### Running the Application
+```bash
+# Quick start (recommended)
+./run.sh
+
+# Manual start
+cd backend && uv run uvicorn app:app --reload --port 8000
+
+# Development with different port (if 8000 is occupied)
+cd backend && uv run uvicorn app:app --reload --port 8001
+```
+
+### Setup Commands
+```bash
+# Install dependencies
+uv sync
+
+# Create environment file (required)
+cp .env.example .env
+# Then edit .env with your ANTHROPIC_API_KEY
+```
+
+## Architecture
+
+### Core Components
+
+The system follows a modular RAG architecture with clear separation of concerns:
+
+**RAGSystem (backend/rag_system.py)** - Main orchestrator that coordinates all components:
+- DocumentProcessor: Chunks course documents into searchable segments
+- VectorStore: Manages ChromaDB for semantic search using sentence transformers
+- AIGenerator: Handles Anthropic Claude API calls for response generation
+- SessionManager: Maintains conversation context and history
+- ToolManager: Coordinates search tools for enhanced retrieval
+
+**Data Models (backend/models.py)**:
+- `Course`: Contains title, instructor, lessons, and course metadata
+- `Lesson`: Individual lessons with titles and links
+- `CourseChunk`: Text segments with course/lesson context for vector storage
+
+**Frontend Architecture**:
+- Vanilla HTML/CSS/JS with pink-themed UI (frontend/style.css)
+- JavaScript handles API communication and UI updates (frontend/script.js)
+- FastAPI serves both static files and API endpoints
+
+### Key Configuration (backend/config.py)
+
+- Uses Claude Sonnet 4 model (`claude-sonnet-4-20250514`)
+- Embedding model: `all-MiniLM-L6-v2`
+- Document chunks: 800 characters with 100 character overlap
+- Conversation history: 2 messages retained
+- ChromaDB path: `./chroma_db`
+
+### API Endpoints
+
+- `POST /api/query`: Submit questions, returns AI response with sources
+- `GET /api/courses`: Retrieve course statistics and titles
+- `/`: Static file serving for frontend
+
+### Document Processing Flow
+
+1. Course documents (`.txt` files) placed in `docs/` folder
+2. DocumentProcessor extracts course metadata and lessons from structured text
+3. Content is chunked and stored in ChromaDB with course/lesson context
+4. User queries trigger semantic search + Claude generation with retrieved context
+5. Session manager maintains conversation history for follow-up questions
+
+### Development Notes
+
+- Uses `uv` for Python dependency management
+- FastAPI with auto-reload for backend development
+- Frontend styling uses CSS custom properties for theming
+- ChromaDB persists to local filesystem for data retention
+- Requires ANTHROPIC_API_KEY environment variable

frontend/index.html

@@ -40,7 +40,7 @@ <h1>Course Materials Assistant</h1>
                 <!-- Suggested Questions -->
                 <div class="sidebar-section">
                     <details class="suggested-collapsible">
-                        <summary class="suggested-header">Try asking:</summary>
+                        <summary class="suggested-header">Ask me anything:</summary>
                         <div class="suggested-items">
                             <button class="suggested-item" data-question="What is the outline of the &quot;MCP: Build Rich-Context AI Apps with Anthropic&quot; course?">Outline of a course</button>
                             <button class="suggested-item" data-question="Are there any courses that include a Chatbot implementation?">Courses about Chatbot</button>

frontend/style.css

@@ -7,21 +7,21 @@
 
 /* CSS Variables */
 :root {
-    --primary-color: #2563eb;
-    --primary-hover: #1d4ed8;
-    --background: #0f172a;
-    --surface: #1e293b;
-    --surface-hover: #334155;
-    --text-primary: #f1f5f9;
-    --text-secondary: #94a3b8;
-    --border-color: #334155;
-    --user-message: #2563eb;
-    --assistant-message: #374151;
-    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+    --primary-color: #ec4899;
+    --primary-hover: #db2777;
+    --background: #fdf2f8;
+    --surface: #fce7f3;
+    --surface-hover: #fbcfe8;
+    --text-primary: #831843;
+    --text-secondary: #a8467a;
+    --border-color: #f9a8d4;
+    --user-message: #ec4899;
+    --assistant-message: #fce7f3;
+    --shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.15);
     --radius: 12px;
-    --focus-ring: rgba(37, 99, 235, 0.2);
-    --welcome-bg: #1e3a5f;
-    --welcome-border: #2563eb;
+    --focus-ring: rgba(236, 72, 153, 0.2);
+    --welcome-bg: #fdf2f8;
+    --welcome-border: #ec4899;
 }
 
 /* Base Styles */
@@ -54,7 +54,7 @@ header {
 header h1 {
     font-size: 1.75rem;
     font-weight: 700;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -277,15 +277,15 @@ header h1 {
 }
 
 .message-content code {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(236, 72, 153, 0.1);
     padding: 0.125rem 0.25rem;
     border-radius: 3px;
     font-family: 'Fira Code', 'Consolas', monospace;
     font-size: 0.875em;
 }
 
 .message-content pre {
-    background-color: rgba(0, 0, 0, 0.2);
+    background-color: rgba(236, 72, 153, 0.1);
     padding: 0.75rem;
     border-radius: 4px;
     overflow-x: auto;
@@ -298,7 +298,7 @@ header h1 {
 }
 
 .message-content blockquote {
-    border-left: 3px solid var(--primary);
+    border-left: 3px solid var(--primary-color);
     padding-left: 1rem;
     margin: 0.5rem 0;
     color: var(--text-secondary);