santifer/cv-santiago: Production-Grade AI Portfolio with Agentic RAG

Static CVs list skills—they don't prove them. Every developer has faced the gap between a PDF full of buzzwords and the actual systems they can build. santifer/cv-santiago closes that gap by turning a resume into a production-grade demonstration: an interactive portfolio with a dual-mode AI chatbot, agentic RAG, full LLMOps observability, and a closed-loop evaluation pipeline that generates tests from production failures. Built with React^{↗ Bright Coding Blog} 19, TypeScript, and the Claude API, this open-source project shows what you can build rather than telling.

What is santifer/cv-santiago?

santifer/cv-santiago is an interactive CV and portfolio project created by Santiago Fernández. It functions as both a personal website and a technical showcase—a live application that demonstrates the exact AI engineering, frontend, and DevOps^{↗ Bright Coding Blog} skills it describes. The project sits at the intersection of generative AI applications, LLMOps, and modern React development.

With 746 GitHub stars and 260 forks, the repository has gained meaningful traction among developers interested in production AI patterns. The primary language is HTML (reflecting the prerendered output and static site architecture), with the core logic in TypeScript. The last commit was July 14, 2026, indicating active maintenance. No license is specified in the repository metadata.

What distinguishes this project from typical portfolio templates is its self-referential architecture: the chatbot "Santi" responds in first person as Santiago, drawing from a RAG pipeline fed by the owner's actual case studies and experience. The LLMOps dashboard, evaluation suite, and security defenses aren't decorative—they're functional systems processing real production traffic. This makes santifer/cv-santiago particularly relevant for developers evaluating how to structure AI-native applications with observability, safety, and continuous evaluation built in from day one.

Key Features

Dual-Mode AI Chatbot The centerpiece is "Santi," a chatbot operating in two modes: text via Claude Sonnet, and voice via OpenAI's Realtime API (audio-to-audio). Both modes share a unified RAG pipeline, ensuring consistent grounding regardless of input modality. The voice mode costs approximately $0.25 per session.

Agentic RAG with Hybrid Search Retrieval isn't basic vector search. The pipeline combines pgvector semantic search with BM25 full-text search, then applies Claude Haiku for reranking and result diversification. An intent classification layer determines when RAG activates, keeping costs low for conversational queries that don't require external knowledge.

6-Layer Prompt Injection Defense Security is treated as a first-class concern: keyword detection, canary tokens, fingerprinting, anti-extraction measures, online safety scoring, and adversarial red teaming. Real-time jailbreak alerts fire via email when attacks are detected.

71 Automated Evaluations as CI Gate Tests span 10 categories including factual accuracy, persona adherence, boundary testing, RAG quality, multi-turn coherence, and voice quality. Approximately 70% are deterministic (regex, contains, word count); 30% use LLM-as-Judge via Haiku. These run on every push and block deployment on failure.

LLMOps Dashboard (/ops) A password-protected, 8-tab dashboard consuming real Langfuse and Supabase data: Overview KPIs, conversation drilling with span-level cost and latency, component-level cost breakdowns, RAG activation metrics, security funnel visualization, eval pass rates, voice session analytics, and prompt version tracking.

Closed-Loop Quality System Production traces undergo online Haiku scoring. Quality scores below 0.7 automatically generate new test cases, which enter the CI gate to prevent regressions in future deploys.

GEO and AI-Search Optimization The site implements llms.txt, JSON-LD structured data, and an AI-crawler-friendly robots.txt—practical patterns for developers targeting visibility in emerging AI search interfaces.

Use Cases

1. Technical Portfolio for AI Engineers The primary use case: replace a static CV with a system that is the proof. Developers in machine learning, LLM application engineering, or AI infrastructure can adapt this architecture to showcase their own projects, with the chatbot becoming an interactive narrator of their work.

2. LLMOps Reference Architecture Teams building production AI products can study the integration patterns: Langfuse tracing with cost attribution per span, prompt versioning with hash-based sync, evaluation-driven deployment gates, and dashboard design for non-technical stakeholders. The 102 dashboard API tests and 67 contract tests demonstrate how to enforce interface stability in internal tools.

