智能体
dev.to ·
@Vishnu Thankappan
我把 WebMCP 集成进开发者作品集，把它变成可被 AI 调用的 Agent
作者认为多数开发者作品集仍是静态数字宣传册，而浏览器 Agent、LLM 工具和桌面 AI 助手开始代替用户浏览网站，面对传统作品集只能抓 DOM、从 CSS 选择器推断含义、跟随脆弱页面结构，甚至花昂贵的视觉 token 解读截图。因此他在自己的作品集 techiewithbeard.com 上实验 WebMCP，用 Angular 22 构建一个面向 AI Agent 直接暴露信息的交互式 Web 应用，而非只面向人类展示。
AI推荐理由 作者把 WebMCP 集成进自己的 Angular 22 作品集网站 techiewithbeard.com，使其信息可直接暴露给 AI Agent，而不是让 Agent 去抓 DOM、猜 CSS 选择器或消耗视觉 token 看截图。这是 WebMCP 这一新兴协议在真实站点上的个人实践，对关注 Agent 与 Web 交互的开发者有参考意义；但属于个人项目分享，未给出协议实现细节、兼容性数据或效果评估，证据强度有限。
60
正文
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
}
]
};
Enter fullscreen mode
Exit fullscreen mode
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?");
Enter fullscreen mode
Exit fullscreen mode
In Chat GPT
Now rather than scraping my page it can communicate with the exposed APIs
💡 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!