---
title: "WebMCP: let agents use your app · vuejs.school"
description: "Register tools on your page with document.modelContext so an agent in the browser calls your own functions instead of clicking around, validate what it sends, mark consequential tools, and know who else can call them."
canonical_url: "https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app"
meta:
  "og:description": "Register tools on your page with document.modelContext so an agent in the browser calls your own functions instead of clicking around, validate what it sends, mark consequential tools, and know who else can call them."
  "og:image": "https://vuejs.school/_og/d/a_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcCDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcA%2Cdescription_~UmVnaXN0ZXIgdG9vbHMgb24geW91ciBwYWdlIHdpdGggZG9jdW1lbnQubW9kZWxDb250ZXh0IHNvIGFuIGFnZW50IGluIHRoZSBicm93c2VyIGNhbGxzIHlvdXIgb3duIGZ1bmN0aW9ucyBpbnN0ZWFkIG9mIGNsaWNraW5nIGFyb3VuZCwgdmFsaWRhdGUgd2hhdCBpdCBzZW5kcywgbWFyayBjb25zZXF1ZW50aWFsIHRvb2xzLCBhbmQga25vdyB3aG8gZWxzZSBjYW4gY2FsbCB0aGVtLg%2Ceyebrow_~QUkgJiBMTE1zIMK3IExlc3NvbiA4IG9mIDEw%2Ctint_sand%2Cp_Ii9sZWFybi9haS93ZWJtY3AtbGV0LWFnZW50cy11c2UteW91ci1hcHAi%2Cs_wXwf0Bf4CELBVRI3.png"
  "og:image:alt": "WebMCP: let agents use your app · vuejs.school"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "WebMCP: let agents use your app · vuejs.school"
  "twitter:image": "https://vuejs.school/_og/d/a_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcCDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcA%2Cdescription_~UmVnaXN0ZXIgdG9vbHMgb24geW91ciBwYWdlIHdpdGggZG9jdW1lbnQubW9kZWxDb250ZXh0IHNvIGFuIGFnZW50IGluIHRoZSBicm93c2VyIGNhbGxzIHlvdXIgb3duIGZ1bmN0aW9ucyBpbnN0ZWFkIG9mIGNsaWNraW5nIGFyb3VuZCwgdmFsaWRhdGUgd2hhdCBpdCBzZW5kcywgbWFyayBjb25zZXF1ZW50aWFsIHRvb2xzLCBhbmQga25vdyB3aG8gZWxzZSBjYW4gY2FsbCB0aGVtLg%2Ceyebrow_~QUkgJiBMTE1zIMK3IExlc3NvbiA4IG9mIDEw%2Ctint_sand%2Cp_Ii9sZWFybi9haS93ZWJtY3AtbGV0LWFnZW50cy11c2UteW91ci1hcHAi%2Cs_wXwf0Bf4CELBVRI3.png"
  "twitter:image:alt": "WebMCP: let agents use your app · vuejs.school"
---

> Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt)

# **WebMCP: let agents use your app**

