---
title: Installation
description: Choose your framework. Every page is the same six steps, from an empty folder to a tool the agent cursor runs.
sidebar:
  hidden: true
---

Pick your framework. Each page is the same six steps, and the pages after it show that framework's code.

{/* The five ways in. Shown on the docs home and on Installation: edit it here, once. */}

**[Vite](/docs/installation/vite)**

A single-page app with React.

**[Next.js](/docs/installation/nextjs)**

The App Router, with client components for the tools.

**[TanStack Start](/docs/installation/tanstack-start)**

Full-stack React on Vite and TanStack Router.

**[Astro](/docs/installation/astro)**

Server-rendered pages with a React island.

**[No framework](/docs/installation/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](/docs/build/add-the-chat), once you have tools for it to
call.