Installation
Choose your framework. Every page is the same six steps, from an empty folder to a tool the agent cursor runs.
Pick your framework. Each page is the same six steps, and the pages after it show that framework’s code.
Vite
A single-page app with React.
Next.js
The App Router, with client components for the tools.
TanStack Start
Full-stack React on Vite and TanStack Router.
Astro
Server-rendered pages with a React island.
No framework
Plain HTML and TypeScript, with createWebAgents.
The six steps
| Step | What you do | |
|---|---|---|
| 01 | Create a project | A new app from your framework’s own starter, or skip it and use yours. |
| 02 | Install the packages | @webmcp-agents/core and @webmcp-agents/react: one line. The devtools come with the provider, in development. |
| 03 | Add the styles | One stylesheet: the agent cursor. |
| 04 | Add the provider | <WebAgentsProvider> around your app. It is the same line in every framework; it loads a WebMCP polyfill by itself where the browser has none, and the devtools panel in development. |
| 05 | Add your first tool | One component: a plain button a person clicks and an agent calls. |
| 06 | Run it | Call the tool from the devtools panel and watch the cursor. |
The chat is not part of installation. It is step 8 of the path, once you have tools for it to call.