Construction WebMCP Template
A complete construction company website template with 14 WebMCP tools for service discovery, portfolio browsing, estimate requests, site visit scheduling, and client communication — ready for AI agent integration.
Load live preview on demand to keep template pages fast.
// Register get_services tool
navigator.modelContext.registerTool({
name: "get_services",
description: "Browse construction services including residential, commercial, renovation, and specialty work.",
inputSchema: {
"type": "object",
"properties": {
"category": {
"type": "string",
"enum": [
"residential",
"commercial",
"renovation",
"addition",
"specialty",
"all"
],
"description": "Service category filter"
},
"project_size": {
"type": "string",
"enum": [
"small",
"medium",
"large"
],
"description": "Approximate project size"
}
},
"required": []
},
annotations: {"readOnlyHint":true},
execute: async (params) => {
const response = await fetch("/api/get_services", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
return response.json();
}
});What's Included
Complete set of construction tools covering services, portfolio, estimates, scheduling, and more.
Premium dark UI with amber accents, glass cards, and subtle dot-pattern backgrounds.
Tools exposed via both JavaScript registration and HTML form attributes.
Graceful degradation with navigator.modelContext feature detection.
Single-file deployment — no external dependencies, frameworks, or build steps.
Six services and six portfolio projects with locations, values, and timelines.
Why This Template Works
Designed for AI agent interoperability with structured tool definitions.
Structured Tool Schemas
Every tool has a complete JSON Schema so AI agents can discover parameters and constraints automatically.
Dual API Surface
Declarative HTML forms for simple actions and imperative JS for programmatic access — agents choose their preferred method.
Domain-Specific Vocabulary
Tool names and parameters use construction terminology agents already understand from training data.
Homeowner Journey
Agents can browse services, review portfolio examples, request estimates, and schedule site visits — mirroring a real client journey.
Implementation Guide
Follow these steps to deploy the template on your website.
Download the Template
Copy or download the HTML file and place it at the root of your construction company website.
Connect Your Backend
Replace the /api/* endpoints in the JavaScript with your actual project management and CRM API.
Customize Content
Update the service cards and portfolio with your actual projects, photos, and pricing.
Test with an AI Agent
Use Claude, ChatGPT, or another WebMCP-compatible agent to verify tool discovery and execution.
Deploy and Monitor
Deploy to production and track agent interactions through your analytics pipeline.
Download Options
Other Industry Templates
Ready to Make Your Site Agent-Ready?
Deploy this template and start receiving structured traffic from AI agents.