Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,7 @@ a2a_agents/python/a2ui_agent/src/a2ui/assets/**/*.json
agent_sdks/python/src/a2ui/assets/**/*.json
## Generated files for sandbox frame.
samples/client/angular/projects/mcp_calculator/public/mcp_apps_inner_iframe/

## Generated files for a2ui-in-mcpapps
samples/agent/mcp/a2ui-in-mcpapps/server/apps/dist
samples/agent/mcp/a2ui-in-mcpapps/server/apps/public
100 changes: 100 additions & 0 deletions samples/agent/mcp/a2ui-in-mcpapps/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
# A2UI in MCP Apps Sample

This sample demonstrates a Model Context Protocol (MCP) Application Host that isolation-tests untrusted third-party Angular components via a secure double-iframe proxy pattern.

## Architecture

* **`client/`**: The host container application (Angular). It hosts the outer safe iframe.
* **`server/`**: The MCP Server (Python/uv) that provides the micro-app resources and tools.
* **`server/apps/src/`**: The source source code for the server-hosted isolated micro-app.

## Communication Flow

```mermaid
sequenceDiagram
participant Server as MCP Server
participant Host as Client Host Application
participant Proxy as Sandbox Proxy
participant App as MCP App (Sandbox)
participant A2UI as A2UI Surface

Note over Host: 1. Loaded from Hosting server
Host->>Server: 2. Fetch MCP App resource
Server-->>Host: Return MCP App resource
Host->>Proxy: 3a. Load Sandbox Proxy
Proxy->>App: 3b. Serve App in isolated iframe

Note over App: 4. CTA triggers relay request
App->>Proxy: Request tool call
Proxy->>Host: Relay Request
Host->>Server: Forward Tool Call
Server-->>Host: 5. Respond with A2UI JSON payload
Host->>Proxy: Relay payload
Proxy->>App: 6. Hand down payload to MCP App

App->>A2UI: 7. Renders A2UI Components
Note over A2UI: Click on A2UI Button

A2UI->>App: 8. A2UI Button triggers UserAction
App->>Proxy: Forward UserAction event
Proxy->>Host: Relay UserAction to Host
Note over Host: 9. Map Action to Tool Call
Host->>Server: Forward Tool Call
Server-->>Host: 10. Respond with A2UI payload (datamodelupdate)
Host->>Proxy: Relay payload
Proxy->>App: 11. Pipe payload to MCP App
App->>A2UI: Update rendering
```

---

## Prerequisites

- [Node.js](https://nodejs.org/) (runs the client and build scripts)
- [Python 3.10+](https://www.python.org/) with `uv` (runs the MCP server)

---

## Build & Regeneration

This sample relies on some generated bundle artifacts. Some are committed for convenience, while others are ignored and must be built.

### 1. Build Client Sandbox Bridge
The sandboxed iframe needs its asset bundle. Run this in the `client/` directory:
```bash
cd client
npm install
npm run build:sandbox
```
*(Generates `client/public/sandbox_iframe/sandbox.{js,html}`)*

### 2. Rebuild the Server Hosted App (Optional)
The server serves a bundled `app.html` artifact located in `server/apps/public/app.html`. If you modify the source code in `server/apps/src/`, you must regenerate this list:

Run this in the `server/apps/src/` directory:
```bash
cd server/apps/src
npm install
npm run build:all
```
*(Runs Angular compilation and triggers `node inline.js` to single-file inline it into `server/apps/public/app.html`)*

---

## Running the Sample

### 1. Start the MCP Server
Run this in the `server/` directory:
```bash
cd server
uv sync
uv run python server.py --transport sse --port 8000
```

### 2. Start the Host Client
Run this in the `client/` directory:
```bash
cd client
npm run start
```
Navigate to `http://localhost:4200` to view the running host.
17 changes: 17 additions & 0 deletions samples/agent/mcp/a2ui-in-mcpapps/client/.editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Editor configuration, see https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.ts]
quote_type = single
ij_typescript_use_double_quotes = false

[*.md]
max_line_length = off
trim_trailing_whitespace = false
48 changes: 48 additions & 0 deletions samples/agent/mcp/a2ui-in-mcpapps/client/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.

# Compiled output
/dist
/tmp
/out-tsc
/bazel-out

# Node
/node_modules
npm-debug.log
yarn-error.log

# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
!.vscode/mcp.json
.history/*

# Miscellaneous
/.angular/cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
__screenshots__/

# System files
.DS_Store
Thumbs.db

# Generated sandbox files
/public/sandbox_iframe/sandbox.js
/public/sandbox_iframe/sandbox.html
12 changes: 12 additions & 0 deletions samples/agent/mcp/a2ui-in-mcpapps/client/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"printWidth": 100,
"singleQuote": true,
"overrides": [
{
"files": "*.html",
"options": {
"parser": "angular"
}
}
]
}
59 changes: 59 additions & 0 deletions samples/agent/mcp/a2ui-in-mcpapps/client/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Client

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.5.

## Development server

To start a local development server, run:

```bash
ng serve
```

Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the project run:

```bash
ng build
```

This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.

## Running unit tests

To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
71 changes: 71 additions & 0 deletions samples/agent/mcp/a2ui-in-mcpapps/client/angular.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "npm"
},
"newProjectRoot": "projects",
"projects": {
"client": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular/build:application",
"options": {
"browser": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
"styles": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kB",
"maximumError": "1MB"
},
{
"type": "anyComponentStyle",
"maximumWarning": "4kB",
"maximumError": "8kB"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular/build:dev-server",
"configurations": {
"production": {
"buildTarget": "client:build:production"
},
"development": {
"buildTarget": "client:build:development"
}
},
"defaultConfiguration": "development"
},
"test": {
"builder": "@angular/build:unit-test"
}
}
}
}
}
Loading
Loading