Use this SDK to add realtime, multi-modal, agentic experiences to your React app. By connecting to LiveKit Cloud or a self-hosted server, you can quickly build agentic experiences with just a few lines of code.
Agents UI is a set of open source Shadcn components for building voice-first agents using LiveKit.
You can find more information in the Agents UI API references and in the Agents UI README.
Before installing Agents UI, make sure your environment meets the following requirements:
Note
Running any install command will automatically install shadcn/ui for you. Agents UI is built targeting React 19 (no forwardRef usage) and Tailwind CSS 4.
First add the Agents UI registry to your components.json file:
{
...
"registries": {
...
"@agents-ui": "https://livekit.io/ui/r/{name}.json"
}
}Then install the component you want to use from the CLI. Ensure you've navigated to the root of your project.
pnpm dlx shadcn@latest add @agents-ui/agent-session-provider @agents-ui/agent-control-bar @agents-ui/agent-chat-transcript @agents-ui/agent-audio-visualizer-barNext, you need a running agent. If you don't already have one, it only takes a few minutes to set one up.
The rest of this guide assumes your agent is configured for explicit dispatch with agent_name="example-agent".
Then, you can use the agents sdk to connect and interact with your agent:
'use client';
import { TokenSource } from 'livekit-client';
import { VideoTrack, useAgent, useSession, useSessionContext } from '@livekit/components-react';
import { AgentSessionProvider } from '@/components/agents-ui/agent-session-provider';
import { AgentControlBar } from '@/components/agents-ui/agent-control-bar';
import { AgentChatTranscript } from '@/components/agents-ui/agent-chat-transcript';
import { AgentAudioVisualizerBar } from '@/components/agents-ui/agent-audio-visualizer-bar';
import { StartAudioButton } from '@/components/agents-ui/start-audio-button';
// Generated credentials manually and put them here
// Or, generate them another way: https://github.com/livekit/client-sdk-js?tab=readme-ov-file#generating-a-urltoken-with-tokensource
const tokenSource = TokenSource.literal({
serverUrl: 'wss://my-livekit-server',
participantToken: 'generated-jwt',
});
function AgentUI() {
const session = useSessionContext();
const agent = useAgent(session);
return (
<div className="flex flex-col gap-4 p-4">
{/* Chat transcript */}
<AgentChatTranscript />
{/* Local camera feed: */}
{session.local.cameraTrack ? <VideoTrack trackRef={session.local.cameraTrack} /> : null}
{/* Agent camera feed */}
{agent.cameraTrack ? (
<VideoTrack trackRef={agent.cameraTrack} />
) : (
<AgentAudioVisualizerBar />
)}
{/* Agent control bar for local audio */}
<AgentControlBar variant="livekit" isConnected={session.isConnected} />
{/* Renders a start audio button if the browser blocks autoplay of audio */}
<StartAudioButton label="Start audio" />
</div>
);
}
export default function Example() {
const session = useSession(tokenSource, {
agentName: 'example-agent' /* <== Put your agent name here! */,
});
const toggleStarted = () => {
if (session.connectionState === 'disconnected') {
session.start();
} else {
session.end();
}
};
return (
<AgentSessionProvider session={session}>
{session.isConnected ? (
<AgentUI />
) : (
<button onClick={toggleStarted} disabled={session.connectionState === 'connecting'}>
Connect
</button>
)}
</AgentSessionProvider>
);
}For more information checkout the
Check out our fully featured voice agent, quick start application built with React and LiveKit Components. The full implementation is available in the livekit-examples/agent-starter-react repo. Give it a test drive by creating a sandbox voice agent in LiveKit Cloud.
We also have a fully featured video conferencing application built on top of LiveKit Components. Start a video conference at meet.livekit.io and take a look at the implementation in the livekit-examples/meet repo.
If you are interested in contributing to the project or running the examples that are part of this mono-repository, then you must first set up your development environment.
This repo consists of multiple packages that partly build on top of each other. It relies on pnpm workspaces and Turborepo (which gets installed automatically).
Clone the repo and run pnpm install the root level:
pnpm installIn order to link up initial dependencies and check whether everything has installed correctly run
pnpm buildThis will build all the packages in /packages and the examples in /examples once.
After that you can use a more granular command to only rebuild the packages you are working on. E.g. to test and automatically rebuild package dependencies for the nextjs example, run:
pnpm dev:nextNote For the examples to work you'll need to make sure to copy the the contents of .env.example in the specific example folder to a newly created .env.local file and adjust the values accordingly to your livekit server setup.