Add useAgUi hook for AG-UI protocol integration by amcdnl · Pull Request #83 · reaviz/reachat

amcdnl · 2026-02-11T12:44:42Z

PR Checklist

Tests for the changes have been added (for bug fixes / features)
Docs have been added / updated (for bug fixes / features)

PR Type

[x] Feature
[ ] Bugfix
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Reachat did not have built-in support for connecting to AG-UI protocol-compatible agent endpoints. Users had to implement their own SSE parsing, session management, and state handling.

What is the new behavior?

This PR introduces useAgUi, a React hook that provides complete AG-UI protocol integration with zero external dependencies. The hook:

Connects to any AG-UI endpoint via HTTP POST with SSE streaming response
Manages sessions and conversations automatically, including auto-creation of sessions on first message
Handles SSE parsing natively using the Fetch API (no RxJS or @ag-ui/client required)
Streams text responses token-by-token with real-time UI updates
Supports tool calls with the onToolCall callback for custom tool implementations
Provides context and forwarded props for agent customization
Includes error handling and cancellation via AbortController
Exports all AG-UI types for full TypeScript support

The hook returns all props needed for the <Chat> component, making integration as simple as:

const agui = useAgUi({ agent: 'https://my-agent.example.com/run' });
<Chat {...agui} />

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Files added:

src/useAgUi/useAgUi.ts - Main hook implementation with SSE parsing, session management, and event handling
src/useAgUi/types.ts - Self-contained AG-UI protocol type definitions (no external dependencies)
src/useAgUi/index.ts - Public exports
src/useAgUi/README.md - Comprehensive documentation with examples
stories/AgUi.stories.tsx - Storybook demos (basic and with tool calls)

Files modified:

src/index.ts - Added exports for useAgUi and related types

Key features:

Native SSE parsing with Fetch API
Automatic session and conversation management
Real-time streaming text updates
Tool call handling with custom callbacks
Context and forwarded props support
Full TypeScript support with exported types
Comprehensive error handling and request cancellation
No external dependencies beyond React

https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

Copilot

Pull request overview

Adds first-party AG-UI protocol support to the library via a new useAgUi React hook, enabling <Chat> to connect to AG-UI-compatible agent endpoints over SSE without external AG-UI client dependencies.

Changes:

Introduces useAgUi hook with session management, SSE parsing, streaming response updates, and tool-call callbacks.
Adds self-contained AG-UI protocol TypeScript types + public exports.
Adds documentation and Storybook demos for basic usage and tool calls.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
stories/AgUi.stories.tsx	Adds Storybook demos showing `useAgUi` integration with `<Chat>` and tool calls.
src/useAgUi/useAgUi.ts	Implements the hook: session state, POST-to-agent run calls, SSE parsing, streaming updates, tool call handling.
src/useAgUi/types.ts	Defines AG-UI event/message/tool/input types and event type enum.
src/useAgUi/index.ts	Re-exports the hook and AG-UI types for public consumption.
src/useAgUi/README.md	Adds end-user docs and examples for integrating AG-UI endpoints.
src/index.ts	Exposes `useAgUi` module from the package root.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

cloudflare-workers-and-pages · 2026-02-11T22:02:39Z

Deploying reachat-storybook with Cloudflare Pages

Latest commit:	`7353b25`
Status:	✅ Deploy successful!
Preview URL:	https://8aebd563.reachat-storybook.pages.dev
Branch Preview URL:	https://claude-ag-ui-protocol-adapte.reachat-storybook.pages.dev

View logs

Add a React hook that connects to any AG-UI protocol compatible agent endpoint and returns all the props needed for the reachat <Chat> component. - Implements SSE streaming parser for AG-UI events - Handles text message streaming (TEXT_MESSAGE_CONTENT/CHUNK) - Supports tool calls with onToolCall callback - Manages sessions/conversations state internally - Provides session CRUD (create, select, delete) - Supports abort/cancel via stopMessage - Zero external dependencies (no @ag-ui/client or RxJS needed) - Includes Storybook stories demonstrating usage https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

