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.
- Playground source code: https://github.com/livekit/agents-playground/
- Built with Next.js and LiveKit Components.
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.
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/agent-playground.git
2. Create environment variables
.env.local file in the root of your project folder with the following variables:
LIVEKIT_API_KEY=YOUR_API_KEYLIVEKIT_API_SECRET=YOUR_API_SECRET# Public configurationNEXT_PUBLIC_LIVEKIT_URL=wss://YOUR_LIVEKIT_URLNEXT_PUBLIC_APP_CONFIG="title: 'LiveKit Agent Playground'description: 'Description of your project'# optional, if your agent is open source, you can link to itgithub_link: 'https://github.com/your/url'theme_color: 'cyan'# optional, enable/disable UI capabilitiesoutputs:audio: truevideo: truechat: trueinputs:mic: truecamera: true"
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
Similarly, agents have varying output requirements. If your agent does not provide voice/audio feedback to the user, you can set
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 installnpm 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.