WebMCP rau lub website: Hloov HTML form ua tool rau AI agent

WebMCP rau website cia koj piav ib qho web action xws li nrhiav, lim khoom lossis xa daim ntawv thov kev pab ua ib lub cuab yeej muaj npe, lus piav qhia thiab cov parameters muaj qauv. Nrog Declarative API, koj pib ntawm ib daim HTML <form>, ntxiv cov WebMCP attributes, ces cia browser muab daim form ntawd rau agent uas txhawb tau.

Lub hom phiaj ntawm zaj no yog kom muaj ib daim form nrhiav khoom uas cov neeg siv ib txwm tseem siv tau, thaum agent uas paub WebMCP tuaj yeem txheeb xyuas lub tool, sau cov teb query thiab xa raws li txoj cai koj xaiv. Tam sim no WebMCP tseem yog ib qho kev thov sim, tsis yog W3C Standard; daim ntawv sau tseg uas tseem tab tom tsim tau tshaj tawm rau hnub tim 10 lub Cuaj Hlis 2026 (raws li webmachinelearning.github.io).

WebMCP txawv li cas ntawm agent uas nyem lub interface nws tus kheej?

WebMCP yog ib qho web API uas tau thov los siv rau application kom tshaj tawm qee yam haujlwm ua tools rau AI agent. Yog tsis muaj txheej txheem piav qhia no, agent feem ntau yuav tsum saib interface, nrhiav khawm, sau cov teb thiab sim ua raws li tus neeg siv. Nrog WebMCP, website tshaj tawm ua ntej lub npe ntawm qhov haujlwm, nws lub hom phiaj thiab cov ntaub ntawv nkag; agent thiaj xa tau cov parameters uas muaj qauv meej dua (raws li developer.chrome.com).

WebMCP tsis hloov website rau hauv ib lub API pej xeem uas txhua lub server sab nraud siv tau, thiab nws kuj tsis hloov backend. Lub tool raug sau npe hauv browser context; qhov agent pom tau thiab siv tau yog nyob ntawm browser, agent, login session thiab website txoj cai.

Txoj kev sib cuag	Agent yuav tsum ua dab tsi?	Website muab dab tsi?
Sim ua raws interface	Saib nplooj ntawv, kwv yees khawm, sau cov teb thiab nyem xa	HTML, CSS thiab lub xeev uas pom hauv interface
WebMCP Declarative API	Hu tool nrog cov parameters muaj qauv	Lub npe tool, lus piav qhia thiab schema uas muab txiav txim los ntawm form
API lossis MCP backend	Hu qhov kev pabcuam sab server	Endpoint, authentication thiab backend logic

Yog li, WebMCP haum thaum qhov haujlwm twb muaj hauv website lawm thiab koj xav kom agent hla dhau tib workflow ntawd. Authentication, permission, kev tshuaj xyuas cov ntaub ntawv, rate limit thiab kev lees paub ua ntej kev lag luam tseem yuav tsum tuav sib cais.

Xaiv thiab npaj form kom zoo ua ntej qhib rau agent

Pib nrog ib qho haujlwm uas muaj phạm vi nqaim, qhov tshwm sim kuaj tau yooj yim thiab muaj kev pheej hmoo tsawg. Form nrhiav, lim khoom lossis xa daim ntawv thov kev pab feem ntau haum dua kev them nyiaj, rho cov ntaub ntawv lossis hloov account permissions.

Form yuav tsum muaj ib lub hom phiaj meej, piv txwv li “nrhiav khoom raws li lo lus tseem ceeb”.
Txhua lub teb yuav tsum muaj name ruaj khov kom siv ua parameter lub npe.
Cov teb tseem ceeb yuav tsum muaj label, hom input tsim nyog thiab required thaum tsim nyog.
Server tseem yuav tsum tshuaj xyuas cov ntaub ntawv, kev tso cai nkag, login state thiab rate limit.
Txoj kev xa form ib txwm tseem yuav tsum ua haujlwm thaum browser lossis agent tsis txhawb WebMCP.

Qhov no yog kauj ruam yuav tsum muaj, tsis yog tsuas yog kev txhim kho accessibility xwb. Labels, input types thiab values option pab kom cov neeg siv, assistive technology thiab agent nkag siab lub ntsiab ntawm cov ntaub ntawv kom raug.

Ntxiv Declarative API rau HTML form

1. Tsim lub npe, lus piav qhia thiab parameters

Qhib source code lossis template uas muaj form hauv development lossis staging environment, ces ntxiv toolname thiab tooldescription. Raws li Declarative API documentation, yog tsis muaj ib qho ntawm ob lub attributes no, form yuav tsis raug sau npe raws li txoj kev no (raws li developer.chrome.com).

