WebMCP implementieren: Schritt-für-Schritt-Anleitung mit Best Practices für Chrome 146+

export {};

declare global {
  interface WebMCPSubmitEvent extends Event {
    agentInvoked?: boolean;
    respondWith?: (response: string) => void;
  }

  interface WebMCPTool {
    name: string;
    description: string;
    execute: (params: Record<string, unknown>) => unknown | Promise<unknown>;
    inputSchema: {
      type: string;
      properties?: Record<string, {
        type: string;
        description?: string;
        enum?: string[];
      }>;
      required?: string[];
    };
  }

  interface ModelContext {
    registerTool: (tool: WebMCPTool) => void;
    unregisterTool: (name: string) => void;
  }

  interface Navigator {
    modelContext?: ModelContext;
  }
}

declare module "react" {
  interface HTMLAttributes<T> {
    toolname?: string;
    tooldescription?: string;
    toolparamdescription?: string;
  }
}

<form
  id="contactForm"
  toolname="contact_form"
  tooldescription="Submit a contact request with name, email, reason, and message."
  noValidate
  onSubmit={handleSubmit}
>
  <input
    type="text"
    name="name"
    required
    toolparamdescription="Full name of the person submitting the request"
  />
  <input
    type="email"
    name="email"
    required
    toolparamdescription="Email address for follow-up communication"
  />
  <select
    name="reason"
    toolparamdescription="Reason for contact: 'support', 'sales', 'partnership', or 'other'"
  >
    <option value="support">Support</option>
    <option value="sales">Sales</option>
  </select>
  <textarea
    name="message"
    required
    toolparamdescription="Detailed message describing the request"
  />
  <button type="submit">Send</button>
</form>

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();

  const nativeEvent = e.nativeEvent as WebMCPSubmitEvent;
  if (nativeEvent.agentInvoked) {
    const fd = new FormData(e.currentTarget);
    const data = {
      name: fd.get("name") as string,
      email: fd.get("email") as string,
      reason: fd.get("reason") as string,
      message: fd.get("message") as string,
    };

    const ref = "REF-" + Math.random().toString(36).substring(2, 8).toUpperCase();

    // MUST be called synchronously, before any await!
    nativeEvent.respondWith?.(
      `Contact submitted successfully. Reference: ${ref}`
    );

    await submitToBackend(data);
    setSubmitted(true);
    return;
  }

  // Human path (unchanged)
  setIsSubmitting(true);
};

const toolRegisteredRef = useRef(false);

useEffect(() => {
  const mc = navigator.modelContext;
  if (!mc || toolRegisteredRef.current) return;
  toolRegisteredRef.current = true;

  mc.registerTool({
    name: "submit_contact_request",
    description: "Submit a contact request programmatically.",
    inputSchema: {
      type: "object",
      properties: {
        name: { type: "string", description: "Full name" },
        email: { type: "string", description: "Email address" },
        reason: { type: "string", description: "Contact reason" },
        message: { type: "string", description: "Message body" },
      },
      required: ["name", "email", "reason", "message"],
    },
    execute: async (params: Record<string, unknown>) => {
      return dispatchAndWait("webmcp:submitContact", params);
    },
  });
}, []);

export function dispatchAndWait(
  eventName: string,
  detail: Record<string, unknown>,
  timeoutMs = 30000
): Promise<string> {
  return new Promise((resolve, reject) => {
    const requestId = Math.random().toString(36).substring(2, 15);
    const completionEvent = `tool-completion-${requestId}`;
    let timer: ReturnType<typeof setTimeout>;

    const handleCompletion = (e: Event) => {
      clearTimeout(timer);
      window.removeEventListener(completionEvent, handleCompletion);
      const customEvent = e as CustomEvent<{ result: string }>;
      resolve(customEvent.detail?.result ?? "Action completed");
    };

    window.addEventListener(completionEvent, handleCompletion);
    timer = setTimeout(() => {
      window.removeEventListener(completionEvent, handleCompletion);
      reject(new Error(`WebMCP tool timeout: ${eventName}`));
    }, timeoutMs);

    window.dispatchEvent(
      new CustomEvent(eventName, { detail: { ...detail, requestId } })
    );
  });
}

import { NextResponse } from "next/server";

export const runtime = "edge";

export async function GET() {
  const manifest = {
    spec: "webmcp/0.1",
    site: {
      name: "My Website",
      version: "2026.02",
      description: "Website description for AI agents.",
      pages: [
        {
          url: "/contact",
          intents: ["contact_form", "submit_contact_request"],
        },
      ],
      flows: [
        {
          id: "contact_inquiry",
          description: "Submit a contact request.",
          steps: [{ intent: "contact_form", page: "/contact" }],
        },
      ],
    },
  };

  return NextResponse.json(manifest, {
    headers: {
      "Cache-Control": "public, max-age=86400, s-maxage=86400",
      "Access-Control-Allow-Origin": "*",
    },
  });
}

{
  "spec": "webmcp/0.1",
  "page": { "url": "/contact", "title": "Contact Us" },
  "context": {
    "purpose": "Contact form for inquiries and support requests",
    "entities": ["contact_request"],
    "auth": { "required": false }
  },
  "intents": [
    {
      "id": "contact_form",
      "description": "Submit a contact request",
      "inputs": [
        { "name": "name", "type": "string", "required": true },
        { "name": "email", "type": "email", "required": true },
        { "name": "message", "type": "string", "required": true }
      ],
      "policy": { "rateLimit": "5/min" }
    }
  ]
}

"use client";
import { useEffect } from "react";

export default function WebMCPStyles() {
  useEffect(() => {
    const style = document.createElement("style");
    style.setAttribute("data-webmcp", "true");
    style.textContent = [
      "*:tool-form-active {",
      "  outline: 2px solid rgba(147, 51, 234, 0.5);",
      "  outline-offset: 2px;",
      "}",
      "*:tool-submit-active {",
      "  background: linear-gradient(110deg, #7c3aed 30%, #a78bfa 50%, #7c3aed 70%);",
      "  background-size: 200% 100%;",
      "  animation: webmcp-shimmer 2s infinite linear;",
      "}",
      "@keyframes webmcp-shimmer {",
      "  to { background-position: 200% center; }",
      "}",
    ].join("\n");
    document.head.appendChild(style);
    return () => { style.remove(); };
  }, []);
  return null;
}