Nonprofit WebMCP Template
A complete WebMCP template for nonprofit organizations featuring 14 AI-agent tools -- program discovery, donation processing, volunteer registration, impact reporting, events, and contact. Supports both imperative JavaScript and declarative HTML integration.
Load live preview on demand to keep template pages fast.
// Register get_programs tool
navigator.modelContext.registerTool({
name: "get_programs",
description: "List all active programs and initiatives run by the foundation.",
inputSchema: {
"type": "object",
"properties": {
"category": {
"type": "string",
"enum": [
"education",
"health",
"environment",
"community",
"emergency"
],
"description": "Filter by program category"
},
"status": {
"type": "string",
"enum": [
"active",
"upcoming",
"completed"
],
"description": "Filter by program status"
}
},
"required": []
},
annotations: {"readOnlyHint":true},
execute: async (params) => {
const response = await fetch("/api/get_programs", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
return response.json();
}
});What's Included
Full coverage from program discovery to donations, volunteering, events, and partnerships.
Donation, volunteer registration, and contact forms that AI agents can read and submit directly.
Structured data on lives reached, funds deployed, and outcomes so agents can answer donor questions.
Browse opportunities by skill and schedule, then register in a single agent interaction.
Horizon Foundation branded dark theme with blue 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 Donor Journey
Covers every step from program discovery to donation and receipt, so agents never hit a dead end.
Structured Impact Data
Tools return typed JSON with metrics, tiers, and outcomes -- no scraping needed.
Safe Payment Pattern
The donate tool uses requiresUserInteraction to ensure humans confirm payment before it processes.
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.
Connect Your CRM & Payment API
Replace the mock execute() functions with real calls to your donation processor, CRM, and volunteer database.
Customize Branding
Update the foundation name, colors, programs, and imagery to match your organization.
Test with an AI Agent
Open the page in an MCP-capable browser and verify the full discover-donate-volunteer 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.