<form
  method="get"
  action="/search"
  toolname="searchProducts"
  tooldescription="Tìm sản phẩm theo từ khóa và mở trang kết quả tìm kiếm."
>
  <label for="query">Từ khóa sản phẩm</label>
  <input
    id="query"
    name="query"
    type="search"
    required
    toolparamdescription="Tên hoặc đặc điểm của sản phẩm cần tìm."
  >

  <button type="submit">Tìm kiếm</button>
</form>

Ntxig cov code saum toj rau hauv HTML/template ntawm nplooj ntawv; tsis yog khiav hauv server control panel. Yog tias koj lub path tiag tsis yog /search, hloov nws mus rau endpoint uas koj siv los lis form. Qhov yuav tsum pom yog form tseem xa tau los ntawm khawm Nrhiav, hos agent uas txhawb tau yuav pom ib lub tool muaj npe searchProducts thiab parameter query.

toolname yog lub npe txheeb xyuas; siv ib lub npe ruaj khov, cais tau yooj yim thiab tsis muaj qhov chaw.
tooldescription piav txog qhov haujlwm thiab qhov tshwm sim, tsis yog ib kab lus tshaj tawm.
name="query" yuav dhau los ua lub npe ntawm field hauv input data.
toolparamdescription piav qhia lub ntsiab lus ntawm parameter hauv kev ua haujlwm.
action="/search" tso cov HTML fallback ib txwm muaj.

Yog tsis muaj toolparamdescription, browser yuav siv cov ntsiab lus hauv label los piav qhia txog field. Rau cov parameter uas muaj lub ntsiab lus tshwj xeeb, tsim ib qho lus piav qhia nyias kom txo qhov pheej hmoo uas agent yuav twv yuam kev (raws li developer.chrome.com).

2. Txwv cov kev xaivด้วย select

Yog parameter tsuas txais ib pawg nqi uas tau teev tseg, siv <select> es tsis txhob cia agent tsim ib txoj hlua ntawm nws tus kheej. Cov nqi value yog cov ntaub ntawv xa mus rau server; cov ntawv uas tso tawm hauv nruab nrab ntawm ob daim <option> tej zaum yuav txawv.

<label for="category">Danh mục</label>
<select
  id="category"
  name="category"
  required
  toolparamdescription="Danh mục sản phẩm cần tìm."
>
  <option value="laptop">Laptop</option>
  <option value="monitor">Màn hình</option>
  <option value="keyboard">Bàn phím</option>
</select>

Backend yuav tsum rov kuaj kom paub tseeb tias category yog laptop, monitor lossis keyboard. HTML validation thiab schema uas browser tsim tsis yog ib thaj tsam tiv thaiv kev nyab xeeb.

3. Tsuas qhib auto-submit rau cov haujlwm uas pheej hmoo tsawg

Tsis txhob ntxiv toolautosubmit thaum pib yog koj xav kom tus neeg siv rov tshuaj xyuas cov ntaub ntawv ua ntej xa. Thaum qhib qhov boolean attribute no, kev hu tool yuav ua rau form xa mus thiab txuas ntxiv raws li form workflow (raws li developer.chrome.com).

<form
  method="get"
  action="/search"
  toolname="searchProducts"
  tooldescription="Tìm sản phẩm theo từ khóa."
  toolautosubmit
>
  <label for="query">Từ khóa</label>
  <input id="query" name="query" type="search" required>
  <button type="submit">Tìm kiếm</button>
</form>

Tus qauv saum no tsuas tsim nyog thaum kev tshawb nrhiav tsis tsim, hloov lossis rho tawm ntaub ntawv. Tsis tsim nyog qhib auto-submit rau kev them nyiaj, xaj khoom, xa email, rho tawm ntaub ntawv, hloov cai nkag lossis cov haujlwm uas tsim lub luag haujlwm nyiaj txiag. Rau cov workflow ntawd, cia tus neeg siv rov tshuaj xyuas thiab lees paub kom meej.

Yog xav xa cov txiaj ntsig uas muaj qauv rau agent

Ib txwm Form GET yuav tuaj yeem hloov mus rau nplooj ntawv txiaj ntsig thiab tsis tas yuav muaj JavaScript nyias. Yog xav ua haujlwm dhau API thiab xa ib qho txiaj ntsig luv rau agent, sau npe ib qho promise rau kev ua haujlwm tam sim thaum tau txais event; tsis txhob tos txog tom qab await fetch() mam li hu respondWith().

Muab cov code hauv qab no tso rau hauv JavaScript ntawm nplooj ntawv uas muaj form ntawd, tom qab DOM muaj form lawm. Hloov /api/search ua endpoint tiag thiab xyuas kom endpoint txheeb xyuas login session, kev tso cai nkag, input data thiab mechanism tiv thaiv kev xa rov qab ntau zaus.

