feat: add A2UI MCP catalog renderer and live HTTP MCP server support by wrenj · Pull Request #219 · a2ui-project/composer

wrenj · 2026-09-21T20:06:41Z

Screencast: https://screencast.googleplex.com/cast/NTM1Nzk5OTk3MDMyMDM4NHwzOTVlNzFmNS1jZg

Note: copied over MCP catalog typescript as the NPM for it is not available yet.

Summary

Adds end-to-end support for the A2UI Model Context Protocol (MCP) catalog (basic_with_mcp), enabling A2UI surfaces in the preview iframe to execute live HTTP MCP tools via the Composer shell. Also updates the standalone chat LLM client to gemini-3.7-flash with medium thinking.

Key Changes

1. Bridge MCP Function Catalog & Cross-Frame Client (`bridge/`)

Implements the v0.9 A2UI MCP catalog functions (callMcpTool, jmespath, split, regexCapture, regexReplace, and updateDataModel) in bridge/src/mcp/.
Adds IframeMcpClient and extends PreviewBridge with MCP_REQUEST and MCP_RESPONSE message handling to proxy tool invocations from the sandboxed preview iframe to the parent shell.
Wires MCP function registration into AngularBridge, LitBridge, and ReactBridge.

2. Angular Basic with MCP Sample Renderer (`samples/ng-basic-with-mcp-catalog/`)

Adds a standalone Angular catalog renderer (samples/ng-basic-with-mcp-catalog) configured with the basic_with_mcp schema and prebuilt usage examples.
Registers the new sample in shell/src/config.json, CatalogStorageModel, README.md, and the GitHub Pages / PR preview build workflows.

3. Shell MCP Client Manager & Host Communication (`shell/`)

Adds McpClientManagerService using @modelcontextprotocol/sdk (StreamableHTTPClientTransport) to manage HTTP MCP server connections, discover tool metadata (name, description, inputSchema, outputSchema), and route tool calls across active servers.
Updates HostCommunication and CrossFrameValidator to validate and handle MCP_REQUEST messages from the preview iframe, dispatch MCP_RESPONSE payloads, and record mcp_response entries in the raw message debug log.

4. Settings UI, System Prompt Injection & LLM Model Update (`shell/`)

Adds an MCP Servers configuration card in Settings to add, remove, and inspect connected HTTP MCP servers and their discovered tools.
Updates ChatPromptFactoryService to append MCP usage instructions and discovered tool schemas to the system prompt when the active catalog declares callMcpTool.
Updates ChatPanel to display the active MCP server count in the system instructions link when an MCP-enabled catalog is active.
Updates Standalone3pLlmClient to use gemini-3.7-flash with ThinkingLevel.MEDIUM.

Vendor v0.9 MCP catalog functions (callMcpTool, jmespath, split, regexCapture, regexReplace, updateDataModel) into a2ui-bridge and update the Lit, Angular, and React basic catalog sample definitions to use basic_with_mcp. Add MCP_REQUEST and MCP_RESPONSE cross-frame proxy messaging between PreviewBridge (IframeMcpClient) and HostCommunication, backed by McpClientManagerService in the Composer shell. Add MCP server management in Settings and an MCP Servers toggle in ChatPanel that injects active server tool schemas into the LLM system prompt.

Update Standalone3pLlmClient to use gemini-3.7-flash with thinkingLevel set to ThinkingLevel.MEDIUM.

gemini-code-assist

Code Review

This pull request introduces comprehensive Model Context Protocol (MCP) support across the A2UI ecosystem, enabling preview surfaces to invoke live MCP tools. Key additions include a new Angular sample application with MCP catalog integration, core MCP data functions (such as callMcpTool, jmespath, and regex utilities), and a proxy client to route requests between the preview iframe and the parent shell. The shell has been updated with an MCP client manager, a configuration interface in Settings, and dynamic prompt injection of active tools into Gemini's system instructions. Feedback focuses on enhancing robustness against malformed external payloads, such as adding strict type guards before string operations, preventing asynchronous race conditions during server connection, validating MCP_REQUEST messages in the cross-frame validator, and defensively defaulting missing arguments to prevent runtime crashes.

github-actions · 2026-09-21T20:27:13Z

