Try it yourself!
Ihr möchtet WebMCP selber testen? Ich habe eine kleine Spielwiese für euch gebaut. Diese findet ihr hier: alinr.com/tools/webmcp.html
Requirements
To use WebMCP, you need:
- Chrome: Version 146.0.7672.0 or higher.
- Flags: The "WebMCP for testing" flag must be enabled.
Setup
- Open Chrome and navigate to
chrome://flags/#enable-webmcp-testing - Set the flag to Enabled.
- Relaunch Chrome to apply the changes.
Install the Chrome Extension
Install the Model Context Tool Inspector Extension to see how WebMCP works in the demo.
The extension lets you inspect registered functions, execute them manually or test them with an agent.
Basis-Attribute im <form> Tag
Damit ein Agent dein Formular als „Tool" erkennt, braucht das <form>-Element spezifische Attribute. Sie machen das Formular im MCP-Kontext auffindbar und beschreiben seine Funktion.
search_flights oder add_todo. Dient dem Agenten als Identifikator.Feld-Annotationen
Diese Attribute auf <input>, <select> und <textarea> helfen dem Agenten, die geforderten Datenformate zu verstehen. Sie werden intern auf JSON Schema Properties gemappt.
name-Attribut des Inputs verwendet."Abreisedatum im Format YYYY-MM-DD". Fehlt dieses Attribut, nutzt der Browser den Text des <label> oder aria-description.toolparamdescription-Attribut muss aktuell auf dem ersten <input>-Element der Gruppe platziert werden, damit es für den gesamten Parameter gilt.JavaScript Event-Handling
WebMCP verändert das Submit-Verhalten, wenn ein Agent involviert ist. Statt Seiten-Reload kannst du dem Agenten direkt ein Ergebnis zurückgeben.
document.querySelector("form").addEventListener("submit", (e) => {
if (e.agentInvoked) {
e.preventDefault(); // Zwingend vor respondWith!
const result = performSearch(new FormData(e.target));
e.respondWith(Promise.resolve(result));
}
});event.agentInvoked ist ein neues Boolean – es ist true, wenn ein KI-Agent (nicht der User) das Submit ausgelöst hat.Lifecycle-Events
window, wenn der Agent beginnt, ein Formular auszufüllen. Ideal für Analytics oder UI-Sperren.event.preventDefault() muss zwingend aufgerufen werden, bevor respondWith() genutzt wird – sonst greift das Standard-Browserverhalten.CSS & Visuelles Feedback
Der User sieht zu, wie der Agent Felder ausfüllt. Dein UI sollte darauf visuell reagieren.
<form>. Nutze sie für einen farbigen Rahmen oder Highlight, solange der Agent arbeitet.form:tool-form-active {
outline: 2px solid #6ee7b7;
outline-offset: 4px;
transition: outline-color 0.3s;
}
button[type="submit"]:tool-submit-active {
opacity: 0.6;
pointer-events: none;
}Semantische Best Practices
Damit das LLM weniger Fehler macht, sollten Tools klar und robust beschrieben sein.
Positive Formulierungen
Beschreibe in tooldescription, was das Tool kann – nicht, was es nicht soll. LLMs arbeiten besser mit klaren Handlungsanweisungen.
Robuste Inputs
Zwinge den Agenten nicht zum Rechnen. Wenn der User „nächsten Montag" sagt, sollte dein Tool das verarbeiten können – oder das Feld so beschreiben, dass der Agent ein ISO-Datum generiert.
Präzise Verben im Tool-Namen
Nutze create-event für direkte Aktionen und start-event-creation für Prozesse, die auf eine weitere UI führen. Das hilft dem Agenten, Erwartungen korrekt zu setzen.
Vollständiges Beispiel
Ein Flugsuche-Formular als WebMCP-Tool – komplett mit Agent-Handling.
<form toolname="flight_search"
tooldescription="Search for flights between cities"
action="/search">
<label for="dest">Destination</label>
<input type="text"
name="destination"
id="dest"
toolparamtitle="destination_airport_code"
toolparamdescription="3-letter IATA code (e.g. LON, NYC)">
<button type="submit">Search</button>
</form>
<script>
document.querySelector("form").addEventListener("submit", (e) => {
if (e.agentInvoked) {
e.preventDefault();
const result = performSearch(
new FormData(e.target)
);
e.respondWith(Promise.resolve(result));
}
});
</script>