News Card Agent — dynamic UI on ASI:One

A uAgent that answers a news query with app-like cards in ASI:One instead of a wall of text: cover image, headline, source badge, and Read Full Article on each item. Tap through to a detail card, then Back to News.

Source: innovation-lab-examples / dynamic-ui-on-asi1 / news-card-agent

No payment protocol — chat + cards only. Live search via Tavily (then NewsAPI, then Hacker News). ASI1 polishes one-line subtitles when ASI_ONE_API_KEY is set.

Dynamic UI breakdown

Both screens use card_kind: "custom" element trees (section → list / hero + buttons). See custom primitives.

Step	Card	Primitives	Selection
Query results	News list	image, heading, text, badge, primary Read Full Article	{"article_id": "tv_…", "source": "news_tab"}
Tap article	Detail	Hero image, body, source link, Back to News	{"action": "back_to_news", "source": "news_tab"}

Round-trip: chat_proto.py ACKs, then parse_card_selection() — JSON for @mention, prose when the planner mediates. Articles live in ctx.storage by article_id so the detail card still works if the news API is rate-limited.

Always pair the card with a TextContent intro (ASI1 crafts the line, or a fallback). Malformed cards fall back to that text.

Preview payloads in the Card Playground.

Run the example

git clone https://github.com/fetchai/innovation-lab-examples.git
cd innovation-lab-examples/dynamic-ui-on-asi1/news-card-agent
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

AGENT_NAME=News Card Agent
AGENT_SEED_PHRASE=news-card-agent-seed
AGENT_PORT=8000
ASI_ONE_API_KEY=your-asi1-api-key
TAVILY_API_KEY=tvly-dev-your-key

python agent.py

Mailbox on 8000. Try latest tech news or bitcoin price news.

If every news key is empty, Hacker News still works (placeholder images). If the UI shows only text, check card_protocol_version: "1", JSON-stringified card_payload, nesting ≤ 8, payload ≤ 64 KB.

Related

• TripMate — carousel / review / booking cards for travel
• Interactive Cards
• Card Playground