Introducing useAgent: One Hook to Stream Durable AI Workflows to the Frontend

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:

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 for guides, examples, and more.