Most developer portfolios are still static digital brochures. With the web is increasingly being explored by something else: AI agents. Browser agents, LLM-powered tools, and desktop AI assistants are starting to navigate websites on behalf of users. When one of these agents encounters a traditional developer portfolio, however, it has very little to work with beyond what a human sees. It may have to scrape the DOM, infer meaning from CSS selectors, follow brittle page structures, or even spend expensive vision tokens interpreting screenshots just to answer a simple question like: "Does this developer have experience with Angular and AI agents?" So I decided to experiment with that idea on my own portfolio, techiewithbeard.com. Instead of building another portfolio that simply presents information to humans, I wanted to build one that could expose its information directly to AI agents. The result is an AI-ready, interactive web application built with Angular 22 and the emerging WebMCP (Web Model Context Protocol) standard. https://angular.dev/ai/webmcp Now, an AI agent—or a developer with nothing more than browser DevTools—can discover the capabilities exposed by my portfolio, query structured information about my experience and projects, and interact with those tools in real time. This article walks through how I built it, why WebMCP changes the way we can think about developer portfolios, and what happens when a portfolio becomes something an AI can actually interact with rather than merely read. 🏗️ How It Works in Action Instead of an AI hallucinating or scraping broken CSS selectors, here is what happens when someone asks ChatGPT or an AI browser agent about my background: import { ApplicationConfig, APP_INITIALIZER, provideExperimentalZonelessChangeDetection } from '@angular/core'; import { initWebMcp } from './core/webmcp/webmcp.init'; import { environment } from '../environments/environment'; export const appConfig: ApplicationConfig = { providers: [ provideExperimentalZonelessChangeDetection(), { provide: APP_INITIALIZER, useFactory: () => () => initWebMcp(environment.apiUrl), multi: true } ] }; Because Angular 22 is running with zoneless change detection and signals, WebMCP tool queries execute without triggering unnecessary Zone.js dirty checks or UI micro-stutters. Step 5: Test It Directly in DevTools You don't need a special browser extension to see this working. Anyone can open Chrome/Firefox DevTools on the site and test it right from the console: // 1. Inspect all WebMCP registered tools document.modelContext.listTools(); // 2. Search for specific technical competencies await window.agentAPI.searchSkills("LangGraph"); // 3. Ask a natural language question await window.agentAPI.ask("What is Vishnu's experience with Angular and microfrontends?"); 💡 What I Learned Building This Portfolios should be agent-readable: As autonomous agents become the primary way people research software engineers and tech leaders, having an open, machine-readable tool interface (mcp.json + WebMCP) gives you a massive advantage over static PDFs or plain HTML. Offline-first resilience is non-negotiable: Never let a cold server ruin an interaction. Pairing your LLM endpoint with a structured local fallback guarantees 0ms response times even if your cloud backend is sleeping. Standards over custom hacks: Building on the Model Context Protocol specification means any future browser extension or LLM agent adopting MCP will instantly know how to interact with your site out-of-the-box. Check out the live portfolio at techiewithbeard.com and test document.modelContext.listTools() in your console! Are you experimenting with Model Context Protocol or WebMCP in your web apps? Let me know in the comments below!