agents-kit

Build chat, voice, and generative interfaces with React. Agents Kit brings messages, tools, approvals, audio controls, and generated results into one compact component library. Try the previews, copy the source, and make it yours.

Version 0.3 keeps existing v0.1 and v0.2 component paths and registry slugs available. The previous public source is preserved in the v0.1.0 tag.

Live site · Components · App examples · Voice · Playground · v0.1 archive

Installation · MCP setup · llms.txt · Full LLM reference

Voice agents are now part of the kit. Explore 37 new entries from LiveKit, ElevenLabs, and OrbKit, designed to sit alongside your chat and generative interfaces.

• Voice sessions, call controls, transcripts, and audio playback.
• Animated waveforms and four OrbKit styles: Hydrogen, Ion, Dither, and Nimbus.
• A dedicated Voice gallery to try components and copy their source.

Explore Voice · Read the v0.3 announcement

• /components presents the current component families in one continuous, searchable catalog.
• /examples shows complete voice, chat, and coding interfaces with live previews, build prompts, and installable source. The coding example also includes a basic/kit comparison.
• /voice brings together voice visualizers, session controls, transcripts, playback, and voice selection.
• /generative shows generated answers and work products in ready, loading, and error states.
• /v0.1 keeps the previous component gallery available for existing users.
• /docs explains installation, integration, provenance, and the v0.2 migration.

Start with a working interface, then make it yours. Each app example includes a prompt you can paste into your coding agent, the components it uses, and source you can install.

• Voice assistant: open the shared conversation in voice mode, type or try a sample voice turn, mute the microphone control, and attach a note.
• Research chat: open the same conversation in text mode, ask questions from local notes, and switch voice mode on when useful.
• Coding workspace: apply a patch, inspect the working file, and check whether the required changes are present.

Voice and chat are two entry points to one conversation example with shared messages, draft, attachment, and composer. Its replies are local samples; it does not capture or play microphone audio or connect to an agent backend. The coding example's basic and kit views use the same sample content. Read the setup guide.

The main catalog groups equivalent implementations into families. For example, related loading, approval, prompt, message, code, and task components appear together as source variants instead of repeated, unrelated entries.

All collections share a compact foundation based on Beautiful UI: Inter and JetBrains Mono, consistent spacing, cool neutral surfaces, hairline borders, and explicit chip/control/card/window radii. Component-specific states and interactions remain intact. The design contract and installation guide document the typography, theme, and required CSS pipeline.

Explore the Voice section or read the integration guide. Try listening, thinking, and speaking states, adjust the sample audio level, toggle controls, and inspect each source variant.

The page shows 37 entries individually: 15 LiveKit, 17 ElevenLabs, four OrbKit shaders, and one combined session. OrbKit's non-commercial shader ports are excluded.

The combined VoiceAgentSession uses real UI components from both collections. It exposes callbacks for the host application to connect a provider; its gallery preview is simulated. Provider-specific components keep their original APIs and setup requirements. No credentials are embedded in the kit.

Try an inbox, compare two options, review a document, or update a checklist. Expand a result, edit its content, compare versions, save it, or share a link from the playground.

The examples follow Fieldwork, a fictional studio planning a Lisbon–Copenhagen workshop. Names, messages, itineraries, and figures are illustrative. The harbour, studio, and botanical artwork was generated for these demos; screenshots show the actual components.

An inbox that brings the work together Updates, attachments, unread states, and the next action.	Collections worth opening Images grouped into a compact, editable result.
Recommendations with a next step See the context, review alternatives, and make a decision.	Checklists you can work through Completed steps, remaining work, and clear ownership.

AgentGenerativeSurface renders caller-supplied data for these answer types:

audio, focus, flight, location, weather, stories, inbox, note, collection, event, and activity.

The generative showcase also includes comparisons, recommendations, documents, checklists, and source briefs. Each result supports inline expansion, editing, original-versus-current comparison, saving in the demo browser, link sharing, and copying. The reusable ResultActions component exposes these actions through typed callbacks.

import { AgentGenerativeSurface } from "@/components/agents-ui/agent-generative-surface"

export function WeatherAnswer() {
  return (
    <AgentGenerativeSurface
      content={{
        type: "weather",
        location: "Madrid",
        temperature: 24,
        unit: "C",
        condition: "Light rain",
        forecast: [
          { day: "Today", temperature: 24 },
          { day: "Tomorrow", temperature: 25 },
        ],
      }}
    />
  )
}

