feat: add WebMCP client tool registration by AlemTuzlak · Pull Request #1302 · TanStack/ai

AlemTuzlak · 2026-09-02T15:44:39Z

Browser agents can now discover and execute TanStack AI client tools through the experimental WebMCP API. Framework wrappers connect each registration to lifecycle cleanup.

🎯 Changes

Add registerWebMCPTools to @tanstack/ai-client with schema validation, cancellation, runtime context, and safe rollback.
Add lifecycle wrappers for React, Preact, Solid, Vue, Svelte, Angular, Octane, and Remix.
Add a WebMCP guide and update the client-tool, MCP, and package API documentation.
Add package tests, browser E2E coverage, and minor changesets for all affected packages.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested code changes locally with pnpm run test:pr, or these tests do not apply to this pull request.
I fully understand the code in this pull request, including any code generated with AI assistance.
Docs: I updated docs/ for this change, or this change is not user-facing.
Changeset: I added a changeset (pnpm changeset), or this PR does not change a published package.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Testing

Commands run

pnpm test:pr passed all 45 affected tasks in a clean worktree after the Kiira fix.
pnpm run test passed all 88 project targets and declaration checks in a clean worktree.
pnpm --filter @tanstack/ai-e2e test:e2e -- --grep WebMCP passed.
The GitHub E2E job passed. A prior local run had one unrelated generic-middleware-interrupts.spec.ts failure.
pnpm test:kiira passed 1204 snippets, and pnpm exec changeset status passed.

The Angular sample uses Kiira's ignore marker because @tanstack/ai-angular resolves only from built dist files. This matches the existing Angular documentation policy.

Manual test

Run pnpm --filter @tanstack/ai-e2e dev.
Open http://localhost:3010/web-mcp-tools.
Execute the registered tool and make sure that the result is Found guitar.
Unmount the tool owner and make sure that the registered count changes to zero.

How this PR makes testing easy

The branch includes focused package tests and a deterministic browser E2E route. Run the focused WebMCP command to cover discovery, execution, and cleanup.

Risk / rollback

Risk is limited to explicit WebMCP registration. Unsupported environments do not register tools. Revert this PR to remove the new APIs.

Public API change

Before

const tools = [searchGuitars]

After

const controller = new AbortController()

await registerWebMCPTools([searchGuitars], {
  signal: controller.signal,
})

Summary by CodeRabbit

New Features
- Added WebMCP support for exposing executable client tools to browser agents.
- Added framework integrations for React, Vue, Solid, Svelte, Preact, Angular, Octane, and Remix, including automatic lifecycle cleanup.
- Added validation for tool inputs, outputs, names, schemas, and registration requirements.
- Added an end-to-end example for discovering, executing, and removing WebMCP tools.
Documentation
- Added WebMCP setup guidance, API references, usage examples, and comparisons with Server MCP.

coderabbitai · 2026-09-02T15:45:35Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 1b88d683-9475-44a0-a707-affb2c4cf084

📥 Commits

Reviewing files that changed from the base of the PR and between af4944e and ce94090.

📒 Files selected for processing (1)

docs/tools/webmcp.md

🚧 Files skipped from review as they are similar to previous changes (1)

docs/tools/webmcp.md

Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review.

📝 Walkthrough

Walkthrough

Adds registerWebMCPTools to expose executable client tools through browser WebMCP. Adds lifecycle wrappers for eight framework packages, documentation, release metadata, and end-to-end coverage for discovery, execution, and cleanup.

Changes

WebMCP registrar

Layer / File(s)	Summary
Core registrar and validation `packages/ai-client/src/`, `packages/ai-client/tests/`	Adds typed registration options, environment checks, schema conversion and validation, execution handling, duplicate detection, approval checks, abort cleanup, and runtime and type tests.

Framework lifecycle wrappers

Layer / File(s)	Summary
Framework lifecycle wrappers `packages/ai-angular/`, `packages/ai-octane/`, `packages/ai-preact/`, `packages/ai-react/`, `packages/ai-remix/`, `packages/ai-solid/`, `packages/ai-svelte/`, `packages/ai-vue/`	Adds typed WebMCP registration helpers with framework lifecycle cleanup, re-registration where supported, error callbacks, exports, and integration tests.

Documentation and release metadata

Layer / File(s)	Summary
WebMCP documentation and release metadata `.changeset/`, `docs/api/`, `docs/tools/*`, `docs/config.json`	Documents registration APIs, lifecycle wrappers, execution, validation, security rules, navigation, and package minor releases.

End-to-end coverage

Layer / File(s)	Summary
WebMCP demonstration and end-to-end test `testing/e2e/src/routes/`, `testing/e2e/src/routeTree.gen.ts`, `testing/e2e/tests/`	Adds a `/web-mcp-tools` route and Playwright coverage for registration, discovery, execution, serialized results, change events, and cleanup after unmount.

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to ce940

The PR adds explicit WebMCP tool registration with lifecycle cleanup and reports passing focused and full validation for the change; no actionable merge-blocking risk remains.

