Repository navigation
[MCP] Add the 3D geometry MCP App example and explorer integration - #3010
Draft
josemontespg wants to merge 1 commit into
Draft
josemontespg wants to merge 1 commit into
josemontespg wants to merge 1 commit into
Conversation
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 5, 2026 20:45
7f9ca7b to
3e85a21
Compare
josemontespg
added this pull request to stack #3011
October 5, 2026 20:45
Contributor
There was a problem hiding this comment.
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.
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 5, 2026 23:24
3e85a21 to
4a6d14d
Compare
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
2 times, most recently
from
October 6, 2026 00:24
d1af653 to
04ae636
Compare
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
5 times, most recently
from
October 7, 2026 19:24
925b360 to
f71c7a5
Compare
josemontespg
removed this pull request from stack #3011
October 7, 2026 23:18
josemontespg
changed the base branch from
catalogs-example-url-order-tracker
to
main
October 7, 2026 23:18
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 7, 2026 23:19
f71c7a5 to
e5c2e1c
Compare
josemontespg
added this pull request to stack #3055
October 7, 2026 23:19
josemontespg
removed this pull request from stack #3055
October 7, 2026 23:32
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 7, 2026 23:33
e5c2e1c to
8e769f0
Compare
josemontespg
added this pull request to stack #3057
October 7, 2026 23:34
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 8, 2026 19:25
8e769f0 to
12044da
Compare
josemontespg
added this pull request to stack #3114
October 9, 2026 18:49
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 9, 2026 19:09
81552e3 to
59c8df0
Compare
josemontespg
removed this pull request from stack #3114
October 9, 2026 19:12
josemontespg
added this pull request to stack #3115
October 9, 2026 19:12
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 9, 2026 20:23
59c8df0 to
7d18f68
Compare
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
2 times, most recently
from
October 9, 2026 22:34
1c0de55 to
52c61dc
Compare
josemontespg
commented
Oct 9, 2026
josemontespg
commented
Oct 9, 2026
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
2 times, most recently
from
October 9, 2026 22:54
2fb9a41 to
ae4f627
Compare
josemontespg
commented
Oct 9, 2026
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 9, 2026 23:39
ae4f627 to
85e1ade
Compare
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 12, 2026 18:57
85e1ade to
2751fe9
Compare
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 12, 2026 21:29
2751fe9 to
78f2fc6
Compare
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
from
October 12, 2026 23:08
78f2fc6 to
94283e3
Compare
josemontespg
force-pushed
the
catalogs-example-mcp-app-order-summary
branch
2 times, most recently
from
October 13, 2026 19:48
629bc61 to
70805be
Compare
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds one MCP App example,
catalogs/mcp/v1/examples/mcp-app-3d-geometry.json, validates it against the v1.0 basic + MCP catalogs inspecification/scripts/validate.py, and integrates@a2ui/catalog-mcpinto the Lit, Angular, and React Explorer applications under a dedicatedmcp/directory with a client-sideMockMcpServer.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.pathsbinding (a siblingTextFieldpreset and the app's camera telemetry),ui/update-model-contextpublishing the scene state to/scene3d/modelContext,tools/call(capture_3d_snapshot), and responsive resizing throughui/notifications/host-context-changed(containerDimensions).The example creates its surface with the basic catalog and sets
catalogIdon theMcpAppcomponent alone, so the Explorers registermcpCatalognext 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.mdlists it.specification/scripts/validate.py: Add multi-catalog merging (merge_catalogs) and themcpvalidation entry (catalogs/mcp/v1/catalog.json+catalogs/basic/v1/catalog.json).renderers/{lit,react}/a2ui_explorer: RegistermcpCatalogwith theMessageProcessor;renderers/angular/a2ui_explorer:McpDemoCatalogadaptsmcpCatalogtoAngularCatalog.renderers/{lit,angular,react}/a2ui_explorer/src/{,app/}mcp/: Isolate all MCP Explorer setup intomcp/mock-mcp-server.ts(client-sideMockMcpServerimplementingMcpToolClientwith simulated network latency fortools/list,resources/read, andtools/call),mcp/mcp-app-resizer.ts(window resize handles),mcp/mcp-tool-actions.ts(mockMcpServerandhandleMcpToolAction) and an export-onlymcp/index.ts. The MCP catalog is made of universal Web Components, so the Angular Explorer renders it only withuseUniversalComponents: true(the MCP spec opts in); tool calls are routed throughhandleMcpToolActionas 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_explorereach get an example test driven through the bound preset field.Verification
python3 specification/scripts/validate.pyyarn workspace @a2ui/catalog-mcp testyarn workspace @a2ui/{lit,react,angular}-explorer run test./scripts/fix_format.sh --check && python3 scripts/fix_licenses.py --checkRelated to #3157