const form = document.querySelector('form[toolname="searchProducts"]');

if (form) {
  form.addEventListener('submit', (event) => {
    if (!event.agentInvoked) {
      return;
    }

    event.preventDefault();
    event.respondWith(handleAgentSearch(form));
  });
}

async function handleAgentSearch(form) {
  const data = new FormData(form);
  const query = String(data.get('query') || '').trim();

  if (query.length < 2) {
    return {
      ok: false,
      error: 'Từ khóa phải có ít nhất 2 ký tự.'
    };
  }

  try {
    const response = await fetch('/api/search', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ query })
    });

    if (!response.ok) {
      return {
        ok: false,
        error: 'Không thể hoàn tất tìm kiếm lúc này.'
      };
    }

    const result = await response.json();

    return {
      ok: true,
      resultUrl: result.resultUrl,
      count: result.count
    };
  } catch (error) {
    return {
      ok: false,
      error: 'Không thể kết nối đến dịch vụ tìm kiếm.'
    };
  }
}

Nov yog tus qauv qhia xwb, tsis yog code uas yuav muab siv ncaj qha rau txhua lub backend. Kuaj response structure ua ntej nyeem resultUrl thiab count; tsis txhob muab token, cov lus yuam kev sab hauv, ntaub ntawv ntiag tug lossis cov ntaub ntawv rhiab rau hauv txiaj ntsig xa rov qab rau agent. Yog website siv CSRF token, session cookie lossis xav tau header tshwj xeeb, cia cov mechanism ntawd nyob hauv backend workflow uas twb muaj lawm.

Qhia xwm txheej thiab tso cai rho tseg

Agent yuav tsum tsis txhob ua rau qhov haujlwm ploj mus tsis pom. Declarative API documentation piav txog cov event toolactivated, toolcancel thiab cov pseudo-class xws li :tool-form-active, :tool-submit-active kom UI qhia tau cov xwm txheej uas sib xws (raws li developer.chrome.com).

form:tool-form-active {
  outline: 2px dashed #2563eb;
  outline-offset: 4px;
}

form:tool-form-active::before {
  content: "AI agent đang chuẩn bị biểu mẫu — hãy kiểm tra trước khi gửi";
  display: block;
  margin-bottom: 0.75rem;
  color: #1d4ed8;
  font-size: 0.9rem;
}

CSS snippet no tsuas yog ib qho cim pom ntawm qhov muag xwb. Kuaj contrast kom tsim nyog, tsis txhob npog cov input field thiab tsis txhob siv xim ua tib qho cim qhia xwb. Rau cov haujlwm uas muaj qhov yuav tshwm sim loj, yuav tsum muaj ntawv piav qhia, khawm lees paub thiab txoj kev rho tseg uas meej.

Kuaj hauv ib puag ncig uas sib haum

Kuaj rau ntawm staging ua ntej tso rau production. Vim WebMCP tseem tab tom tsim kho, qhov uas agent lossis browser no ua haujlwm tsis txhais tias txhua lub ib puag ncig yuav txhawb nqa (raws li webmachinelearning.github.io).

Fallback: tsis siv agent; cia tus neeg siv xa form li ib txwm thiab xyuas kom nplooj ntawv lossis response tseem raug.
Kev txheeb xyuas: lees paub tias agent pom tau qhov searchProducts raug thiab tsis muaj tool npe sib tshooj.
Schema: sim required field, string uas luv dhau, data type tsis raug thiab txhua tus nqi ntawm select.
Kev lees paub: rau cov haujlwm sau lossis hloov ntaub ntawv, kuaj kom paub tias tus neeg siv tuaj yeem rov tshuaj xyuas, kho thiab rho tseg ua ntej xa.
Yuam kev: sim ua kom login session tas sijhawm, network yuam kev, response 4xx thiab 5xx; cov lus xa rau agent yuav tsum luv thiab tsis muaj cov ntaub ntawv zais cia.
Hu rov qab: hu tib tool ntau zaus los kuaj kom paub tias tsis tsim cov ntaub ntawv lossis transaction uas rov ua dua.
Log: Sau ntawv lub npe tool, lub sijhawm, session lossis tus neeg siv thiab qhov tshwm sim raws li qhov tsim nyog; tsis txhob sau tag nrho cov ntaub ntawv rhiab heev.