- Fix session timestamp: updateConversationInSession now updates the parent session's updatedAt during streaming - Complete AG-UI event types: add missing interfaces and union members for STATE_SNAPSHOT, STATE_DELTA, TOOL_CALL_CHUNK, and RAW events - Fix SSE parser buffer loss: process remaining buffer after stream ends so the last event isn't dropped if stream lacks a trailing newline - Align activeSessionId type: use string | undefined to match Chat component's prop type instead of string | null - Use AgUiRole type: role fields on text message events now use the AgUiRole union type instead of bare string - Add unmount cleanup: useEffect abort on unmount prevents state updates on unmounted components and stops background network requests - Surface parse failures: malformed SSE JSON is now reported via onError instead of being silently swallowed https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

RichTextInput.tsx imports directly from @floating-ui/dom, but it was only available as a transitive dependency of @floating-ui/react. The rollup-plugin-peer-deps-external plugin externalizes all dependencies, so Rollup couldn't resolve the bare @floating-ui/dom import. Adding it as a direct dependency fixes the build. https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

Use absolute positioning with dark:bg-gray-950 wrapper to match the layout pattern used by all other Console stories. The previous height: 80vh approach didn't work with Storybook's centered layout mode. https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

Apply flex: 1 + minHeight: 0 directly on the Chat component via its style prop and add overflow: hidden on the outer container. Removes the intermediate wrapper div so the Chat's h-full theme class resolves against the flex parent correctly, preventing the input bar from overflowing past the bottom edge. https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

ebassity · 2026-02-12T07:03:13Z

@amcdnl - i rebased with master so that PR #79 from this morning wasn't lost. there was a pnpm lock file checked in alongside the package-lock so i removed it. also made a few changes - look at my commit, but here's a summary:

fixed onToolCall type signature to match actual behavior (void, not string - it's awaited, so the stream pauses until the callback resolves, which is great, but the resolved value is never assigned to anything)
exported pure helpers for testability and add unit tests for SSE parser, session state helpers, and message conversion
deduplicated AG-UI story layout into shared AgUiStory wrapper
removed pnpm-lock.yaml (project uses npm)

Copilot AI review requested due to automatic review settings February 11, 2026 12:44

amcdnl self-assigned this Feb 11, 2026

Copilot started reviewing on behalf of amcdnl February 11, 2026 12:45 View session

Copilot AI reviewed Feb 11, 2026

View reviewed changes

amcdnl requested a review from ebassity February 11, 2026 22:53

claude and others added 8 commits February 11, 2026 23:36

chore: add pnpm-lock.yaml

f1210a8

https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

docs: add README for useAgUi hook

8799022

https://claude.ai/code/session_015b5wa5VYLPgMqspBpffpSj

fix: clean up useAgUi hook and add tests

c1e26ac

ebassity force-pushed the claude/ag-ui-protocol-adapter-5PfnE branch from bf2b6d8 to c1e26ac Compare February 12, 2026 06:40

ebassity added 2 commits February 11, 2026 23:47

update lock file

3b705be

add test for parseSSE generator

7353b25

ebassity approved these changes Feb 12, 2026

View reviewed changes

amcdnl merged commit 3b1ad32 into master Feb 12, 2026
2 checks passed

amcdnl deleted the claude/ag-ui-protocol-adapter-5PfnE branch February 12, 2026 12:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add useAgUi hook for AG-UI protocol integration#83

Add useAgUi hook for AG-UI protocol integration#83
amcdnl merged 10 commits intomasterfrom
claude/ag-ui-protocol-adapter-5PfnE

amcdnl commented Feb 11, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cloudflare-workers-and-pages Bot commented Feb 11, 2026 •

edited

Loading

Uh oh!

ebassity commented Feb 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

amcdnl commented Feb 11, 2026

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cloudflare-workers-and-pages Bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying reachat-storybook with Cloudflare Pages

Uh oh!

ebassity commented Feb 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cloudflare-workers-and-pages Bot commented Feb 11, 2026 •

edited

Loading