Sådan integrerer du WebMCP i dine formularer

Forestil dig, at en bruger beder en AI-assistent om at “bestille en tid hos frisør Hansen på onsdag”. AI’en besøger din hjemmeside, men den kan ikke “se” knapper og felter på samme måde som vi kan.

WebMCP er en metode, hvor man kan hjælpe AI’en med hurtigt at forstå hvordan den skal bruge hjemmesiden.

Dette kan enten gøres Imperative API. Her bruger man avanceret JavaScript-kode til at stille funktioner til rådighed direkte for AI’en, uden at den interagerer med dine synlige hjemmesideelementer. Dette kræver oftest hjælp fra en udvikler.

Der er dog også en lettere metode, som er perfekt til simple formularer – metoden hedder “Declarative API”. Dette er den perfekte metode til simple formularer og til dig uden udviklerbaggrund. Metoden fungerer ved at sætte usynlige “forklaringstekster” direkte på dine formularer.

Disse tekster fortæller AI’en præcis:

  1. Hvilken formular det er (f.eks. “Book en tid”).
  2. Hvilke felter der skal udfyldes (f.eks. “Dato” og “Navn”).
  3. Om AI’en selv må trykke “Send” for brugeren.

Når du tilføjer disse informationer i attributter i din HTML, tillader du AI-assistenter at betjene din hjemmeside lynhurtigt og fejlfrit på brugerens vegne.

Attributter, som er små inholdselementer som er placeret inde i HTML-elementer. Se et eksempel her:

<form>
<input attribut="attributværdi">
<button attribut="attributværdi">Send</button>
</form>

De 5 WebMCP-attributter, du skal kende

Man kan opdele atributterne i to grupper: Dem, der sidder på selve formularen, og dem, der sidder på de enkelte felter.

1. Attributter til hele formularen (<form>)

Disse attributter fortæller AI’en det store billede af, hvad værktøjet gør.

  • toolname
    • Hvad det er: Et unikt, teknisk navn uden mellemrum.
    • Formål: Giver AI’en en “knap” i sit system, den kan trykke på.
    • Eksempel: toolname="book_appointment" eller toolname="contact_support"
  • tooldescription
    • Hvad det er: En kort, præcis sætning om formålet.
    • Formål: Dette er det vigtigste felt! AI’en læser dette for at vurdere, om formularen kan løse brugerens problem.
    • Eksempel: tooldescription="Book a haircut appointment for a specific date and time."
  • toolautosubmit
    • Hvad det er: Sættes til "true" eller "false" (eller udelades).
    • Formål: Styrer om AI’en må trykke på “Send”-knappen selv (true), eller om den kun må udfylde felterne og lade brugeren tjekke og trykke send manuelt (false).

2. Attributter til input-felterne (<input>, <select>, <textarea>)

Disse attributter fortæller AI’en, præcis hvad den skal skrive i hver indholdsfelt i formularen.

  • toolparamtitle
    • Hvad det er: En kort overskrift til feltet.
    • Formål: Giver AI’en et klart navn på den information, den skal levere.
    • Eksempel: toolparamtitle="Customer Name"
  • toolparamdescription
    • Hvad det er: En uddybning af, hvilket format dataen skal have.
    • Formål: Sikrer at AI’en ikke tager fejl. For eksempel at den skriver “12:00” i stedet for “Bagefter”.
    • Eksempel: toolparamdescription="The full name of the customer booking the appointment"

Eksempel

Her er et eksempel på en helt almindelig kontaktformular – og hvordan den ser ud, når du har sat de “usynlige Post-it-noter” på.

HTML-koden UDEN WebMCP:

<form>
  <label>Dit navn</label>
  <input type="text" name="navn" />
  <button type="submit">Send besked</button>
</form>

HTML-kdoen MED WebMCP:

<form 
  toolname="contact_us" 
  tooldescription="Send a message to our customer support team" 
  toolautosubmit="false"
>
  <label>Dit navn</label>
  <input 
    type="text" 
    name="navn" 
    toolparamtitle="User Name" 
    toolparamdescription="The full name of the user sending the message" 
  />
  <button type="submit">Send besked</button>
</form>

Mennesker ser stadig bare “Dit navn” og “Send besked”. AI’en ser den engelske manual.

Best Practice for WebMCP

  1. Skriv altid på engelsk til AI’en
    Selvom din hjemmeside er pæredansk, skal WebMCP-attributterne være på engelsk. AI-modeller er trænet på engelsk og forstår “Contact support” meget bedre end “Kontakt kundeservice”.
  2. Brug af autosubmit:
    • Sæt kun toolautosubmit="true" på ufarlige ting som f.eks. at søge efter en vare eller filtrere en liste.
    • Sæt aldrig toolautosubmit="true" på formularer, der sender e-mails, flytter penge, booker bindende tider eller sletter data. Her skal mennesket altid have lov at kigge AI’en over skulderen og selv klikke “Godkend”.
  3. Vær specifik i dine beskrivelser
    Jo bedre du beskriver værktøjet i tooldescription, jo klogere bliver AI’en. Tænk på det som at overlevere en opgave til en meget bogstavelig praktikant.