---
title: "Introducing useAgent: One Hook to Stream Durable AI Workflows to the Frontend"
description: "Multi-agent setups are hard to build. So we built useAgent: a one-line code for streaming real-time, multi-step backend workflows to the frontend."
date: 2025-09-24
author: ["Tony Holdstock-Brown"]
url: https://www.inngest.com/blog/agentkit-useagent-realtime-hook
---

*TLDR: Multi-agent setups are hard to build. So we built useAgent: a one-line code for streaming real-time, multi-step backend workflows to the frontend.*

Building multi-step, multi-agent systems means you have to solve 3 hard problems: **durable workflows** that survive failures, **observability** to quickly debug complex agentic behavior, and **streaming real-time experiences** that don't require you to babysit infrastructure.

Historically, you've had 3 options:

### Option 1: **Roll It All Yourself**

(Spoiler: You'll burn a sprint before you even start defining agent behavior):

1. Build retry logic and state persistence for workflow durability
2. Create custom observability tooling for debugging multi-step AI flows
3. Implement real-time streaming with connection handling and buffering
4. Deploy and scale infrastructure for all three systems

### Option 2: **Use a General Agent Framework (LangGraph or Vercel AI SDK)**

LangGraph can orchestrate AI workflows, but has three gaps for production UIs:
**Limited Durability:**

- LangGraph's version of durable execution is just checkpointing—you'd still need to implement persistence and retries yourself.

**Complex Streaming:**

- useStream requires you to set up a LangGraph server separately from your Next.js app
- Limited to streaming LangGraph execution updates

**No Built-In Observability or Recovery:**

- Requires separate LangSmith subscription for tracing and debugging
- No built-in observability or recovery tools

You could also use Vercel's AI SDK, which handles basic streaming, but offers no durable execution or multi-agent orchestration, and has no built-in observability for debugging.

### Option 3: **Mash Together Other SDKs**

Combine LangGraph + LangSmith + custom streaming + custom insights + React state management across multiple vendors for weeks of setup work and delayed time to action.

The TLDR is that teams need a way to get durable, observable AI workflows into their UI quickly, without turning into infrastructure engineers.

## Meet `useAgent`: Complete Agent UI Infrastructure in One Hook

`useAgent` is the React hook that finally closes this gap, enabling developers to stream realtime experiences from the durable, backend AI workflows they create with AgentKit.

With a single hook and provider, you get:

- **Parts-Based Streaming:** Responses stream as composable parts—text, tools, data visualizations, and reasoning steps—each updating independently in real-time.
- **Out of the Box Durability:** Built on Inngest's infrastructure with automatic retries and fault tolerance. Refresh mid-execution and resume exactly where you left off—no manual checkpointing required.
- **Built-in Observability:** Full visibility into agent execution with traces, metrics, and debugging tools. Query your agent data with Insights (launched today) to understand performance and user interactions.

### **One Hook, Zero Infrastructure**

No WebSocket management, no state stores, no connection handling. Just `useAgent()` and you're done.

Here's what it looks like in React:

```tsx
import { useAgent } from "@inngest/use-agent";

export function MyAgentUI() {
  const { messages, sendMessage, status } = useAgent();

  const onSubmit = (e) => {
    e.preventDefault();
    const value = new FormData(e.currentTarget).get("input");
    sendMessage(value);
  };

  return (
    <div>
      <ul>
        {messages.map(({ id, role, parts }) => (
          <li key={id}>
            <div>{role}</div>
            {parts.map(({ id, type, content }) =>
              type === "text" ? <div key={id}>{content}</div> : null
            )}
          </li>
        ))}
      </ul>

      <form onSubmit={onSubmit}>
        <input name="input" />
        <button type="submit" disabled={status !== "ready"}>Send</button>
      </form>
    </div>
  );
}
```

## Why Now

Every product team is racing to add AI-powered, agent-like workflows. Users expect them to feel as polished as ChatGPT. That means:

- Real-time streaming
- Visible intermediate reasoning
- Smooth UX for retries, cancellations, and human approval

Until now, teams had to reinvent this wheel every time. `useAgent` makes it one line of code.

## Get Started

- **Install the package:** `npm install @inngest/use-agent`
- **Wrap your UI:** with `<AgentProvider>` and `useAgent()`
- **See your first streaming agent:** in minutes, not days

Check out the [docs](https://agentkit.inngest.com/streaming/overview?ref=blog-agentkit-use-agent) for guides, examples, and more.