Ask The Polymath is a conversational AI assistant built on Anthropic's Claude API, providing instant, focused knowledge across any topic. The application creates a clean chat interface where users ask questions and receive detailed, contextual responses - from explaining complex concepts to providing research assistance, creative writing help, or technical guidance.

The technical challenge was creating a conversational experience that feels natural and maintains context across multiple exchanges while handling Claude's API efficiently. The solution implements message threading with context retention, streaming responses for real-time feedback, and intelligent session management that balances conversation continuity with token usage optimization.

• Claude API Integration: Real-time communication with Anthropic's Claude API using the Messages endpoint, sending user queries and conversation history to generate contextually aware responses. Implements proper API authentication, error handling, rate limiting, and timeout management for production reliability
• Conversation Threading: Maintains complete conversation history by building message arrays containing all previous user/assistant exchanges. Each API request includes recent context (typically last 10-20 messages) enabling Claude to reference earlier discussion points, maintain topic continuity, and provide coherent multi-turn conversations
• Streaming Response Display: Uses Server-Sent Events (SSE) or chunked responses to display Claude's answers progressively as they generate, creating natural typing effect. Users see responses appearing word-by-word rather than waiting for complete generation, improving perceived responsiveness and engagement
• Markdown Rendering: Claude's responses support markdown formatting (bold, italic, code blocks, lists, links) which are parsed and rendered as styled HTML using marked.js or similar library. Code blocks include syntax highlighting via Prism.js or highlight.js for technical discussions
• Session Management: Conversations persist in browser SessionStorage, allowing users to refresh the page without losing context. Implements conversation saving/loading features, with optional LocalStorage persistence for returning users. Each session has unique ID for tracking and potential server-side storage
• Input Validation & Safety: Client-side input sanitization prevents injection attacks, length validation ensures prompts stay within API limits, and content filtering detects potentially harmful requests. Server-side validation provides additional security layer before API calls

Message Flow Architecture: User submits question → validate input → append to conversation history → send to Claude API with full context → receive streaming response → parse markdown → render to chat UI → save to session storage. Each step includes error handling and user feedback (loading indicators, error messages, retry options).

API Request Structure: Uses Anthropic's Messages API format with array of message objects, each containing role ('user' or 'assistant') and content. Includes system prompt defining Claude's behavior (helpful, concise, accurate), temperature setting (0.7 for balanced creativity/precision), and max_tokens limit. Context window management truncates old messages when approaching token limits.

Streaming Implementation: For streaming responses, establishes Server-Sent Events connection or uses fetch with ReadableStream. Processes incoming chunks (delta text fragments), appends to message container in real-time, and handles stream completion/errors. Streaming disabled on slow connections (detected via Network Information API) to prevent choppy experience.

Markdown Processing Pipeline: Receives Claude's markdown text → sanitize HTML to prevent XSS → parse markdown to HTML using marked.js → apply syntax highlighting to code blocks → insert into DOM with proper escaping → handle link targets (external links open in new tabs). Supports tables, nested lists, blockquotes, and inline code.

Context Management Strategy: Maintains full conversation in memory for current session, but only sends most recent N messages to API (typically 10-20) to manage token costs and stay within context limits. Implements "conversation summarization" - when approaching limits, older messages are summarized by Claude and replaced with summary, preserving key information while reducing token count.

Conversational AI Interface Pattern: The complete chat UI implementation - message threading, context retention, streaming display, error recovery - provides reference architecture for any conversational AI application. Shows how to handle asynchronous API calls, manage state across interactions, and create responsive chat experiences.

Streaming Response Handler: The Server-Sent Events or ReadableStream implementation demonstrates how to process chunked API responses in real-time. Pattern applies to any streaming API - not just AI but also real-time data feeds, live updates, progress indicators. Shows proper handling of stream lifecycle (open, data, error, close).

Context Window Management: The sliding window approach for conversation history - keeping recent messages while summarizing or dropping old ones - demonstrates essential technique for working with LLM APIs that have token limits. Pattern crucial for building chat applications, document Q&A systems, or any multi-turn AI interaction.

Markdown Security Pattern: The sanitize-then-parse approach prevents XSS attacks while preserving formatting capabilities. Always sanitize user input and AI output before rendering as HTML, even when AI is trusted source (could inadvertently repeat malicious content from user input). Applies to any system rendering user-generated or dynamic content.

Challenge: Managing conversation context without exceeding API token limits
Solution: Implemented tiered context management. Recent messages (last 5-10) sent in full to preserve immediate context. Older messages summarized using Claude itself - periodically request "summarize our conversation so far" and replace old messages with summary. This maintains conversation coherence while staying within token budgets, even for lengthy discussions.

Challenge: Streaming responses sometimes arrive in partial sentences or code blocks
Solution: Buffer incomplete elements until closure detected. For code blocks, track opening ``` and don't apply syntax highlighting until closing ``` received. For markdown lists or tables, accumulate items until complete structure received. Display buffered content as plain text during accumulation, then reprocess as complete markdown when finalized.

Challenge: Users expect instant responses but API calls take 1-3 seconds
Solution: Multi-layered feedback system. Immediate visual acknowledgment (user message appears instantly), then "thinking" indicator (animated dots), then streaming response (text appears progressively). Psychological research shows perceived wait time decreases when users see progress indicators - streaming text feels faster than same total time with blank screen.

Challenge: Network errors, API outages, or rate limits interrupt conversations
Solution: Comprehensive error handling with automatic retry logic. Transient errors (network timeouts) trigger 3 automatic retries with exponential backoff. Rate limit errors show user-friendly message with countdown to retry availability. API errors distinguish between client issues (invalid request - show error) and server issues (Claude downtime - enable manual retry). All errors preserve conversation state for seamless recovery.

This project provides production-ready patterns for building conversational AI interfaces. The architecture demonstrates how to integrate Claude API (or similar LLMs) into web applications, handling the complexities of context management, streaming responses, and error recovery. These patterns transfer directly to chatbots, AI assistants, document Q&A systems, or any conversational interface.

The streaming implementation is particularly valuable - showing how to provide real-time feedback during potentially slow API operations. The technique applies beyond AI to any scenario where server processing takes seconds: report generation, data analysis, file processing. Streaming progress creates better user experience than loading spinners alone.

The context management strategy solves a fundamental challenge in LLM applications: maintaining conversation coherence within token limits. The sliding window with summarization pattern is essential knowledge for anyone building multi-turn AI interactions. Study this carefully - it's the difference between toy demos and production applications.

The markdown rendering pipeline with security considerations shows proper handling of dynamic content. Never trust any source - even AI - when rendering to HTML. The sanitize-then-parse pattern prevents XSS vulnerabilities while preserving formatting capabilities. This is fundamental web security every developer must understand.

• Anthropic Claude API (conversational AI engine)
• Server-Sent Events / ReadableStream (streaming responses)
• Marked.js (markdown parsing and rendering)
• Prism.js or Highlight.js (syntax highlighting for code)
• DOMPurify (HTML sanitization for security)
• SessionStorage & LocalStorage (conversation persistence)
• Vanilla JavaScript (chat interface and state management)
• WordPress custom plugin architecture
• PHP (API key management and proxy requests)