Skip to content

[MCP] Add the 3D geometry MCP App example and explorer integration - #3010

Draft
josemontespg wants to merge 1 commit into
catalogs-mcp-app-componentfrom
catalogs-example-mcp-app-order-summary
Draft

josemontespg wants to merge 1 commit into
catalogs-mcp-app-componentfrom
catalogs-example-mcp-app-order-summary

Conversation

@josemontespg

@josemontespg josemontespg commented Oct 5, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

Adds one MCP App example, catalogs/mcp/v1/examples/mcp-app-3d-geometry.json, validates it against the v1.0 basic + MCP catalogs in specification/scripts/validate.py, and integrates @a2ui/catalog-mcp into the Lit, Angular, and React Explorer applications under a dedicated mcp/ directory with a client-side MockMcpServer.

The example is a 60fps canvas 3D renderer, the kind of UI the Basic Catalog cannot express, and it exercises the four things an MCP App adds on top of A2UI: two-way data.paths binding (a sibling TextField preset and the app's camera telemetry), ui/update-model-context publishing the scene state to /scene3d/modelContext, tools/call (capture_3d_snapshot), and responsive resizing through ui/notifications/host-context-changed (containerDimensions).

The example creates its surface with the basic catalog and sets catalogId on the McpApp component alone, so the Explorers register mcpCatalog next to the basic catalog without composing a merged catalog.

Changes

  • catalogs/mcp/v1/examples/mcp-app-3d-geometry.json: the example, with its description documenting the MCP features it showcases; catalogs/mcp/README.md lists it.
  • specification/scripts/validate.py: Add multi-catalog merging (merge_catalogs) and the mcp validation entry (catalogs/mcp/v1/catalog.json + catalogs/basic/v1/catalog.json).
  • renderers/{lit,react}/a2ui_explorer: Register mcpCatalog with the MessageProcessor; renderers/angular/a2ui_explorer: McpDemoCatalog adapts mcpCatalog to AngularCatalog.
  • renderers/{lit,angular,react}/a2ui_explorer/src/{,app/}mcp/: Isolate all MCP Explorer setup into mcp/mock-mcp-server.ts (client-side MockMcpServer implementing McpToolClient with simulated network latency for tools/list, resources/read, and tools/call), mcp/mcp-app-resizer.ts (window resize handles), mcp/mcp-tool-actions.ts (mockMcpServer and handleMcpToolAction) and an export-only mcp/index.ts. The MCP catalog is made of universal Web Components, so the Angular Explorer renders it only with useUniversalComponents: true (the MCP spec opts in); tool calls are routed through handleMcpToolAction as A2UI actions.
  • typescript/catalogs/mcp/tests/examples/mcp_app_3d_geometry.test.ts: End-to-end Karma test of the example through the real sandbox proxy (telemetry and model context written back by the app); renderers/{lit,react,angular}/a2ui_explorer each get an example test driven through the bound preset field.

Verification

  • python3 specification/scripts/validate.py
  • yarn workspace @a2ui/catalog-mcp test
  • yarn workspace @a2ui/{lit,react,angular}-explorer run test
  • ./scripts/fix_format.sh --check && python3 scripts/fix_licenses.py --check

Related to #3157

@github-project-automation github-project-automation Bot moved this to Todo in A2UI Oct 5, 2026
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 7f9ca7b to 3e85a21 Compare October 5, 2026 20:45
@josemontespg
josemontespg added this pull request to stack #3011 October 5, 2026 20:45

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces the mcp-app-order-summary.json example to the v1 catalog, showcasing an McpApp that loads and totals order items via a tool call, alongside corresponding end-to-end tests. Feedback on the changes highlights a syntax issue with nested interpolation in the total_text component expression, as well as security and robustness concerns in the inline JavaScript, such as potential prototype pollution, missing defensive checks for order items, and a lack of input sanitization.

Comment thread catalogs/mcp/v1/examples/mcp-app-order-summary.json Outdated
Comment thread catalogs/mcp/v1/examples/mcp-app-order-summary.json Outdated
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 3e85a21 to 4a6d14d Compare October 5, 2026 23:24
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch 2 times, most recently from d1af653 to 04ae636 Compare October 6, 2026 00:24
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch 5 times, most recently from 925b360 to f71c7a5 Compare October 7, 2026 19:24
@josemontespg
josemontespg removed this pull request from stack #3011 October 7, 2026 23:18
@josemontespg
josemontespg changed the base branch from catalogs-example-url-order-tracker to main October 7, 2026 23:18
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from f71c7a5 to e5c2e1c Compare October 7, 2026 23:19
@josemontespg
josemontespg changed the base branch from main to catalogs-mcp-app-component October 7, 2026 23:19
@josemontespg
josemontespg added this pull request to stack #3055 October 7, 2026 23:19
@josemontespg
josemontespg removed this pull request from stack #3055 October 7, 2026 23:32
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from e5c2e1c to 8e769f0 Compare October 7, 2026 23:33
@josemontespg josemontespg changed the title feat(catalogs): add the order summary example to the MCP catalog [MCP] feat(catalogs): add MCP App examples and explorer integration Oct 7, 2026
@josemontespg
josemontespg added this pull request to stack #3057 October 7, 2026 23:34
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 8e769f0 to 12044da Compare October 8, 2026 19:25
@josemontespg josemontespg changed the title [MCP] feat(catalogs): add MCP App examples and explorer integration [MCP] Add MCP App examples and explorer integration Oct 8, 2026
@josemontespg
josemontespg added this pull request to stack #3114 October 9, 2026 18:49
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 81552e3 to 59c8df0 Compare October 9, 2026 19:09
@josemontespg
josemontespg removed this pull request from stack #3114 October 9, 2026 19:12
@josemontespg
josemontespg added this pull request to stack #3115 October 9, 2026 19:12
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 59c8df0 to 7d18f68 Compare October 9, 2026 20:23
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch 2 times, most recently from 1c0de55 to 52c61dc Compare October 9, 2026 22:34
Comment thread renderers/angular/a2ui_explorer/src/app/demo-catalog.ts Outdated
Comment thread renderers/lit/a2ui_explorer/src/mcp/index.ts Outdated
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch 2 times, most recently from 2fb9a41 to ae4f627 Compare October 9, 2026 22:54
Comment thread renderers/angular/a2ui_explorer/src/app/demo-catalog.ts Outdated
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from ae4f627 to 85e1ade Compare October 9, 2026 23:39
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 85e1ade to 2751fe9 Compare October 12, 2026 18:57
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 2751fe9 to 78f2fc6 Compare October 12, 2026 21:29
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch from 78f2fc6 to 94283e3 Compare October 12, 2026 23:08
@josemontespg
josemontespg force-pushed the catalogs-example-mcp-app-order-summary branch 2 times, most recently from 629bc61 to 70805be Compare October 13, 2026 19:48
@josemontespg
josemontespg removed this pull request from stack #3115 October 13, 2026 19:51
`catalogs/mcp/v1/examples/mcp-app-order-summary.json` renders an `McpApp` next to a
`TextField` bound to `/order/discountCode` and a `Text` showing `/order/total`. The app asks
for the order through the `get_order` tool, which the host dispatches as an A2UI action, totals
the items the agent writes back to `/order/items`, applies the discount code and writes the
total back through `ui/notifications/data-model-change`.

`tests/examples/mcp_app_order_summary.test.ts` runs the example through the composed catalog
and the real sandbox proxy: it answers the `get_order` action with an order, expects the total
in the host data model, then sets the discount code and expects the discounted total.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant