How to get started with this tool.

[siddharth]

I am trying a build a website that is integrated with webMCP. how can I proceed . I want to build a web application (React+VIte) to make it ready for the agent.

what do I need? 
1. are there any NPM packages available to integrate in the new site that I want to build
2. if I deploy the code, will I able to test in the chrome beta?


Note:-I have installed the chrome extension `Model Context Tool Inspector` to test

[Prasanna Vaidya]

1. https://www.npmjs.com/package/auto-webmcp does this. Drop it into any React+Vite app:

npm install auto-webmcp

// main.tsx
import { autoWebMCP } from 'auto-webmcp'
autoWebMCP()

Automatically scans all <form> elements on the page and registers them as MCP tools via navigator.modelContext — zero manual coding needed.
For non-form interactions (buttons, custom actions), you can also call navigator.modelContext directly yourself:

navigator.modelContext?.registerTool({ ... })

2. Requirements for Testing in Chrome Beta
- Use Chrome Dev or Canary (not just Beta) — WebMCP flag support is more stable there
- Enable the flag: chrome://flags/#enable-webmcp-testing
- The Model Context Tool Inspector extension you already have is exactly the right tool, it will show registered tools once the page loads

Since you are deploying a React+Vite app, it works both locally (localhost) and on a deployed URL.