Agents Playground

Your agent lives on the backend and is designed to interact seamlessly with any frontend application that incorporates a LiveKit SDK.

On this page

Using the hosted playgroundSelf-hosted playground1. Clone the project2. Create environment variables3. Customizing configuration4. Run the playground5. Deploying the playground

To ease the process of building and testing an agent, we've developed a versatile web frontend called "playground". This app is available for use or customization according to your specific requirements. It can also serve as a starting point for your application.

Using the hosted playground

A hosted version of the playground is available at https://agents-playground.livekit.io. This version is compatible with any LiveKit server instance (including one running locally). To use it, you'll need to input your LiveKit server's URL and a corresponding access token.

Self-hosted playground

When you run your own version of the playground, it can be configured to automatically generate access tokens for your users. This setup streamlines the user experience, removing the need for manual token entry.

1. Clone the project

git clone https://github.com/livekit/agents-playground.git

2. Create environment variables

Create an .env.local file in the root of your project folder with the following variables:

LIVEKIT_API_KEY=YOUR_API_KEY
LIVEKIT_API_SECRET=YOUR_API_SECRET


# Public configuration
NEXT_PUBLIC_LIVEKIT_URL=wss://YOUR_LIVEKIT_URL


NEXT_PUBLIC_APP_CONFIG="
title: 'LiveKit Agent Playground'
description: 'LiveKit Agent Playground allows you to test your LiveKit Agent integration by connecting to your LiveKit Cloud or self-hosted instance.'
github_link: 'https://github.com/livekit/agents-playground'
video_fit: 'cover' # 'contain' or 'cover'
settings:
  editable: true # Should the user be able to edit settings in-app
  theme_color: 'cyan'
  chat: true  # Enable or disable chat feature
  outputs:
    audio: true # Enable or disable audio output
    video: true # Enable or disable video output
  inputs:
    mic: true    # Enable or disable microphone input
    camera: true # Enable or disable camera input
    sip: true    # Enable or disable SIP input
"

3. Customizing configuration

NEXT_PUBLIC_APP_CONFIG is a configurable YAML string designed to tailor the playground's capabilities. By default, the playground is set up to publish both the user's camera and microphone when they connect to a room. However if, for example, your agent doesn't need vision, you can disable the camera by setting inputs.camera to false.

Similarly, agents have varying output requirements. If your agent does not provide voice/audio feedback to the user, you can set outputs.audio to false. This adjustment will consequently remove the related audio component from the playground UI.

4. Run the playground

That's it! You're ready to run your own version of the playground.

npm install
npm run dev

5. Deploying the playground

To deploy your version of the playground, you can use any hosting provider that supports Node.js.

We're hosting the public version of it on Vercel.

Deploy with Vercel

GitHubSlack
Sign in