⚡ A2UI Composer PR Preview

Your automated preview is successfully live (commit cab80bc):
👉 Launch PR Preview

Note: This environment will be wiped automatically when the PR is merged or closed.

sugoi-yuzuru

IIUC, there are duplicated code from A2UI's MCP catalog in this PR because the NPM package has not been released. Can we make sure we have a TODO and a README to discuss this in detail and these files are grouped so that we can eventually swap it out to the NPM reference import?

Isolate vendored A2UI MCP catalog source files within bridge/src/mcp/ by moving IframeMcpClient to bridge/src/iframe-mcp-client.ts. Add bridge/src/mcp/README.md detailing upstream origins, inventory mapping, temporary dependencies, and step-by-step instructions to swap vendored code with the official @a2ui/mcp-catalog package once released on NPM. Add TODO annotations across all vendored entry points, functions, and consumer imports. Update samples/ng-basic-with-mcp-catalog/README.md.

wrenj · 2026-09-22T17:25:46Z

IIUC, there are duplicated code from A2UI's MCP catalog in this PR because the NPM package has not been released. Can we make sure we have a TODO and a README to discuss this in detail and these files are grouped so that we can eventually swap it out to the NPM reference import?

added todo and readme

jgindin · 2026-09-22T17:32:06Z

A couple of UI issues:

The "Add Server" button is really big -- maybe use the same "+" type button as used for the renderer app & API keys? (I'm not suggesting a drop-down, like those have.)
There's no way to edit the URL, so when you make a mistake, you have to delete and then add a new one.
Having a "Test" button would be really nice

jgindin · 2026-09-22T17:35:24Z

@@ -0,0 +1,25 @@
+<!--


Why do we need a whole new renderer for this? Can't we just add this into the existing ng-basic-catalog sample?

jgindin · 2026-09-22T18:19:55Z

+/**
+ * Checks whether the active catalog includes `callMcpTool` to determine if the renderer supports MCP mode.
+ */
+export function doesCatalogSupportMcp(catalog: Catalog | null | undefined): boolean {


This doesn't seem to fit in this file.

I suggest it be a method on the McpClientManagerService.

jgindin · 2026-09-22T18:22:07Z

 yarn --cwd shell start
 ```

+### Angular Basic with MCP Renderer (`ng-basic-with-mcp-catalog`)


This comment seems out of place -- it takes the two paragraphs that used to follow and moves them into this new section, where they don't belong.

jgindin · 2026-09-22T18:24:09Z

+    "@modelcontextprotocol/sdk": "1.30.0",
+    "jmespath": "0.16.0",
+    "re2js": "2.8.6",
+    "zod": "^4.1.12"


We shouldn't use the ^ prefix. Along with the ~ prefix, it means we never really know what versions are being used.

- Fold BasicWithMcpCatalog and MCP function schemas into samples/ng-basic-catalog and remove the duplicate samples/ng-basic-with-mcp-catalog workspace. - Restore README.md section structure under Starting the A2UI Composer. - Move doesCatalogSupportMcp from catalog-storage.model.ts into McpClientManagerService. - Pin zod dependency version to 4.6.5 without a caret prefix in bridge/package.json. - Replace the oversized Add Server button in Settings with a compact add_circle icon button, add inline URL editing, and add a Test connection button.

…tokens On wide screens the MCP Servers card, added to main in a2ui-project#219, fell into the left column under the tall configuration card and left a gap under Connection Status. Configuration now fills the left column, and status and MCP servers, both about what Composer is connected to, stack on the right. Narrow screens still show one column. Card titles, subtitles (including the MCP card's), section headings, and the API key help text use Material system typography tokens instead of fixed sizes and weights.

) * feat(settings): arrange configuration and diagnostics responsively Settings places configuration and connection diagnostics side by side on wide screens and stacks the cards when space is limited. The cards share header and body spacing, readable diagnostic logs, and the active theme. * fix(settings): place MCP servers beside status and use Material type tokens On wide screens the MCP Servers card, added to main in #219, fell into the left column under the tall configuration card and left a gap under Connection Status. Configuration now fills the left column, and status and MCP servers, both about what Composer is connected to, stack on the right. Narrow screens still show one column. Card titles, subtitles (including the MCP card's), section headings, and the API key help text use Material system typography tokens instead of fixed sizes and weights.

wrenj added 11 commits September 21, 2026 12:40

feat: switch chat model to gemini-3.7-flash with medium thinking

7e29a54

Update Standalone3pLlmClient to use gemini-3.7-flash with thinkingLevel set to ThinkingLevel.MEDIUM.

e2e flow works

42455af

show mcp_response

f1bdd73

a

73309ef

separate renderer for basic with mcp

0a2e128

fix prompt

89a65b7

styling

bdb37d9

a

176c7c1

a

eabfbfb

aa

37e54c3

wrenj changed the title ~~A2uimcp~~ feat: add A2UI MCP catalog renderer and live HTTP MCP server support Sep 21, 2026

gemini-code-assist Bot reviewed Sep 21, 2026

View reviewed changes

wrenj added 3 commits September 21, 2026 16:22

aa

0d48d36

aaa

da1747e

chore: remove unused renderer changes and point MCP sample to local port

fe036e8

fix: harden MCP type guards, race conditions, and payload validation

5c4adc4

wrenj requested review from jgindin and sugoi-yuzuru September 21, 2026 20:41

sugoi-yuzuru reviewed Sep 22, 2026

View reviewed changes

sugoi-yuzuru approved these changes Sep 22, 2026

View reviewed changes

wrenj merged commit 9bb895c into main Sep 22, 2026
13 of 15 checks passed

jgindin requested changes Sep 22, 2026

View reviewed changes

wrenj mentioned this pull request Sep 22, 2026

fix: address post-merge review feedback from PR #219 #227

Merged

This was referenced Sep 23, 2026

fix(workspace): restore saved layouts and contain docked previews #217

Merged

Add Slack Block Kit authoring to Composer #216

Open

wrenj added a commit that referenced this pull request Sep 24, 2026

fix: address post-merge review feedback from PR #219 (#227)

4fe3349

jerelvelarde mentioned this pull request Sep 25, 2026

feat(settings): arrange configuration and diagnostics responsively #218

Merged

4 of 6 tasks

Navigation Menu

Repository navigation

feat: add A2UI MCP catalog renderer and live HTTP MCP server support - #219

feat: add A2UI MCP catalog renderer and live HTTP MCP server support#219
wrenj merged 16 commits into
mainfrom
a2uimcp

wrenj commented Sep 21, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Sep 21, 2026 •

edited

Loading

Uh oh!

sugoi-yuzuru left a comment

Uh oh!

wrenj commented Sep 22, 2026

Uh oh!

Uh oh!

jgindin commented Sep 22, 2026

Uh oh!

jgindin Sep 22, 2026

Uh oh!

jgindin Sep 22, 2026

Uh oh!

jgindin Sep 22, 2026

Uh oh!

jgindin Sep 22, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Summary

Key Changes

1. Bridge MCP Function Catalog & Cross-Frame Client (bridge/)

2. Angular Basic with MCP Sample Renderer (samples/ng-basic-with-mcp-catalog/)

3. Shell MCP Client Manager & Host Communication (shell/)

4. Settings UI, System Prompt Injection & LLM Model Update (shell/)

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚡ A2UI Composer PR Preview

Uh oh!

sugoi-yuzuru left a comment

Choose a reason for hiding this comment

Uh oh!

wrenj commented Sep 22, 2026

Uh oh!

Uh oh!

jgindin commented Sep 22, 2026

Uh oh!

jgindin Sep 22, 2026

Choose a reason for hiding this comment

Uh oh!

jgindin Sep 22, 2026

Choose a reason for hiding this comment

Uh oh!

jgindin Sep 22, 2026

Choose a reason for hiding this comment

Uh oh!

jgindin Sep 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wrenj commented Sep 21, 2026 •

edited

Loading

1. Bridge MCP Function Catalog & Cross-Frame Client (`bridge/`)

2. Angular Basic with MCP Sample Renderer (`samples/ng-basic-with-mcp-catalog/`)

3. Shell MCP Client Manager & Host Communication (`shell/`)

4. Settings UI, System Prompt Injection & LLM Model Update (`shell/`)

github-actions Bot commented Sep 21, 2026 •

edited

Loading