learn-a2a-deepdive

A2A Demo Visualizer - React SPA

An interactive React Single-Page Application that visualizes the A2A Protocol Supply Chain Demo workflow.

Prerequisites

• Node.js 16+ (recommended: Node.js 18 LTS or later)
• npm (comes with Node.js)

Setup

1. Navigate to the SPA directory:

   cd spa
   

2. Install dependencies:

   npm install
   

Running the Application

Start the development server:

npm start

The application will open automatically at http://localhost:3000.

Features

• Interactive Workflow Visualization: See how agents communicate in the A2A Protocol
• Step-by-Step Animation: Watch the 8-step workflow unfold with 2-second intervals
• Agent Nodes: Visual representation of Client, Coordinator, Data Analysis, and Report Generation agents
• Connection Lines: Dynamic arrows showing message flow between agents
• Real-time Status: Messages indicating current workflow step

Workflow Steps Visualized

1. Client sends request to Coordinator
2. Coordinator discovers agents
3. Coordinator delegates to Data Analysis
4. Data Analysis streams progress
5. Data Analysis sends results back
6. Coordinator delegates to Report Generation
7. Report Generation sends reports back
8. Coordinator returns results to Client

Project Structure

spa/
├── public/
│   └── index.html          # HTML entry point
├── src/
│   ├── index.js            # React bootstrap
│   ├── index.css           # Global styles
│   ├── App.js              # Main application component
│   ├── App.css             # App-specific styles
│   └── components/
│       ├── AgentNode.js    # Agent visualization component
│       ├── AgentNode.css
│       ├── ConnectionLine.js  # Connection line component
│       ├── ConnectionLine.css
│       ├── WorkflowAnimation.js  # Step message overlay
│       └── WorkflowAnimation.css
├── package.json            # Dependencies and scripts
└── README.md               # This file

Available Scripts

• npm start - Runs the app in development mode
• npm run build - Builds the app for production
• npm test - Runs the test suite

Connecting to Backend Agents

This visualizer currently runs a simulated demo. To connect to the actual A2A Supply Chain Demo backend agents:

1. Start the backend agents (see main project README)
2. The SPA can be enhanced to make real API calls to:
   • Coordinator Agent: http://localhost:8000
   • Data Analysis Agent: http://localhost:8001
   • Report Generation Agent: http://localhost:8002

Technologies

• React 18
• Create React App (react-scripts)
• CSS3 with animations