3. Voice-First AI Application Prototype The OpenAI Realtime WebSocket integration with shared RAG backend provides a complete starting point for voice assistants requiring grounded, retrieval-augmented responses. The cost estimation (~$0.25/session) gives realistic budgeting data.

4. Bilingual Content Systems With full i18n infrastructure (Spanish/English), JSON-LD generation, prerendered HTML, and programmatic SEO^{↗ Bright Coding Blog} validation, santifer/cv-santiago offers patterns for content-heavy sites targeting multilingual audiences or AI search indexing.

5. Security-Hardened Chatbot Research The 6-layer defense with adversarial testing scripts (npm run adversarial) provides a testbed for prompt injection mitigation techniques, with real attack logs and automated red team generation.

Installation & Setup

The README provides straightforward setup commands. Reproduce them exactly:

# Clone the repository
git clone https://github.com/santifer/cv-santiago.git

# Enter project directory
cd cv-santiago

# Install dependencies
npm install

# Start development server
npm run dev

After npm run dev, open localhost:5173 in your browser.

Environment Variables

The application requires several API keys and service configurations. Create a .env file with:

# Core AI providers
ANTHROPIC_API_KEY=           # Claude API for chatbot
OPENAI_API_KEY=              # Embeddings + Voice Realtime

# RAG infrastructure
SUPABASE_URL=                # Supabase project URL
SUPABASE_SERVICE_ROLE_KEY=   # Supabase service key

# Observability
LANGFUSE_PUBLIC_KEY=         # Langfuse tracing
LANGFUSE_SECRET_KEY=         # Langfuse tracing

# Alerts & Dashboard
RESEND_API_KEY=              # Jailbreak email alerts
OPS_DASHBOARD_SECRET=        # Dashboard password (/ops)

The build pipeline is chained and comprehensive: rag:sync → prompt:sync → embed-evals → reddit-stats → tsc → vite → sitemap → validate → prerender. Run npm run build to execute the full sequence, which includes SEO validation, llms.txt consistency checks, and SSR prerendering with critical CSS extraction.

Real Code Examples

Example 1: Chat Edge Function Architecture

The README documents the request flow through api/chat.js, the Vercel Edge function handling all text chat interactions:

User message → FloatingChat.tsx → api/chat.js (Vercel Edge)
                                    ├── System prompt (Langfuse registry + fallback)
                                    ├── Claude Sonnet (tool_use decision)
                                    ├── Agentic RAG (if needed):
                                    │     ├── OpenAI embeddings (text-embedding-3-small)
                                    │     ├── Supabase pgvector (semantic) + full-text (BM25)
                                    │     └── Claude Haiku (reranking + diversification)
                                    ├── Claude Sonnet (streaming generation)
                                    ├── Langfuse tracing (every span with cost)
                                    └── waitUntil → Haiku scoring (0ms added latency)

This architecture reveals several production patterns: deferred scoring via waitUntil to avoid latency impact, model cascading (Haiku for cheap decisions/reranking, Sonnet for generation), and cost attribution at the span level through Langfuse metadata. The fallback to chatbot-prompt.txt when Langfuse is unavailable shows defensive design for prompt management.

Example 2: Voice Mode Integration

Voice handling follows a parallel but distinct path:

Voice mode → useVoiceMode.ts → api/voice-token.js → OpenAI Realtime WebSocket
                                  └── api/rag-search.js (function calling for RAG)

The useVoiceMode.ts hook manages WebSocket lifecycle, audio capture, and transcript persistence. The api/voice-token.js endpoint generates ephemeral tokens with rate limiting—critical for client-side security since Realtime API keys cannot be exposed to browsers. RAG is exposed through function calling rather than direct embedding injection, maintaining architectural consistency with the text path while adapting to OpenAI's Realtime API constraints.

Example 3: Evaluation Runner

The evaluation system is invoked via CLI:

npm run evals

This executes evals/runner.ts against 71 test cases across 10 categories. The deterministic assertions in evals/assertions.ts handle checks like factual accuracy and boundary testing, while evals/llm-judge.ts invokes Haiku for subjective quality assessment. Results embed into the dashboard through scripts/embed-evals.ts, creating a feedback loop from test execution to visual reporting.

