ui-integration

Stream agent output to React, Vue, and Svelte clients via SSE routes.

21|4|Updated Feb 19, 2026

Search Tags:#react #vue #streaming #svelte #nextjs #express #sse

Ready to run

npx skills add https://github.com/tylerjrbuell/reactive-agents-ts --skill ui-integration-tylerjrbuell

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-integration
Source: https://github.com/tylerjrbuell/reactive-agents-ts/tree/main/apps/docs/skills/ui-integration
Command: npx skills add https://github.com/tylerjrbuell/reactive-agents-ts --skill ui-integration-tylerjrbuell

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies wiring Reactive Agents into web frontends and server routes to deliver real-time, token-by-token streaming to browser UIs while avoiding common mistakes like building agents in the browser and leaking credentials.

Core Features & Use Cases

Server-Side SSE Endpoints: Examples for Next.js App Router and Express/Elysia that export AgentStream.toSSE for streaming responses.
Client Integrations: React hooks, Vue composables, and Svelte stores for token-by-token updates, one-shot requests, and cancellation.
Operational Controls: Supports density options for event detail, cancel/AbortSignal propagation, and guidelines for building agents per-request to maintain safety.

Quick Start

Create a server-side SSE API route that calls AgentStream.toSSE on agent.runStream and connect it to the React useAgentStream hook at /api/agent.

Frequently Asked Questions about ui-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I stream agent output token-by-token to a React or Vue frontend?▼

To stream agent output token-by-token, connect a server-side SSE API route using Next.js App Router or Express to client integrations like React hooks, Vue composables, or Svelte stores for real-time UI updates.

What is the best way to prevent credential leakage when building streaming chat UIs?▼

The best way to prevent credential leakage when building streaming chat UIs is to construct agents server-side per-request, exporting Server-Sent Events to the browser instead of building agents in the client.

Does this approach support cancellation and AbortSignal propagation for Svelte stores?▼

Yes, this approach supports cancellation and AbortSignal propagation for Svelte stores, allowing you to abort active streams and control event density through provided operational controls.

Can I use Elysia server routes with Vue composables for real-time agent responses?▼

Yes, you can use Elysia server routes with Vue composables for real-time agent responses by exporting Server-Sent Events from Elysia and consuming them with Vue client integrations.

Why should I not build reactive agents directly in the browser?▼

You should not build reactive agents directly in the browser because it causes credential leakage and bypasses operational controls like density options and AbortSignal propagation required for safe streaming.