ui-integration

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

21|4|Updated Feb 19, 2026
One-click install
npx skills add https://github.com/tylerjrbuell/reactive-agents-ts --skill ui-integration-tylerjrbuell
Or copy as Structured Prompt for Agent
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.