a2ui_iframe_developer

Name: a2ui_iframe_developer
Author: VeerMuchandi

15stars1forks

How to install a2ui_iframe_developer?

veermuchandi/rad-skills/a2ui_iframe_developer

$npx -y skills add VeerMuchandi/rad-skills --skill a2ui_iframe_developer

Installs into the current project.

Summary

Specialized instructions and guidelines for implementing custom iframes (WebFrameSrcdoc and WebFrameUrl) in A2UI agents inside Gemini Enterprise.

Files · 1

View on GitHub

SKILL.md

1	# A2UI Iframe Developer Skill
2
3	This skill provides comprehensive guidelines, architectural designs, code patterns, and API specifications for implementing custom iframe components (`WebFrameSrcdoc` and `WebFrameUrl`) in Agent-Driven User Interface (A2UI) agents within Gemini Enterprise.
4
5	---
6
7	## 1. Architectural Overview
8
9	Gemini Enterprise supports embedding custom web-based user interfaces inside the chat console. This allows agents to present rich, interactive, and pre-built widgets (like maps, calendars, dashboards, or ticket boards).
10
11	```mermaid
12	sequenceDiagram
13	participant Agent as A2A Agent (Reasoning Engine)
14	participant Host as Gemini Enterprise (Host UI)
15	participant Iframe as Iframe Web Widget (A2UI View)
16
17	Agent->>Host: surfaceUpdate (WebFrameSrcdoc / WebFrameUrl component payload)
18	Host->>Iframe: Mounts & renders page / HTML doc
19	Iframe->>Host: window.parent.postMessage({type: "a2ui_action", action: "...", data: {...}}, "*")
20	Host->>Agent: A2A User Action Event (Triggers agent turn)
21	Agent-->>Host: dataModelUpdate or surfaceUpdate response
22	```
23
24	---
25
26	## 2. Choosing the Right Component
27
28	\| Dimension \| `WebFrameSrcdoc` \| `WebFrameUrl` \|
29	\| :--- \| :--- \| :--- \|
30	\| Primary Use Case \| Lightweight custom widgets, self-contained interactive UI, form controls, charts. \| Embedding existing web apps, complex SPA frameworks (React/Vue), pages requiring network access. \|
31	\| Network Access \| Strictly Blocked (`connect-src 'none'` CSP required). \| Allowed (requires allowlisting target domain(s)). \|
32	\| Hosting Requirement \| None. Inline HTML string is generated dynamically by the agent. \| Yes. Code must be hosted externally (e.g., Cloud Run, Firebase Hosting). \|
33	\| Security Boundaries \| High. Restricts cross-site scripting and external exfiltration. \| Standard sandboxed iframe boundaries. \|
34
35	---
36
37	## 3. Schema Definitions
38
39	These components are declared inside the `components` list of an A2UI `surfaceUpdate` message.
40
41	### 3.1 WebFrameSrcdoc Schema
42	```json
43	{
44	"type": "OBJECT",
45	"description": "Renders dynamic inline HTML inside a network-restricted iframe.",
46	"properties": {
47	"view_type": {
48	"type": "STRING",
49	"description": "Indicates the UI view template type (e.g., 'IssueTracker', 'UserProfile', 'AnalyticsChart').",
50	"enum": ["IssueTracker", "UserProfile", "AnalyticsChart"]
51	},
52	"height": {
53	"type": "NUMBER",
54	"description": "The desired height of the iframe panel in pixels."
55	},
56	"srcdoc": {
57	"type": "STRING",
58	"description": "The raw HTML string containing inline CSS and JavaScript."
59	}
60	},
61	"required": ["view_type", "srcdoc"]
62	}
63	```
64
65	### 3.2 WebFrameUrl Schema
66	```json
67	{
68	"type": "OBJECT",
69	"description": "Renders an external webpage via URL in a sandboxed iframe.",
70	"properties": {
71	"url": {
72	"type": "OBJECT",
73	"description": "Specifies the URL to load.",
74	"properties": {
75	"literalString": {
76	"type": "STRING",
77	"description": "The hardcoded target URL string."
78	},
79	"path": {
80	"type": "STRING",
81	"description": "JSON path to extract the URL from the data model (e.g., '/results/url')."
82	}
83	}
84	},
85	"height": {
86	"type": "NUMBER",
87	"description": "The height of the iframe in pixels."
88	}
89	},
90	"required": ["url"]
91	}
92	```
93
94	---
95
96	## 4. Implementation Guidelines
97
98	### Step 1: Secure WebFrameSrcdoc with CSP
99	For any HTML sent via `WebFrameSrcdoc`, you MUST include the following Content Security Policy (CSP) tag in the `<head>` element:
100	```html
101	<meta http-equiv="Content-Security-Policy" content="connect-src 'none'">
102	```
103	> [!IMPORTANT]
104	> Enforcement: If this exact CSP meta tag is missing, Gemini Enterprise will block rendering of the component to prevent unauthorized data exfiltration.
105
106	### Step 2: Bidirectional Communication via `postMessage`
107	To trigger conversational updates or agent tool executions from within the iframe, implement a event listener inside the HTML page that calls `window.parent.postMessage`.
108
109	#### Iframe Frontend (JavaScript):
110	```javascript
111	function sendActionToAgent(actionName, payload) {
112	window.parent.postMessage({
113	type: 'a2ui_action',
114	action: actionName,
115	data: payload
116	}, '*'); // Emit event to host window
117	}
118
119	// Example: User clicks on a location pin
120	document.getElementById('map-pin-1').addEventListener('click', () => {
121	sendActionToAgent('selectStop', { stopId: 'stop_101', customer: 'Alice Johnson' });
122	});
123	```
124
125	#### Agent Backend (Python):
126	Define a tool or A2A action handler to process user events received via the host. Ensure the agent instruction guides the LLM on handling these interactions.
127
128	### Step 3: Agent System Instructions for A2UI Lifecycle
129	To ensure the LLM coord

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

