feat: add specification for A2UI web app iframe component (v0.9) #2123
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -87,6 +87,65 @@ | |
| ], | ||
| "unevaluatedProperties": false | ||
| }, | ||
| "WebAppFrameUrl": { | ||
| "type": "object", | ||
| "allOf": [ | ||
| { | ||
| "$ref": "common_types.json#/$defs/ComponentCommon" | ||
| }, | ||
| { | ||
| "type": "object", | ||
| "properties": { | ||
|
Collaborator
There was a problem hiding this comment. Could it make sense to also have a way to pass arbitrary static data to the embedded app as a property, rather than needing to pass it via the data model?
Collaborator
Author
There was a problem hiding this comment. Love the idea. I have introduced a new property
Collaborator
Author
There was a problem hiding this comment. Let me know if you think |
||
| "component": { | ||
| "const": "WebAppFrameUrl", | ||
| "description": "The component type identifier." | ||
| }, | ||
| "url": { | ||
| "$ref": "common_types.json#/$defs/DynamicString", | ||
| "description": "The external URL to load inside the iframe." | ||
| }, | ||
| "height": { | ||
| "$ref": "common_types.json#/$defs/DynamicNumber", | ||
| "description": "The height of the iframe in pixels." | ||
| }, | ||
| "allowedEvents": { | ||
| "type": "object", | ||
| "description": "A map of authorized action names to JSON Schemas defining the expected data payload.", | ||
| "additionalProperties": {"type": "object"} | ||
| }, | ||
| "allowedFunctions": { | ||
| "type": "object", | ||
| "description": "A map of authorized host client functions to JSON Schemas defining their expected arguments.", | ||
| "additionalProperties": {"type": "object"} | ||
| }, | ||
| "mutableData": { | ||
| "type": "object", | ||
| "description": "A map of data model keys that the embedded application is authorized to mutate in the parent A2UI Data Model, mapped to JSON Schemas defining their allowed values.", | ||
| "additionalProperties": {"type": "object"} | ||
| }, | ||
| "config": { | ||
| "type": "object", | ||
| "description": "A dictionary of static key-value initialization properties passed directly to the embedded application without reactive data model binding." | ||
| }, | ||
| "data": { | ||
| "type": "object", | ||
| "description": "Data binding configuration for the component.", | ||
| "properties": { | ||
| "paths": { | ||
| "type": "object", | ||
| "description": "A dictionary mapping custom state keys to distinct JSON Pointer paths in the data model.", | ||
| "additionalProperties": {"type": "string"} | ||
| } | ||
| }, | ||
| "required": ["paths"], | ||
| "additionalProperties": false | ||
| } | ||
| }, | ||
| "required": ["component", "url"] | ||
| } | ||
| ], | ||
| "unevaluatedProperties": false | ||
| }, | ||
| "PongScoreBoard": { | ||
| "type": "object", | ||
| "allOf": [ | ||
|
|
@@ -156,6 +215,9 @@ | |
| }, | ||
| { | ||
| "$ref": "#/components/Column" | ||
| }, | ||
| { | ||
| "$ref": "#/components/WebAppFrameUrl" | ||
| } | ||
| ] | ||
| } | ||
|
|
||
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -26,6 +26,7 @@ import {McpApp} from './mcp-app'; | |
| import {PongScoreBoard} from './pong-scoreboard'; | ||
| import {PongLayout} from './pong-layout'; | ||
| import {Column} from '@a2ui/angular'; | ||
| import {WebAppFrameUrl} from './web-app-frame-url'; | ||
|
|
||
| /** | ||
| * The catalog ID for the MCP App catalog. | ||
|
|
@@ -53,6 +54,16 @@ const PongLayoutSchema = z.object({ | |
| scoreboardComponent: z.string().optional(), | ||
| }); | ||
|
|
||
| const WebAppFrameUrlSchema = z.object({ | ||
| url: DynamicStringSchema, | ||
| data: DynamicValueSchema.optional(), | ||
| height: DynamicNumberSchema.optional(), | ||
| allowedEvents: z.record(z.any()).optional(), | ||
| allowedFunctions: z.record(z.any()).optional(), | ||
| mutableData: z.record(z.any()).optional(), | ||
| disableSchemaValidation: z.boolean().optional(), | ||
| }); | ||
|
|
||
| export const SHOW_WINNER_MODAL_FN = createFunctionImplementation( | ||
| { | ||
| name: 'showWinnerModal', | ||
|
|
@@ -127,6 +138,7 @@ export const DEMO_CATALOG = new Catalog( | |
| {name: 'McpApp', component: McpApp, schema: McpAppSchema}, | ||
| {name: 'PongScoreBoard', component: PongScoreBoard, schema: PongScoreBoardSchema}, | ||
| {name: 'PongLayout', component: PongLayout, schema: PongLayoutSchema}, | ||
| {name: 'WebAppFrameUrl', component: WebAppFrameUrl, schema: WebAppFrameUrlSchema}, | ||
|
Collaborator
There was a problem hiding this comment. @josemontesp is there some way in Angular that we the application developer could pass some configuration data to the Component when installing it in a catalog? I think it could be great for a developer to be able to set some static domain allowlist for these apps here, to statically protect the client against loading apps at arbitrary domains.
Collaborator
Author
There was a problem hiding this comment. Oooo This would be cool. Maintaining an allowlist on the client-side catalog would be a nice protection against Agent hallucination and compromised A2UI payloads coming from Agent/MCP servers.
Collaborator
There was a problem hiding this comment. In Angular we could use injection tokens that are provided at the app root level, with an optional type-safe configuration. The component can then inject that configuration directly into the component class. |
||
| // Column should use ColumnApi.schema from @a2ui/web_core, but it is not currently | ||
| // exported by the version of @a2ui/web_core resolved in this community sample. | ||
| // We use z.any() to avoid duplicating the schema definition here. | ||
|
|
||
Oops, something went wrong.
Oops, something went wrong.
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.
Uh oh!
There was an error while loading. Please reload this page.