Agents Kit

App examples

Start with a complete app.

Voice, chat, and coding interfaces built with the kit. Try the workflow, then copy a prompt to build your own.

Voice and chat

Talk and type in the same conversation, with one composer and shared context.

Loading app preview…
  1. 1.Try a sample voice turn
  2. 2.Type a follow-up
  3. 3.Exit voice and keep the conversation

Build this app

Paste this prompt into your coding agent to start from the working source.

Read the build prompt
Build a voice and chat using Agents Kit.

Read the installation guide and API reference first:
https://agents-ui.github.io/agents-kit/docs/installation
https://agents-ui.github.io/agents-kit/llms.txt

Install the working UI starter into the existing React project:
npx shadcn@latest add https://agents-ui.github.io/agents-kit/c/example-voice-app.json

Start from components/examples/voice-app.tsx, which exports VoiceAppExample. Mount it with its default props. Read its imported components and use their actual props; do not invent APIs or rebuild components that are already included.

Product flow:
Build one conversation with typing and voice modes. Reuse ConversationAppExample and its actual Prompt Kit, LiveKit, and OrbKit imports. Keep one mounted composer, draft, source note, and message history across mode changes. Keep the transcript visible while voice is active. Microphone mute, response cancellation, and source attachment must update shared state. The demo uses extractive sample replies and does not record or play audio; connect a real provider before enabling live voice.

Keep the project's routes, authentication, data, and state boundaries. Adapt one screen at a time. Use the installed shared styles, Inter and JetBrains Mono, compact typography, consistent spacing, visible input borders, and contextual icons. Test both themes and a 390px layout. Preserve focus states and reduced-motion behavior.

The starter uses local sample data. Keep it clearly labelled until connected. Replace its demo handlers with the application's real agent or provider; keep secrets on the server and request microphone access only after an explicit user action. Do not claim a simulated action completed real work.

Verify the primary actions, loading, empty, stopped, and error states. Run the project's checks and inspect the rendered app. Summarize which components you used and which integrations still need configuration.
View app source Installable starterSetup guide