Skip to content

feat(router): introduce WebMCP router features - #70213

Open
aminesbdev wants to merge 1 commit into
angular:mainfrom
aminesbdev:feature/webmcp-router-tool
Open

feat(router): introduce WebMCP router features#70213
aminesbdev wants to merge 1 commit into
angular:mainfrom
aminesbdev:feature/webmcp-router-tool

Conversation

@aminesbdev

Copy link
Copy Markdown
Contributor

This PR introduces a new Router feature, withExperimentalWebMcpRouterTools(), to @angular/router. This feature enables browser-side AI assistants (using the emerging WebMCP standard) to query available routes and trigger page navigations dynamically.

Use Cases & Motivation

This feature enables web applications to expose structured routing APIs directly to browser-side AI assistants (via WebMCP), unlocking several critical modern use cases:

1. Hands-Free & Voice-Driven Navigation

  • Scenario: Users interacting with applications in environments where they cannot physically touch the screen (e.g., cooking apps with messy hands, technicians following repair manuals, surgeons viewing medical protocols).
  • Benefit: The AI assistant can programmatically request route listings and navigate directly to steps (e.g., "go to step 3") via router.navigate, keeping the user focused on their task without manual device interaction.

2. Next-Gen Accessibility (A11y)

  • Scenario: Users with visual, motor, or cognitive impairments who find traversing deep nested navigation menus, accordions, or complex site maps using keyboards or screen readers tedious.
  • Benefit: Users can ask the agent directly to "take me to my March invoice." The AI utilizes the routing tool to perform instant, direct transition, bypass complex DOM hierarchies, and improve autonomy.

3. AI-Assisted Journeys (Conversational E-Commerce)

  • Scenario: Users configuring complex flows (like travel booking or custom checkouts) via a chat interface.
  • Benefit: Upon completing a configuration dialog, the agent can seamlessly transition the user's viewport directly to the checkout page (/checkout) by invoking router.navigate, creating a smooth, unified user journey.

4. Design-Resilient AI Interactions (Zero Maintenance)

  • Scenario: The development team completely changes the UI layout (e.g., hiding a settings button inside a dropdown).
  • Benefit: The AI assistant does not break or require instruction updates because it relies on the stable Angular routing configuration (/settings) rather than fragile, visual-based DOM scraping.

Proposed Changes

  • packages/router/src/webmcp.ts: New module implementing withExperimentalWebMcpRouterTools() and registering the tools router.list_routes and router.navigate.
  • packages/router/src/provide_router.ts & index.ts: Exported the new feature kind and creator function.
  • packages/router/test/webmcp.spec.ts: Added web-based browser integration tests for both router tools (verifying that they pass on Chromium and Firefox).

@pullapprove
pullapprove Bot requested review from alan-agius4 and atscott August 15, 2026 13:18
@angular-robot angular-robot Bot added detected: feature PR contains a feature commit area: router labels Aug 15, 2026
@ngbot ngbot Bot added this to the Backlog milestone Aug 15, 2026
@aminesbdev
aminesbdev force-pushed the feature/webmcp-router-tool branch from 830145c to 18178ed Compare August 15, 2026 13:56
Introduce withExperimentalWebMcpRouterTools() router feature to enable browser-side AI assistants (using the emerging WebMCP standard) to query available routes and trigger page navigations.

This adds router.list_routes and router.navigate tools.
@aminesbdev
aminesbdev force-pushed the feature/webmcp-router-tool branch from 18178ed to a9eb02d Compare August 15, 2026 14:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: router detected: feature PR contains a feature commit

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant