Watch AI agents communicate in real-time with mesmerizing particle animations
Relay Pulse visualizes conversations between AI agents as glowing particles flowing through a network. See the invisible made visible — every message, every interaction, every moment of agent collaboration.
When AI agents collaborate using the Agent Relay Protocol, they exchange hundreds or thousands of messages. Relay Pulse transforms these message logs into an animated visualization where:
- Agents appear as colored nodes arranged in a circle
- Messages travel as glowing particles between nodes
- Conversations come alive as you watch the flow of communication
It's like watching a neural network fire in slow motion.
- Debug agent interactions - See which agents are talking and when
- Understand communication patterns - Spot bottlenecks, central coordinators, or isolated agents
- Demo agent systems - Show stakeholders how your agents collaborate
- Learn from transcripts - Replay past conversations to understand agent behavior
- It looks cool - Sometimes that's reason enough
# Clone the repo
git clone https://github.com/AgentWorkforce/relay-pulse.git
cd relay-pulse
# Install dependencies
npm install
# Run with default sample data
npm run dev
# Or specify your own JSONL file
npm run dev -- --messages=/path/to/messages.jsonl| Feature | Description |
|---|---|
| Particle Animation | Messages flow as glowing particles with trailing effects |
| Live Message Feed | Sidebar shows message content in real-time |
| Pause on Hover | Hover over the feed to pause and read |
| Click to Expand | Click any message to see full content |
| Speed Control | 0.5x to 4x playback speed |
| Auto Detection | Automatically extracts agents from message data |
| Color Coding | Each agent gets a consistent unique color |
Agent Relay is a protocol for AI agent-to-agent communication. When agents communicate via Relay, messages are persisted in JSONL format at:
~/.agent-relay/messages/YYYY-MM-DD.jsonl
Relay Pulse reads these message logs and animates them. It's the "instant replay" for your agent swarms.
┌─────────────────────────────────────────────────────────┐
│ Agent Relay │
│ ┌─────────┐ messages ┌─────────┐ │
│ │ Agent A │ ──────────────▶│ Agent B │ │
│ └─────────┘ └─────────┘ │
│ │ │ │
│ └──────────┬───────────────┘ │
│ ▼ │
│ ~/.agent-relay/messages/ │
│ 2024-01-30.jsonl │
└─────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────┐
│ Relay Pulse │
│ │
│ npm run dev -- --messages=path/to/messages.jsonl │
│ │
│ ◉ ─── ✦ ───▶ ◉ │
│ ╱ ╲ │
│ ◉ ◀─── ✦ ─────── ◉ │
│ │
│ Animated visualization │
└─────────────────────────────────────────────────────────┘
Relay Pulse expects JSONL files in the Agent Relay Protocol format:
{"type":"message","message":{"id":"abc123","ts":1234567890,"from":"AgentA","to":"AgentB","kind":"message","body":"Hello!","status":"read","is_urgent":false,"is_broadcast":false}}Required fields:
| Field | Description |
|---|---|
type |
"message" or "status" |
message.id |
Unique message identifier |
message.ts |
Unix timestamp (milliseconds) |
message.from |
Sender agent name |
message.to |
Recipient (agent name or channel like #general) |
message.body |
Message content |
message.kind |
Type: "message", "state", etc. |
# Visualize today's relay conversation
npm run dev -- --messages=~/.agent-relay/messages/$(date +%Y-%m-%d).jsonl
# Visualize a specific conversation
npm run dev -- --messages=/path/to/my-agent-experiment/messages.jsonl
# Use the included sample data
npm run dev- Parser reads the JSONL file and extracts message objects
- Agent Detection identifies unique agents from
fromandtofields - Layout Engine positions agents in a circle on the canvas
- Animation Loop spawns particles for each message at configurable speed
- Particle Physics moves particles along paths with glowing trail effects
- Message Feed displays recent messages in a pauseable sidebar
- Framework: SvelteKit 2 + Svelte 5
- Styling: Tailwind CSS 4
- Animation: HTML5 Canvas + requestAnimationFrame
- Build: Vite 6
- Language: TypeScript
npm install # Install dependencies
npm run dev # Start dev server
npm run check # Type check
npm run build # Build for production
npm run preview # Preview production buildThe AnimatedFlow component accepts these props:
<AnimatedFlow
messages={messages} // Array of Message objects
animationSpeed={1} // Playback speed multiplier (0.25 - 4)
particleSize={6} // Size of message particles in pixels
showLabels={true} // Show agent name labels below nodes
isPaused={false} // Pause/resume animation (bindable)
/>- Export as video/GIF
- Timeline scrubbing
- Filter by agent or channel
- Search messages
- Custom color themes
- WebSocket support for live streaming
MIT
- Agent Relay Protocol - The underlying communication protocol
- Agent Workforce - The ecosystem this belongs to
Built with Svelte, animated with Canvas, powered by curiosity ⚡