The Agent Playground is designed for quickly prototyping with server side agents built with LiveKit Agents Framework. Easily tap into LiveKit WebRTC sessions and process or generate audio, video, and data streams. The playground includes components to fully interact with any LiveKit agent, through video, audio and chat.

Docs for how to get started with LiveKit agents at https://docs.livekit.io/agents

The repo containing the (server side) agent implementations (including example agents): https://github.com/livekit/agents

You can try out the agents playground at https://livekit-agent-playground.vercel.app. This will connect you to our example agent, KITT, which is based off of the minimal-assistant.

1. Install dependencies

  npm install

2. Copy and rename the .env.example file to .env.local and fill in the necessary environment variables.

LIVEKIT_API_KEY=<your API KEY>
LIVEKIT_API_SECRET=<Your API Secret>
NEXT_PUBLIC_LIVEKIT_URL=wss://<Your Cloud URL>

3. Run the development server:

  npm run dev

4. Open http://localhost:3000 with your browser to see the result.
5. If you haven't done so yet, start your agent (with the same project variables as in step 2.)
6. Connect to a room and see your agent connecting to the playground

• Render video, audio and chat from your agent
• Send video, audio, or text to your agent
• Configurable settings panel to work with your agent

• This playground is currently work in progress. There are known layout/responsive bugs and some features are under tested.
• The playground was tested against the kitt example in https://github.com/livekit/agents.
• Feel free to ask questions, request features in our community slack.

• Layout can break on smaller screens.
• Mobile device sizes not supported currently