Register tools on your page with document.modelContext so an agent in the browser calls your own functions instead of clicking around, validate what it sends, mark consequential tools, and know who else can call them.

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://vuejs.school/#website","@type":"WebSite","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school/","publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app#webpage","@type":"WebPage","description":"Register tools on your page with document.modelContext so an agent in the browser calls your own functions instead of clicking around, validate what it sends, mark consequential tools, and know who else can call them.","name":"WebMCP: let agents use your app","url":"https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app","breadcrumb":{"@id":"https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app#breadcrumb"},"isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app"]}],"primaryImageOfPage":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#identity","@type":"Organization","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school","logo":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app#article","description":"Register tools on your page with document.modelContext so an agent in the browser calls your own functions instead of clicking around, validate what it sends, mark consequential tools, and know who else can call them.","headline":"WebMCP: let agents use your app","inLanguage":"en","isAccessibleForFree":true,"thumbnailUrl":"https://vuejs.school/_og/d/a_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcCDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcA%2Cdescription_~UmVnaXN0ZXIgdG9vbHMgb24geW91ciBwYWdlIHdpdGggZG9jdW1lbnQubW9kZWxDb250ZXh0IHNvIGFuIGFnZW50IGluIHRoZSBicm93c2VyIGNhbGxzIHlvdXIgb3duIGZ1bmN0aW9ucyBpbnN0ZWFkIG9mIGNsaWNraW5nIGFyb3VuZCwgdmFsaWRhdGUgd2hhdCBpdCBzZW5kcywgbWFyayBjb25zZXF1ZW50aWFsIHRvb2xzLCBhbmQga25vdyB3aG8gZWxzZSBjYW4gY2FsbCB0aGVtLg%2Ceyebrow_~QUkgJiBMTE1zIMK3IExlc3NvbiA4IG9mIDEw%2Ctint_sand%2Cp_Ii9sZWFybi9haS93ZWJtY3AtbGV0LWFnZW50cy11c2UteW91ci1hcHAi%2Cs_wXwf0Bf4CELBVRI3.png","@type":["Article","TechArticle"],"articleSection":["AI"],"author":{"@id":"https://vuejs.school/#identity"},"image":{"@id":"https://vuejs.school/#/schema/image/1"},"isPartOf":{"@id":"https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app#webpage"},"keywords":["document.modelContext","registerTool()","inputSchema","consequentialHint","Permissions Policy"],"mainEntityOfPage":{"@id":"https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app#webpage"},"publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/learn/ai/webmcp-let-agents-use-your-app#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Skill tree","item":"https://vuejs.school/track","position":1},{"@type":"ListItem","name":"AI & LLMs","item":"https://vuejs.school/track/ai","position":2},{"@type":"ListItem","name":"WebMCP: let agents use your app","position":3}]},{"@id":"https://vuejs.school/#logo","@type":"ImageObject","caption":"vuejs.school","contentUrl":"https://vuejs.school/apple-touch-icon.png","inLanguage":"en","url":"https://vuejs.school/apple-touch-icon.png"},{"@id":"https://vuejs.school/#/schema/image/1","@type":"ImageObject","contentUrl":"https://vuejs.school/_og/d/a_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcCDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcA%2Cdescription_~UmVnaXN0ZXIgdG9vbHMgb24geW91ciBwYWdlIHdpdGggZG9jdW1lbnQubW9kZWxDb250ZXh0IHNvIGFuIGFnZW50IGluIHRoZSBicm93c2VyIGNhbGxzIHlvdXIgb3duIGZ1bmN0aW9ucyBpbnN0ZWFkIG9mIGNsaWNraW5nIGFyb3VuZCwgdmFsaWRhdGUgd2hhdCBpdCBzZW5kcywgbWFyayBjb25zZXF1ZW50aWFsIHRvb2xzLCBhbmQga25vdyB3aG8gZWxzZSBjYW4gY2FsbCB0aGVtLg%2Ceyebrow_~QUkgJiBMTE1zIMK3IExlc3NvbiA4IG9mIDEw%2Ctint_sand%2Cp_Ii9sZWFybi9haS93ZWJtY3AtbGV0LWFnZW50cy11c2UteW91ci1hcHAi%2Cs_wXwf0Bf4CELBVRI3.png","inLanguage":"en","url":"https://vuejs.school/_og/d/a_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcCDCtyB2dWVqcy5zY2hvb2w%2Cc_OgCard.takumi%2Ctitle_~V2ViTUNQOiBsZXQgYWdlbnRzIHVzZSB5b3VyIGFwcA%2Cdescription_~UmVnaXN0ZXIgdG9vbHMgb24geW91ciBwYWdlIHdpdGggZG9jdW1lbnQubW9kZWxDb250ZXh0IHNvIGFuIGFnZW50IGluIHRoZSBicm93c2VyIGNhbGxzIHlvdXIgb3duIGZ1bmN0aW9ucyBpbnN0ZWFkIG9mIGNsaWNraW5nIGFyb3VuZCwgdmFsaWRhdGUgd2hhdCBpdCBzZW5kcywgbWFyayBjb25zZXF1ZW50aWFsIHRvb2xzLCBhbmQga25vdyB3aG8gZWxzZSBjYW4gY2FsbCB0aGVtLg%2Ceyebrow_~QUkgJiBMTE1zIMK3IExlc3NvbiA4IG9mIDEw%2Ctint_sand%2Cp_Ii9sZWFybi9haS93ZWJtY3AtbGV0LWFnZW50cy11c2UteW91ci1hcHAi%2Cs_wXwf0Bf4CELBVRI3.png"}]}
```