Portfolio WebMCP Template
A complete WebMCP template for creative professionals and developers featuring 14 AI-agent tools -- project showcase, skills and experience, testimonials, availability checking, quote requests, resume downloads, and direct messaging. Supports both imperative JavaScript and declarative HTML integration.
Load live preview on demand to keep template pages fast.
// Register get_projects tool
navigator.modelContext.registerTool({
name: "get_projects",
description: "List all portfolio projects with title, category, tech stack, and thumbnail.",
inputSchema: {
"type": "object",
"properties": {
"category": {
"type": "string",
"enum": [
"web",
"mobile",
"design",
"open-source",
"branding",
"interactive"
],
"description": "Filter by project category"
},
"tech": {
"type": "string",
"description": "Filter by technology (e.g. react, typescript, figma)"
}
},
"required": []
},
annotations: {"readOnlyHint":true},
execute: async (params) => {
const response = await fetch("/api/get_projects", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
return response.json();
}
});What's Included
Full coverage from project browsing to quote requests, resume downloads, testimonials, and messaging.
Quote request, contact, and message forms that AI agents can read and submit directly.
Agents can check freelance availability and earliest start date before proposing engagements.
Structured data for all portfolio projects with tech stacks, outcomes, and service offerings.
Alex Chen branded dark theme with indigo accents and glass-morphism cards.
Self-contained HTML file -- no build step, no dependencies, instant deployment.
Why This Template Works
Designed for AI agent interoperability with structured tool definitions.
Complete Client Journey
Covers every step from discovering projects to requesting a quote, so agents never hit a dead end.
Structured Portfolio Data
Tools return typed JSON with tech stacks, outcomes, and testimonials -- no scraping needed.
Professional Credibility
Experience, certifications, and client testimonials build trust before the first conversation.
Dual API Surface
Imperative JS for rich agents and declarative HTML forms for simpler crawlers -- both work out of the box.
Implementation Guide
Follow these steps to deploy the template on your website.
Drop in the HTML
Copy the template HTML into your site. All tools and styles are self-contained -- no external dependencies.
Replace Sample Data
Update the projects, skills, experience, and services arrays with your own portfolio content.
Customize Branding
Update the name, accent color, bio, social links, and rates to match your personal brand.
Test with an AI Agent
Open the page in an MCP-capable browser and verify the full discover-explore-quote flow.
Deploy & Verify
Publish the page and use the WebMCP inspector to confirm all 14 tools are registered.
Download Options
Other Industry Templates
Ready to Make Your Site Agent-Ready?
Deploy this template and start receiving structured traffic from AI agents.