a2ui_iframe_developer

15stars1forks

View on GitHub

How to install a2ui_iframe_developer?

veermuchandi/rad-skills/a2ui_iframe_developer

$npx -y skills add VeerMuchandi/rad-skills --skill a2ui_iframe_developer

Installs into the current project.

Summary

Specialized instructions and guidelines for implementing custom iframes (WebFrameSrcdoc and WebFrameUrl) in A2UI agents inside Gemini Enterprise.

Files · 1

View on GitHub

SKILL.md

1	# A2UI Iframe Developer Skill
2
3	This skill provides comprehensive guidelines, architectural designs, code patterns, and API specifications for implementing custom iframe components (`WebFrameSrcdoc` and `WebFrameUrl`) in Agent-Driven User Interface (A2UI) agents within Gemini Enterprise.
4
5	---
6
7	## 1. Architectural Overview
8
9	Gemini Enterprise supports embedding custom web-based user interfaces inside the chat console. This allows agents to present rich, interactive, and pre-built widgets (like maps, calendars, dashboards, or ticket boards).
10
11	```mermaid
12	sequenceDiagram
13	participant Agent as A2A Agent (Reasoning Engine)
14	participant Host as Gemini Enterprise (Host UI)
15	participant Iframe as Iframe Web Widget (A2UI View)
16
17	Agent->>Host: surfaceUpdate (WebFrameSrcdoc / WebFrameUrl component payload)
18	Host->>Iframe: Mounts & renders page / HTML doc
19	Iframe->>Host: window.parent.postMessage({type: "a2ui_action", action: "...", data: {...}}, "*")
20	Host->>Agent: A2A User Action Event (Triggers agent turn)
21	Agent-->>Host: dataModelUpdate or surfaceUpdate response
22	```
23
24	---
25
26	## 2. Choosing the Right Component
27
28	\| Dimension \| `WebFrameSrcdoc` \| `WebFrameUrl` \|
29	\| :--- \| :--- \| :--- \|
30	\| Primary Use Case \| Lightweight custom widgets, self-contained interactive UI, form controls, charts. \| Embedding existing web apps, complex SPA frameworks (React/Vue), pages requiring network access. \|
31	\| Network Access \| Strictly Blocked (`connect-src 'none'` CSP required). \| Allowed (requires allowlisting target domain(s)). \|
32	\| Hosting Requirement \| None. Inline HTML string is generated dynamically by the agent. \| Yes. Code must be hosted externally (e.g., Cloud Run, Firebase Hosting). \|
33	\| Security Boundaries \| High. Restricts cross-site scripting and external exfiltration. \| Standard sandboxed iframe boundaries. \|
34
35	---
36
37	## 3. Schema Definitions
38
39	These components are declared inside the `components` list of an A2UI `surfaceUpdate` message.
40
41	### 3.1 WebFrameSrcdoc Schema
42	```json
43	{
44	"type": "OBJECT",
45	"description": "Renders dynamic inline HTML inside a network-restricted iframe.",
46	"properties": {
47	"view_type": {
48	"type": "STRING",
49	"description": "Indicates the UI view template type (e.g., 'IssueTracker', 'UserProfile', 'AnalyticsChart').",
50	"enum": ["IssueTracker", "UserProfile", "AnalyticsChart"]
51	},
52	"height": {
53	"type": "NUMBER",
54	"description": "The desired height of the iframe panel in pixels."
55	},
56	"srcdoc": {
57	"type": "STRING",
58	"description": "The raw HTML string containing inline CSS and JavaScript."
59	}
60	},
61	"required": ["view_type", "srcdoc"]
62	}
63	```
64
65	### 3.2 WebFrameUrl Schema
66	```json
67	{
68	"type": "OBJECT",
69	"description": "Renders an external webpage via URL in a sandboxed iframe.",
70	"properties": {
71	"url": {
72	"type": "OBJECT",
73	"description": "Specifies the URL to load.",
74	"properties": {
75	"literalString": {
76	"type": "STRING",
77	"description": "The hardcoded target URL string."
78	},
79	"path": {
80	"type": "STRING",
81	"description": "JSON path to extract the URL from the data model (e.g., '/results/url')."
82	}
83	}
84	},
85	"height": {
86	"type": "NUMBER",
87	"description": "The height of the iframe in pixels."
88	}
89	},
90	"required": ["url"]
91	}
92	```
93
94	---
95
96	## 4. Implementation Guidelines
97
98	### Step 1: Secure WebFrameSrcdoc with CSP
99	For any HTML sent via `WebFrameSrcdoc`, you MUST include the following Content Security Policy (CSP) tag in the `<head>` element:
100	```html
101	<meta http-equiv="Content-Security-Policy" content="connect-src 'none'">
102	```
103	> [!IMPORTANT]
104	> Enforcement: If this exact CSP meta tag is missing, Gemini Enterprise will block rendering of the component to prevent unauthorized data exfiltration.
105
106	### Step 2: Bidirectional Communication via `postMessage`
107	To trigger conversational updates or agent tool executions from within the iframe, implement a event listener inside the HTML page that calls `window.parent.postMessage`.
108
109	#### Iframe Frontend (JavaScript):
110	```javascript
111	function sendActionToAgent(actionName, payload) {
112	window.parent.postMessage({
113	type: 'a2ui_action',
114	action: actionName,
115	data: payload
116	}, '*'); // Emit event to host window
117	}
118
119	// Example: User clicks on a location pin
120	document.getElementById('map-pin-1').addEventListener('click', () => {
121	sendActionToAgent('selectStop', { stopId: 'stop_101', customer: 'Alice Johnson' });
122	});
123	```
124
125	#### Agent Backend (Python):
126	Define a tool or A2A action handler to process user events received via the host. Ensure the agent instruction guides the LLM on handling these interactions.
127
128	### Step 3: Agent System Instructions for A2UI Lifecycle
129	To ensure the LLM coord

People who liked this also viewed

6 picks

Type