Example 4: Prompt Versioning with Hash-Based Sync

npm run prompt:sync

This script (scripts/sync-prompt-to-langfuse.ts) compares local prompt content against Langfuse's registry using content hashing, skipping upload when unchanged. The npm run prompt:regression command then enables A/B comparison between versions—essential for understanding how prompt changes affect behavior across the 71-test evaluation suite.

Advanced Usage & Best Practices

Cost Optimization Through Intent Classification The RAG pipeline only activates when Haiku-classified intent requires external knowledge. For a portfolio site with 200 conversations/day, estimated costs run **$30/month** with <$0.005 per text conversation. Monitor the Costs tab in /ops to identify which components dominate spend—typically embedding generation and reranking for RAG-heavy queries.

Local Development Without Cloud Services Several features degrade gracefully: the chatbot falls back to chatbot-prompt.txt when Langfuse is unavailable, and the dashboard can be explored with mock data if Supabase credentials are omitted. However, full RAG functionality requires Supabase with pgvector enabled.

Extending the Evaluation Suite The 71 tests are JSON datasets in evals/datasets/. New case studies should include corresponding RAG quality tests (rag_quality category) to verify retrieval accuracy. The closed-loop system (evaluate-traces.ts) will automatically incorporate production failures—run this periodically against live Langfuse data.

Security Hardening Before deploying with your own content, run npm run adversarial to generate 20+ attack variants against your customized system prompt. Review jailbreak email alerts to tune detection thresholds—the keyword layer catches obvious attempts, but fingerprinting and canary tokens address sophisticated extraction.

For teams considering similar architectures, [INTERNAL_LINK: llmops-observability-patterns] covers complementary approaches using alternative tracing providers.

Comparison with Alternatives

Trade-offs to consider: santifer/cv-santiago is opinionated about its stack (React 19, Vite 7, Tailwind v4, Vercel Edge) and tightly couples to specific services (Langfuse, Supabase, Resend). The Vercel AI SDK offers more flexibility in model providers but lacks the integrated evaluation and security layers. LangChain examples provide broader ecosystem coverage but rarely demonstrate production observability patterns at this depth. For developers seeking a complete, documented reference rather than minimal scaffolding, santifer/cv-santiago's specificity is an advantage; for those needing provider flexibility, it requires more adaptation.

FAQ

What does it cost to run? ~$30/month at 200 conversations/day. Text conversations cost <$0.005; voice sessions ~$0.25. Infrastructure is free-tier (Vercel, Supabase, Langfuse).

Can I use this for my own portfolio? Yes, though no license is specified in the repository metadata. Review the code and contact the maintainer for clarification before commercial use.

Does it work without OpenAI? Voice mode requires OpenAI Realtime API. Text mode uses Claude (Anthropic). Embeddings use OpenAI's text-embedding-3-small. Full functionality requires both providers.

How do I access the LLMOps dashboard? Navigate to /ops and authenticate with OPS_DASHBOARD_SECRET. The dashboard consumes live Langfuse and Supabase data.

What's the minimum Supabase setup? A project with pgvector extension enabled, plus tables for document chunks and full-text search configuration.

Are the 71 evals customizable? Yes—datasets are JSON files in evals/datasets/. The runner supports adding categories and assertion types.

Does it support languages beyond English and Spanish? The i18n infrastructure is extensible, but only ES/EN content is included. Adding languages requires translation files and JSON-LD updates.

Conclusion

santifer/cv-santiago is best suited for AI engineers, full-stack developers, and technical product builders who want to demonstrate capability through architecture rather than claim it on paper. It offers a rare complete picture: not just a chatbot, but the observability, evaluation, security, and cost management required to run one responsibly in production.

The 746 stars and active maintenance suggest the approach resonates. Whether you're building your own interactive portfolio, researching LLMOps patterns, or prototyping voice-first AI applications, this repository provides concrete, production-tested patterns to study and adapt.

Explore the code, run the evaluations, and inspect the architecture diagram at santifer.io. Clone the repository at https://github.com/santifer/cv-santiago and start building something that proves what you can do.