AG-UI Agent — Interactive Demo

How it works

Architecture

A React frontend posts to a Spring Boot backend which streams AG-UI events back via Server-Sent Events.

React + Vite

localhost:5173

POST /agent
SSE stream

Spring Boot

localhost:8000

OpenAI SDK
streaming

GPT-4.1

OpenAI API

🎨 Frontend

React + TypeScript + Vite. A custom useAgentStream hook reads the SSE response body and dispatches AG-UI events to update state token-by-token. Voice input via the Web Speech API.

⚙️ Backend

Spring Boot + Java 21 with Project Reactor. The agent runs on Schedulers.boundedElastic() inside a Flux.create(), emitting AG-UI events as JSON strings over a text/event-stream response.

🎫 Ticket Agent

Makes two GPT-4.1 calls. The first streams reasoning + tool args for create_ticket. The second streams a summary. Ticket fields appear live as the model writes them.

⏱️ Background Mode

If a run is still going at 10 seconds the UI switches to background mode — the stream panel hides, a live elapsed timer ticks, and a toast + browser push notification fire when the ticket is ready.

Interactive preview

See the agent in action

Press Play to simulate the live event stream and background mode.

🎫

Ticket Agent

Turns natural language into a structured ticket — with background mode for slow requests

AG-UI Event Stream

RUN_STARTED

TEXT_MESSAGE_CONTENT "This is a high-priority bug…"

TOOL_CALL_START create_ticket

TOOL_CALL_ARGS {"type":"bug","priority":"high"…

TOOL_CALL_ARGS "title":"Login button broken on Safari…"

STATE_SNAPSHOT tickets: [TKT-3F2A1B4C]

TEXT_MESSAGE_CONTENT "Ticket TKT-3F2A1B4C created."

RUN_FINISHED

Background Mode (slow request)

Working in background — feel free to step away 0s

✓ Ticket ready — scroll down to view it. ×

🔔

Ticket ready

Your ticket has been created. Click to view it.

Protocol reference

AG-UI Event Types

Every event is a JSON object streamed over Server-Sent Events.

RUN_STARTEDEmitted once at the start. Carries thread_id and run_id.

TEXT_MESSAGE_STARTMarks the beginning of a new assistant message. Carries a unique message_id.

TEXT_MESSAGE_CONTENTOne token of streamed assistant text. Carries message_id and delta.

TEXT_MESSAGE_ENDCloses the current assistant message.

TOOL_CALL_STARTThe model has decided to call a tool. Carries tool_call_id and tool_call_name.

TOOL_CALL_ARGSA fragment of the tool's JSON arguments, streamed character by character. Carries delta.

TOOL_CALL_ENDThe tool call arguments are complete.

STATE_SNAPSHOTFull current state pushed to the client. Contains the complete tickets array.

RUN_FINISHEDStream is complete. UI unlocks the form and fires toast/notification if backgrounded.

RUN_ERRORSomething went wrong. Carries a message field.

Features

What's included

🎙️

Voice Input

Speak your issue into the mic button. The Web Speech API transcribes it live into the textarea.

⚡

Token Streaming

Every token from GPT-4.1 is pushed immediately — reasoning text, tool args, and summaries all appear character by character.

🔧

Live Tool Calls

Watch the ticket fields (title, description, priority, labels) build up in real time as the model writes the JSON arguments.

⏱️

Background Mode

Runs taking more than 10 seconds switch to background — the stream hides, a live elapsed timer ticks, and the user is free to step away.

🔔

Push Notifications

When a background run completes, a browser push notification fires even if the tab is hidden — plus an in-app dismissible toast banner.

Cancel Anytime

A Cancel button appears the moment the agent starts, aborting the SSE connection immediately so the user stays in control.

Setup

Quick Start

You need Java 21+, Maven 3.9+, Node 18+, and an OpenAI API key.

STEP 1 — CREDENTIALS

Add your OpenAI key

# copy the template
cp backend/.env.example \
   backend/.dev.properties

# then edit the file:
OPENAI_API_KEY=sk-...
OPENAI_ORG_ID=org-...

STEP 2 — BACKEND

Start the Spring Boot server

cd backend
mvn spring-boot:run

# Starts on http://localhost:8000

STEP 3 — FRONTEND

Start the Vite dev server

cd frontend
npm install
npm run dev

# Opens http://localhost:5173

STEP 4 — USE IT

Try the agent

Open http://localhost:5173 in Chrome or Edge. Describe any bug — use the 🎙️ mic or type. To test background mode, include the word "print" in your description.

AI Ticket Agent.Fully Streaming.