{"slug": "how-i-integrated-webmcp-into-my-developer-portfolio-and-turned-it-into-an-ai", "title": "How I Integrated WebMCP into My Developer Portfolio (And Turned It into an AI-Callable Agent)", "summary": "A developer built an AI-callable developer portfolio at techiewithbeard.com using Angular 22 and the emerging WebMCP (Web Model Context Protocol) standard, exposing structured tools that AI agents can query instead of scraping the DOM. The site registers tools such as searchSkills and ask, letting browser agents and LLM assistants retrieve information about the developer's experience and projects directly through the console via document.modelContext.listTools(). The project pairs its LLM endpoint with a structured local fallback for offline resilience and argues that agent-readable portfolios offer an advantage over static HTML or PDFs.", "body_md": "Most developer portfolios are still static digital brochures.\n\nWith the web is increasingly being explored by something else: **AI agents**.\n\nBrowser 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.\n\nIt 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:\n\n*\"Does this developer have experience with Angular and AI agents?\"*\n\nSo I decided to experiment with that idea on my own portfolio, [techiewithbeard.com](https://www.techiewithbeard.com).\n\nInstead of building another portfolio that simply **presents information to humans**, I wanted to build one that could **expose its information directly to AI agents**.\n\nThe 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](https://angular.dev/ai/webmcp)\n\nNow, 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.\n\nThis 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*.\n\nInstead 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:\n\n``` js\nimport { ApplicationConfig, APP_INITIALIZER, provideExperimentalZonelessChangeDetection } from '@angular/core';\nimport { initWebMcp } from './core/webmcp/webmcp.init';\nimport { environment } from '../environments/environment';\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideExperimentalZonelessChangeDetection(),\n    {\n      provide: APP_INITIALIZER,\n      useFactory: () => () => initWebMcp(environment.apiUrl),\n      multi: true\n    }\n  ]\n};\n```\n\nBecause 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.\n\nYou 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:\n\n```\n// 1. Inspect all WebMCP registered tools\ndocument.modelContext.listTools();\n// 2. Search for specific technical competencies\nawait window.agentAPI.searchSkills(\"LangGraph\");\n// 3. Ask a natural language question\nawait window.agentAPI.ask(\"What is Vishnu's experience with Angular and microfrontends?\");\n```\n\nNow rather than scraping my page it can communicate with the exposed APIs\n\n**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.\n\n**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.\n\n**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.\n\n*Check out the live portfolio at [techiewithbeard.com](https://www.techiewithbeard.com) and test `document.modelContext.listTools()` in your console!*\n\n*Are you experimenting with Model Context Protocol or WebMCP in your web apps? Let me know in the comments below!*", "url": "https://wpnews.pro/news/how-i-integrated-webmcp-into-my-developer-portfolio-and-turned-it-into-an-ai", "canonical_source": "https://dev.to/vishnu_thankappan/how-i-integrated-webmcp-into-my-developer-portfolio-and-turned-it-into-an-ai-callable-agent-36bj", "published_at": "2026-09-14 02:00:34+00:00", "updated_at": "2026-09-14 02:25:28.838955+00:00", "lang": "en", "topics": ["ai-agents", "ai-tools", "developer-tools", "ai-products", "artificial-intelligence"], "entities": ["WebMCP", "Angular", "Model Context Protocol", "techiewithbeard.com", "ChatGPT", "Chrome", "Firefox"], "alternates": {"html": "https://wpnews.pro/news/how-i-integrated-webmcp-into-my-developer-portfolio-and-turned-it-into-an-ai", "markdown": "https://wpnews.pro/news/how-i-integrated-webmcp-into-my-developer-portfolio-and-turned-it-into-an-ai.md", "text": "https://wpnews.pro/news/how-i-integrated-webmcp-into-my-developer-portfolio-and-turned-it-into-an-ai.txt", "jsonld": "https://wpnews.pro/news/how-i-integrated-webmcp-into-my-developer-portfolio-and-turned-it-into-an-ai.jsonld"}}