Sequence Diagram(s)

sequenceDiagram
  participant BrowserAgent
  participant WebMCPRoute
  participant useWebMCPTools
  participant document.modelContext
  participant find_guitar
  BrowserAgent->>WebMCPRoute: open WebMCP tools page
  WebMCPRoute->>useWebMCPTools: register find_guitar
  useWebMCPTools->>document.modelContext: registerTool descriptor
  BrowserAgent->>document.modelContext: execute find_guitar
  document.modelContext->>find_guitar: pass query and execution signal
  find_guitar-->>document.modelContext: return Found guitar
  document.modelContext-->>BrowserAgent: return serialized result
  WebMCPRoute->>useWebMCPTools: unmount ToolOwner
  useWebMCPTools->>document.modelContext: remove registration

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 27.59% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 29 functions across 33 files. (1 skipped:…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The description follows the repository template. It explains the change, includes the checklist, release impact, testing details, manual test steps, risk and rollback, and public API impact.
Title check	✅ Passed	The title is concise and accurately identifies the main change: WebMCP client tool registration.

Full details: Docstring Coverage

Explanation

Docstring coverage is 27.59% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 29 functions across 33 files. (1 skipped: 1 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feat/webmcp-tools

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

nx-cloud · 2026-09-02T15:46:36Z

View your CI Pipeline Execution ↗ for commit ce94090

Command	Status	Duration	Result
`nx run-many --targets=build --exclude=examples/...`	✅ Succeeded	4s	View ↗

☁️ Nx Cloud last updated this comment at 2026-09-02 16:33:37 UTC

pkg-pr-new · 2026-09-02T15:47:35Z

Open in StackBlitz

@tanstack/ai

npm i https://pkg.pr.new/@tanstack/ai@1302

@tanstack/ai-acp

npm i https://pkg.pr.new/@tanstack/ai-acp@1302

@tanstack/ai-angular

npm i https://pkg.pr.new/@tanstack/ai-angular@1302

@tanstack/ai-anthropic

npm i https://pkg.pr.new/@tanstack/ai-anthropic@1302

@tanstack/ai-bedrock

npm i https://pkg.pr.new/@tanstack/ai-bedrock@1302

@tanstack/ai-byteplus

npm i https://pkg.pr.new/@tanstack/ai-byteplus@1302

@tanstack/ai-claude-code

npm i https://pkg.pr.new/@tanstack/ai-claude-code@1302

@tanstack/ai-client

npm i https://pkg.pr.new/@tanstack/ai-client@1302

@tanstack/ai-code-mode

npm i https://pkg.pr.new/@tanstack/ai-code-mode@1302

@tanstack/ai-code-mode-snippets

npm i https://pkg.pr.new/@tanstack/ai-code-mode-snippets@1302

@tanstack/ai-codex

npm i https://pkg.pr.new/@tanstack/ai-codex@1302

@tanstack/ai-cohere

npm i https://pkg.pr.new/@tanstack/ai-cohere@1302

@tanstack/ai-compaction

npm i https://pkg.pr.new/@tanstack/ai-compaction@1302

@tanstack/ai-devtools-core

npm i https://pkg.pr.new/@tanstack/ai-devtools-core@1302

@tanstack/ai-durable-stream

npm i https://pkg.pr.new/@tanstack/ai-durable-stream@1302

@tanstack/ai-elevenlabs

npm i https://pkg.pr.new/@tanstack/ai-elevenlabs@1302

@tanstack/ai-event-client

npm i https://pkg.pr.new/@tanstack/ai-event-client@1302

@tanstack/ai-fal

npm i https://pkg.pr.new/@tanstack/ai-fal@1302

@tanstack/ai-gemini

npm i https://pkg.pr.new/@tanstack/ai-gemini@1302

@tanstack/ai-grok

npm i https://pkg.pr.new/@tanstack/ai-grok@1302

@tanstack/ai-grok-build

npm i https://pkg.pr.new/@tanstack/ai-grok-build@1302

@tanstack/ai-groq

npm i https://pkg.pr.new/@tanstack/ai-groq@1302

@tanstack/ai-isolate-cloudflare

npm i https://pkg.pr.new/@tanstack/ai-isolate-cloudflare@1302

@tanstack/ai-isolate-daytona

npm i https://pkg.pr.new/@tanstack/ai-isolate-daytona@1302

@tanstack/ai-isolate-node

npm i https://pkg.pr.new/@tanstack/ai-isolate-node@1302

@tanstack/ai-isolate-quickjs

npm i https://pkg.pr.new/@tanstack/ai-isolate-quickjs@1302

@tanstack/ai-isolate-quickjs-bun

npm i https://pkg.pr.new/@tanstack/ai-isolate-quickjs-bun@1302

@tanstack/ai-llmgateway

npm i https://pkg.pr.new/@tanstack/ai-llmgateway@1302

@tanstack/ai-lovable

npm i https://pkg.pr.new/@tanstack/ai-lovable@1302

@tanstack/ai-mcp

npm i https://pkg.pr.new/@tanstack/ai-mcp@1302

@tanstack/ai-memory

npm i https://pkg.pr.new/@tanstack/ai-memory@1302

@tanstack/ai-mistral

npm i https://pkg.pr.new/@tanstack/ai-mistral@1302

@tanstack/ai-octane

npm i https://pkg.pr.new/@tanstack/ai-octane@1302

@tanstack/ai-ollama

npm i https://pkg.pr.new/@tanstack/ai-ollama@1302

@tanstack/ai-openai

npm i https://pkg.pr.new/@tanstack/ai-openai@1302

@tanstack/ai-opencode

npm i https://pkg.pr.new/@tanstack/ai-opencode@1302

@tanstack/ai-openrouter

npm i https://pkg.pr.new/@tanstack/ai-openrouter@1302

@tanstack/ai-perplexity

npm i https://pkg.pr.new/@tanstack/ai-perplexity@1302

@tanstack/ai-persistence

npm i https://pkg.pr.new/@tanstack/ai-persistence@1302

@tanstack/ai-preact

npm i https://pkg.pr.new/@tanstack/ai-preact@1302

@tanstack/ai-react

npm i https://pkg.pr.new/@tanstack/ai-react@1302

@tanstack/ai-react-ui

npm i https://pkg.pr.new/@tanstack/ai-react-ui@1302

@tanstack/ai-remix

npm i https://pkg.pr.new/@tanstack/ai-remix@1302

@tanstack/ai-sandbox

npm i https://pkg.pr.new/@tanstack/ai-sandbox@1302

@tanstack/ai-sandbox-cloudflare

npm i https://pkg.pr.new/@tanstack/ai-sandbox-cloudflare@1302

@tanstack/ai-sandbox-daytona

npm i https://pkg.pr.new/@tanstack/ai-sandbox-daytona@1302

@tanstack/ai-sandbox-docker

npm i https://pkg.pr.new/@tanstack/ai-sandbox-docker@1302

@tanstack/ai-sandbox-local-process

npm i https://pkg.pr.new/@tanstack/ai-sandbox-local-process@1302

@tanstack/ai-sandbox-sprites

npm i https://pkg.pr.new/@tanstack/ai-sandbox-sprites@1302

@tanstack/ai-sandbox-upstash-box

npm i https://pkg.pr.new/@tanstack/ai-sandbox-upstash-box@1302

@tanstack/ai-sandbox-vercel

npm i https://pkg.pr.new/@tanstack/ai-sandbox-vercel@1302

@tanstack/ai-skills

npm i https://pkg.pr.new/@tanstack/ai-skills@1302

@tanstack/ai-solid

npm i https://pkg.pr.new/@tanstack/ai-solid@1302

@tanstack/ai-solid-ui

npm i https://pkg.pr.new/@tanstack/ai-solid-ui@1302

@tanstack/ai-svelte

npm i https://pkg.pr.new/@tanstack/ai-svelte@1302

@tanstack/ai-utils

npm i https://pkg.pr.new/@tanstack/ai-utils@1302

@tanstack/ai-vercel-gateway

npm i https://pkg.pr.new/@tanstack/ai-vercel-gateway@1302

@tanstack/ai-vertex

npm i https://pkg.pr.new/@tanstack/ai-vertex@1302

@tanstack/ai-vue

npm i https://pkg.pr.new/@tanstack/ai-vue@1302

@tanstack/ai-vue-ui

npm i https://pkg.pr.new/@tanstack/ai-vue-ui@1302

@tanstack/openai-base

npm i https://pkg.pr.new/@tanstack/openai-base@1302

@tanstack/preact-ai-devtools

npm i https://pkg.pr.new/@tanstack/preact-ai-devtools@1302

@tanstack/react-ai-devtools

npm i https://pkg.pr.new/@tanstack/react-ai-devtools@1302

@tanstack/solid-ai-devtools

npm i https://pkg.pr.new/@tanstack/solid-ai-devtools@1302

@tanstack/svelte-ai-devtools

npm i https://pkg.pr.new/@tanstack/svelte-ai-devtools@1302

commit: ce94090

feat: add WebMCP client tool registration

af4944e

docs: skip unresolved Angular snippet in Kiira

ce94090

github-actions Bot added the waiting-on: maintainer The ball is in the maintainers’ court label Sep 2, 2026

Navigation Menu

Uh oh!

Uh oh!

feat: add WebMCP client tool registration - #1302

feat: add WebMCP client tool registration#1302
AlemTuzlak wants to merge 2 commits into
mainfrom
feat/webmcp-tools

AlemTuzlak commented Sep 2, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Sep 2, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented Sep 2, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Sep 2, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

AlemTuzlak commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Testing

Risk / rollback

Public API change

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

nx-cloud Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

AlemTuzlak commented Sep 2, 2026 •

edited

Loading

coderabbitai Bot commented Sep 2, 2026 •

edited

Loading

nx-cloud Bot commented Sep 2, 2026 •

edited

Loading

pkg-pr-new Bot commented Sep 2, 2026 •

edited

Loading