The core components receive data through props and return user intent through callbacks. Optional LiveKit and ElevenLabs integrations use the host application’s provider configuration. The gallery makes no agent calls and requests no microphone access; your application owns credentials, permissions, capture, persistence, and network activity.

The Effects collection includes Border Beam, Gooey, Metal FX, and Image FX. Add them where motion helps explain a change. Existing components keep their compact defaults.

import { BorderBeam } from "@/components/effects/border-beam"

export function WorkingResult({ isWorking }: { isWorking: boolean }) {
  return (
    <BorderBeam active={isWorking} size="line">
      <div className="rounded-xl border p-4">Preparing your brief</div>
    </BorderBeam>
  )
}

Thinking Orb also supports 20px, 32px, and 64px sizes, with optional color and dot controls. The default remains monochrome.

The repository uses npm, React 19, Next.js 15, and Tailwind CSS 4.

npm install
npm run dev

Open the local URL reported by Next.js. Use /components for the current catalog and /voice for voice components, /generative for the composed generative UI showcase, and /v0.1 for the compatibility gallery.

Agents Kit follows the shadcn copy-source model. Registry entries include the component, its public local dependencies, required styles, package dependencies, and applicable license files. You own the copied source inside your application and can adapt it to your product.

To add a component to an existing shadcn project:

npx shadcn@latest add https://agents-ui.github.io/agents-kit/c/agent-generative-surface.json

Load the shared styles once in the application entry:

@import "./components/boardui/styles/globals.css";
@import "./styles/agents.css";

Adjust these paths relative to your global stylesheet and the installed component directory. The shared stylesheet includes Tailwind; avoid importing it twice. Registry installation copies the CSS files but does not add these imports automatically. See the installation guide for setup and aliases.

Agents Kit works with the standard shadcn MCP server. Add "@agents-kit": "https://agents-ui.github.io/agents-kit/c/{name}.json" to your application's components.json registries, then configure the server with npx -y shadcn@latest mcp from that application's working directory. Follow the MCP setup guide for client configuration.

The short LLM guide indexes the collection. The full reference includes setup, every registry entry, and TypeScript declarations generated from the shipped source. Both files regenerate during builds.

Existing components/agents-ui/agent-*.tsx entry paths and their registry slugs remain available. Version 0.2 does not automatically rename or remove those imports. The previous components move out of the main catalog because the new catalog is organized around generative UI families, but existing applications can continue using them.

New work should start with the current families and compose application-specific behavior around their controlled props and callbacks. See Migrating to v0.2 for the compatibility contract and an incremental adoption path.

npm test
npm run typecheck
npm run build:registry
npm run build
npm run verify:distribution

Examples run locally without connecting to a model or backend.

Agents Kit preserves attribution and license notices with copied or adapted source.

• LiveKit, Apache-2.0 with file-level MIT notices, supplies the voice session and media components. Its separately licensed Aura shader is excluded.
• ElevenLabs UI, MIT licensed, supplies the 17 voice UI families.
• OrbKit supplies four MIT shader orbs and their shared WebGL renderer. Non-commercial ports are excluded.
• Beautiful UI, MIT licensed, is the source for the 21 Beautiful UI families.
• beUI, MIT licensed, is the source for the public AI agent component collection.
• Libraries.dev, MIT licensed, supplies Thinking Orbs, Border Beam, Gooey, Metal FX, and Image FX.
• Vercel AI Elements, Apache-2.0 licensed, supplies the complete AI Elements collection and informed the earlier context and checkpoint controls.
• Blocks.so, MIT licensed, supplies five original AI compositions and four adapted compositions.
• BoardUI, MIT licensed, supplies the underlying controls, theme, and free AI chat components.
• Prompt Kit supplies all 21 conversational primitives and their documented examples.

The source coverage report records the catalog sweep, documented variants, and remote demo-media exceptions.

Pinned revisions, source relationships, and notices are recorded in THIRD_PARTY_NOTICES.md and in source metadata beside each adapted collection. The Agents Kit project license remains in LICENSE.md. Upstream source keeps its original license.

v0.3.0 brings LiveKit, ElevenLabs, and OrbKit to Agents Kit. See CHANGELOG.md for release details and Migrating to v0.2 for the compatibility path.

Abhishek Gahlot, [email protected]

I’m also working on useAgent, an open-source workspace for agents that work with your tools and return finished files. Follow the project at useagenthq/useagent.