Installation

Add the files with the shadcn CLI, or copy one folder by hand.

1.Add the files

With the shadcn registry (recommended)

You need a components.json in your project. Run npx shadcn@latest init if you don't have one. Then add the component:

npx shadcn@latest add https://ui.helloelise.app/r/agui-loading.json

Or add it straight from the GitHub repo:

npx shadcn@latest add mrpotatodip/ts-elise-oss/agui-loading

To use the short @elise name, add the registry to your components.json:

{
  "registries": {
    "@elise": "https://ui.helloelise.app/r/{name}.json"
  }
}

npx shadcn@latest add @elise/agui-loading

The files go to agui-loading/ in your components folder, usually src/components/agui-loading/. The CLI also installs @ag-ui/core, motion, clsx and tailwind-merge.

By hand

Copy src/core/agui-loading/ from the repo to any place in your project. All imports inside it are relative, so you don't need a path alias. Then install the packages:

pnpm add @ag-ui/core motion clsx tailwind-merge

You also need React 19.

2.Set up Tailwind CSS v4

The components use Tailwind classes for their layout, the spinner, and the text for screen readers. Without Tailwind v4, the text shows two times and the spinner doesn't show.

3.Use it

Keep the agent state with the reducer, and pass it to the component. This example imports from where the shadcn CLI puts the folder. If you copied it by hand, change the import paths to match.

import { useReducer } from "react";
import { aguiLoadingReducer, initialAGUILoadingState } from "@/components/agui-loading";
import {
  AGUILoading,
  AGUILoadingIcon,
  AGUILoadingText,
} from "@/components/agui-loading/adapters/react";

export function AgentStatus() {
  const [state, dispatch] = useReducer(aguiLoadingReducer, initialAGUILoadingState);

  // Call dispatch(event) for each AG-UI event your agent sends.

  return (
    <AGUILoading active={state.status === "running"} eventType={state.lastEventType}>
      <AGUILoadingIcon />
      <AGUILoadingText />
    </AGUILoading>
  );
}