AGXNDA Demo Context

Automatic Agent Actions

What to build

Create a compact interactive widget called:

AutomaticAgentActions

The widget should demonstrate one simple AI permissions concept:

Users can choose which low-risk actions an AI agent is allowed to perform automatically.

The widget should focus only on automatic actions. Do not include approval-required actions, blocked actions, risk matrices, editorial explanations or large dashboard sections.

Scenario

The product is an AI travel assistant.

The assistant helps users plan a trip by performing small low-risk tasks automatically, but only when the user enables those actions.

Required UI

Header

Title:

Automatic Actions

Subtitle:

Choose what the agent can do on its own.

Toggle rows

Create six action rows.

Each row must include:

• Action name

• Short helper text

• Toggle switch

Use this content:

[
{
"name": "Compare flights",
"helper_text": "Finds cheaper or faster options."
},
{
"name": "Shortlist hotels",
"helper_text": "Creates a ranked list of places to stay."
},
{
"name": "Suggest itinerary ideas",
"helper_text": "Adds things to do based on preferences."
},
{
"name": "Summarise trade-offs",
"helper_text": "Explains price, time and convenience."
},
{
"name": "Save draft plan",
"helper_text": "Stores a draft itinerary."
},
{
"name": "Recommend alternatives",
"helper_text": "Suggests backup options."
}
]

Interaction behaviour

The user must be able to enable or disable each action independently.

When one or more actions are enabled, show this live preview sentence:

Agent can automatically: [enabled actions].

Example:

Agent can automatically: compare flights, shortlist hotels and save draft plan.

When no actions are enabled, show:

No automatic actions enabled.

When a toggle changes, add a small activity log entry.

Example activity log entries:

Enabled: Compare flights
Disabled: Save draft plan
Enabled: Recommend alternatives

The activity log should show only the latest three entries.

Add a reset button labelled:

Reset actions

The reset button should turn all toggles off and clear the activity log.

Design requirements

Use:

React
TypeScript
Tailwind
shadcn/ui

Use these shadcn/ui components:

Card
Switch
Button
Badge

Visual style:

compact
simple
playful
toy-like
polished
monochrome

Colour system:

black
white
grey
subtle borders
soft shadows

Do not use:

bright accent colours
large dashboard layouts
charts
robot imagery
travel photography
editorial explainer panels
complex risk models
approval-required sections
blocked-action sections

Output requirements

The final result should be a small interactive widget, not a full application.

It must include:

card header
six toggle rows
live preview sentence
latest-three activity log
reset actions button
monochrome styling

The final result should feel like a quick toy demo that makes the concept of automatic agent actions immediately understandable.

Machine-readable context block

{
"agxnda_demo_context": {
"id": "automatic_agent_actions_001",
"type": "runtime_demo_context",
"concept": "AI permissions",
"demo_type": "toggle_widget",
"target_tools": ["lovable", "v0", "figma_make"],
"component_name": "AutomaticAgentActions",
"learning_objective": "Show that users can control which low-risk actions an AI agent can perform automatically.",
"scenario": {
"product": "AI travel assistant",
"action_category": "automatic_actions"
},
"ui": {
"title": "Automatic Actions",
"subtitle": "Choose what the agent can do on its own."
},
"actions": [
{
"name": "Compare flights",
"helper_text": "Finds cheaper or faster options."
},
{
"name": "Shortlist hotels",
"helper_text": "Creates a ranked list of places to stay."
},
{
"name": "Suggest itinerary ideas",
"helper_text": "Adds things to do based on preferences."
},
{
"name": "Summarise trade-offs",
"helper_text": "Explains price, time and convenience."
},
{
"name": "Save draft plan",
"helper_text": "Stores a draft itinerary."
},
{
"name": "Recommend alternatives",
"helper_text": "Suggests backup options."
}
],
"interaction_rules": {
"toggle_actions": true,
"independent_toggles": true,
"live_preview": true,
"empty_state": "No automatic actions enabled.",
"preview_template": "Agent can automatically: [enabled actions].",
"activity_log": true,
"activity_log_limit": 3,
"reset_button": true,
"reset_button_label": "Reset actions"
},
"design_rules": {
"style": "compact toy-like monochrome widget",
"colour_system": ["black", "white", "grey"],
"components": ["Card", "Switch", "Button", "Badge"],
"avoid": [
"bright accent colours",
"large dashboard layouts",
"charts",
"robot imagery",
"travel photography",
"editorial explainer panels",
"complex risk models",
"approval-required sections",
"blocked-action sections"
]
}
}
}

Short prompt for build tools

Create a compact interactive AI permissions widget using this AGXNDA context page as the source of truth.

Build the AutomaticAgentActions widget described on the context page.

Use React, TypeScript, Tailwind and shadcn/ui.

Keep it compact, toy-like, polished and monochrome.