Skip to content
Open
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
31 changes: 18 additions & 13 deletions samples/client/angular/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ These are sample implementations of A2UI in Angular.
## Prerequisites

1. [nodejs](https://nodejs.org/en)
2. [uv](https://docs.astral.sh/uv/getting-started/installation/)

NOTE: [For the rizzcharts app](../../agent/adk/rizzcharts/), you will need GoogleMap API ([How to get the API key](https://developers.google.com/maps/documentation/javascript/get-api-key)) to display Google Map custome components. Please refer to [Rizzcharts README](./projects/rizzcharts/README.md)

Expand All @@ -18,25 +19,29 @@ cp ../../agent/adk/restaurant_finder/.env.example ../../agent/adk/restaurant_fin
# Edit the .env file with your actual API key (do not commit .env)

# Start the restaurant app frontend
npm install
npm run demo:restaurant
npm install
npm run demo:restaurant
```

Here are the instructions if you want to do each step manually.
Here are the instructions if you want to do each step manually.

1. Build the shared dependencies by running `npm install && npm run build` in the `renderers/lit` directory
2. Install the dependencies: `npm install`
3. Run the relevant A2A server:
* [For the restaurant app](../../agent/adk/restaurant_finder/)
* [For the contact app](../../agent/adk/contact_lookup/)
* [For the rizzcharts app](../../agent/adk/rizzcharts/)
* [For the orchestrator app](../../agent/adk/orchestrator/)

- [For the restaurant app](../../agent/adk/restaurant_finder/)
- [For the contact app](../../agent/adk/contact_lookup/)
- [For the rizzcharts app](../../agent/adk/rizzcharts/)
- [For the orchestrator app](../../agent/adk/orchestrator/)

4. Run the relevant app:
* `npm start -- restaurant`
* `npm start -- contact`
* `npm start -- rizzcharts`
* `npm start -- orchestrator`
* `npm start -- gallery` (Client-only, no server required)

- `npm start -- restaurant`
- `npm start -- contact`
- `npm start -- rizzcharts`
- `npm start -- orchestrator`
- `npm start -- gallery` (Client-only, no server required)

5. Open http://localhost:4200/

Important: The sample code provided is for demonstration purposes and illustrates the mechanics of A2UI and the Agent-to-Agent (A2A) protocol. When building production applications, it is critical to treat any agent operating outside of your direct control as a potentially untrusted entity.
Expand All @@ -45,4 +50,4 @@ All operational data received from an external agent—including its AgentCard,

Similarly, any UI definition or data stream received must be treated as untrusted. Malicious agents could attempt to spoof legitimate interfaces to deceive users (phishing), inject malicious scripts via property values (XSS), or generate excessive layout complexity to degrade client performance (DoS). If your application supports optional embedded content (such as iframes or web views), additional care must be taken to prevent exposure to malicious external sites.

Developer Responsibility: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.
Developer Responsibility: Failure to properly validate data and strictly sandbox rendered content can introduce severe vulnerabilities. Developers are responsible for implementing appropriate security measures—such as input sanitization, Content Security Policies (CSP), strict isolation for optional embedded content, and secure credential handling—to protect their systems and users.