Txoj kev qhib thiab theem kev txhawb nqa yuav hloov raws li ib puag ncig. OpenAI piav qhia txog kev kuaj WebMCP hauv ChatGPT browser built-in thiab Chrome uas muaj experimental feature lossis origin trial; nyeem cov lus qhia ntawm ib puag ncig uas koj npaj yuav txhawb, tsis txhob muab ib qho browser flag twg sau khov kho rau hauv cov ntaub ntawv khoom (raws li openai.com).

Cov kev pheej hmoo yuav tsum daws hauv backend

Tool description tsis yog ib qho kev ruaj ntseg

tooldescription Nws tsuas pab agent nkag siab txog lub hom phiaj xwb. Server tseem yuav tsum txheeb xyuas session, faib cai raws tus neeg siv thiab record, kuaj hom thiab ciam teb ntawm cov ntaub ntawv, thiab siv rate limit.

Tsis txhob ntseeg cov ntaub ntawv uas agent xa

Txwv qhov ntev ntawm string, tus naj npawb ntawm items thiab qhov loj ntawm request. Tsis lees txais tus nqi uas tsis nyob hauv daim ntawv tso cai, normalize cov ntaub ntawv ntawm server thiab rov kuaj lub business state tam sim ua ntej execute.

Tswj prompt injection thiab cov ntaub ntawv tsis ntseeg tau

Cov ntsiab lus khoom, lus tawm tswv yim lossis API response yuav muaj cov lus qhia uas xav dag agent. WebMCP draft hais tias prompt injection, kev ua qhov action uas tsis yog lub hom phiaj thiab kev xau ntaub ntawv ntiag tug vim parameter dav dhau yog cov pawg kev pheej hmoo uas yuav tsum tshuaj xyuas (raws li webmachinelearning.github.io).

Faib kom meej ntawm read action thiab write action

Kev tshawb lossis lim feem ntau tswj tau yooj yim dua li tso order, xa daim foos raug cai lossis rho account. Thov confirmation ntawm theem kawg, siv idempotency key thaum tsim nyog thiab tsim kom muaj peev xwm cancel lossis undo yog tias business tso cai.

Thaum twg yuav siv WebMCP thiab thaum twg yuav siv backend API?

Qhov xav tau	Qhov kev xaiv tsim nyog dua	Vim li cas
Cia agent siv ib daim foos lossis workflow uas twb muaj hauv browser	WebMCP Declarative API	Hloov UI tsawg dua thiab tseem khaws HTML fallback tau.
Muab functionality rau ntau lub external application	Backend API lossis MCP server	Kev tswj authentication, version, limit thiab monitoring muaj peev xwm ua tau centralized dua.
Ua transaction uas muaj nuj nqis lossis muaj privilege siab	Backend uas muaj confirmation step meej	Tsis tsim nyog muab tag nrho txoj kev tswj rau tool description lossis form auto-submit.
Tsuas xav kom agent nyeem cov ntsiab lus public	HTML uas muaj qauv, semantic data lossis read-only API	Tsis yog txhua qhov teeb meem ntawm kev nyeem yuav tsum register ib qho tool uas muaj peev xwm execute.

Txoj kev teeb tsa yam tsawg kawg

Xaiv ib qho action uas pheej hmoo tsawg, xws li tshawb lossis lim.
Ua kom ruaj khov name, label, field type thiab cov nqi uas siv tau.
Ntxiv toolname, tooldescription thiab piav cov parameter uas tsim nyog.
Khaws txoj confirmation manually; tseem tsis tau qhib toolautosubmit.
Kuaj fallback, schema, access permission, error, log thiab kev hu rov ua dua hauv staging.
Tsuas nthuav mus rau write action thaum twb muaj confirmation, kev tiv thaiv kev hu rov ua dua thiab txoj kev rov qab kho.

Hauv luv luv, txoj kev nyab xeeb los pib nrog WebMCP rau website yog xaiv ib qho HTML form uas muaj hom phiaj meej, piav nws siv Declarative API thiab khaws txhua qhov kev kuaj tseem ceeb hauv backend. Xav tias WebMCP yog ib txheej sib txuas lus rau agent, tsis yog txheej ruaj ntseg lossis kev hloov chaw ntawm API. Yog tias form muaj fallback, parameter meej, confirmation step tsim nyog thiab kev kuaj hauv qhov xwm txheej tiag, website yuav yooj yim dua rau agent siv, yam tsis tso tseg cov neeg siv niaj hnub.

Cov ntaub ntawv siv

WebMCP — Web Machine Learning Community Group, Draft Community Group Report, 10 September 2026.
WebMCP and AI agents — Chrome for Developers.
Declarative API — Chrome for Developers.
WebMCP — webmachinelearning/webmcp GitHub repository.
The WebMCP Challenge — OpenAI.

WebMCP rau lub website: Hloov HTML form ua cuab yeej rau AI agent hu tau