HeroUIAgents
Documentation

HeroUI Agents · Invite-only beta

Turn every product intoan AI-native experience.

Give your users a faster way to work with HeroUI Agents. It understands your product, takes action, and creates interfaces dynamically using Generative UI.

Banking example. Asked: Chart our balance over the last 6 months. The agent answers: The operating balance is up 44% since March, with the strongest gain after July.

How HeroUI Agents works

Add an AI agent to your product.No agent backend required.

Drop in one component and connect the typed tools you already have. HeroUI runs the models, streaming, persistence, and usage.

  1. Your appagent.tsx

    <HeroUIAgent

    tools={productTools}

    context={currentUser}

    />

    DataActionsPermissions
    1

    Connect your tools

    Expose only the data, actions, and permissions the agent should use.

  2. HeroUI Agents

    Cancel order #1842

    Looked up the order
    Approval required
    2

    Users ask. The agent acts.

    It reads context, calls typed tools, and pauses before sensitive changes.

  3. Interactive resultReady

    Order #1842

    Cancellation is available

    Refund

    $84.00

    Returns to original cardApprove

    Charts · Tables · Forms · Maps

    3

    Return real interfaces

    Every response is schema-validated UI that belongs inside your product.

The whole integration

import {HeroUIAgent} from "@heroui/agent";
import "@heroui/agent/css";

<HeroUIAgent
  agentId={process.env.NEXT_PUBLIC_HEROUI_AGENT_ID!}
  getAuthToken={getAuthToken}
  tools={tools}
  context={context}
/>

What you get

Not another chatbot.An interface that takes action.

  • Answer
    Revenue$82,000+95.2%
    ChartsTablesMapsForms

    Generative UI, not walls of text

    Every answer is schema-validated UI: charts, metrics, tables, maps, forms, and composed views.

  • Tools
    listOrdersread
    updateAddresswrite
    refundOrderapproval
    Refund $84.00?AllowDeny

    Your tools, your permissions

    Typed client tools run with the signed-in user's own permissions, and sensitive ones wait for an explicit Allow.

  • HeroUI runsManaged
    Model orchestration
    Streaming and retries
    Conversation persistence
    Usage and monitoring
    No LLM API keyKeys stay yours

    Hosted, so there is no agent backend

    No token endpoint, no provider key, no server route, no model setup. Add the component and ship.

  • Appearance
    Radius
    Accent
    FloatingSidebar

    Themed to match your product

    Floating or sidebar, light or dark, your radius, accent, and typography. It should look like you built it.

Use cases

One component.Any product.

The agent only knows what your typed tools expose, so the same component adapts to whatever your product does.

  • Analytics

    Chart revenue over the last 6 months

    Streams a chart with the key metrics, computed from your data tools.

    ChartMetrics

  • E-commerce

    Where is my order?

    Returns an order card with delivery status and next actions.

    Record cardTimeline

  • Customer support

    Cancel my subscription

    Runs the action behind an Allow / Deny approval card.

    ApprovalForm

  • Finance

    How is my portfolio doing today?

    Builds metric grids and comparisons from live positions.

    Metric gridComparison

  • Travel

    Find hotels near the venue

    Answers with maps, record cards, and follow-up suggestions.

    MapRecord card

  • Internal tools

    Which accounts are at risk this quarter?

    Generates sortable tables and timelines from your existing APIs.

    TableFollow-ups

FAQ

What to know

before you request access

Invite-only beta

Help shape the agent

your product needs.

We are onboarding a small group of product teams while we refine the hosted beta.