Integrations / React and Next.js

WebMCP for React and Next.js apps

Single-page apps take the same script tag. The snippet notices route changes made through the History API and loads the tools for the new route, so path-scoped tools follow the user around the app.

Install in four steps

  1. 1

    Add your site in Aigentably

    Sign up, add your app's URL, and copy the snippet.

  2. 2

    Add the script once

    Next.js: in the root layout, render <Script src="…" strategy="afterInteractive" /> from next/script. Vite or Create React App: paste the tag into index.html before </body>.

  3. 3

    Deploy

    Deploy and open the app once so the dashboard can see the snippet.

  4. 4

    Generate or write your tools

    Generate tools from your pages, or write them by hand in the dashboard if you would rather call your own app's functions.

<script src="https://aigentably.com/mcp-manager.js?site=YOUR_SITE_ID"></script>

Your own snippet, with your site id filled in, is on the site page in the dashboard.

Good to know

  • Tools can be scoped to routes with path patterns such as /products/*, and switch as the user navigates.
  • Pages that only render in the browser are loaded in a real browser before tools are generated from them.
  • Every generated tool is run once on its page before you see it, and you see whether it passed. See how generation works.

Try it on your React and Next.js site

Free plan, no credit card.

Start for free