Awesome
<!--BEGIN_BANNER_IMAGE--> <picture> <source media="(prefers-color-scheme: dark)" srcset="/.github/banner_dark.png"> <source media="(prefers-color-scheme: light)" srcset="/.github/banner_light.png"> <img style="width:100%;" alt="The LiveKit icon, the name of the repository and some sample code in the background." src="https://raw.githubusercontent.com/livekit/agent-playground/main/.github/banner_light.png"> </picture> <!--END_BANNER_IMAGE-->LiveKit Agents Playground
<!--BEGIN_DESCRIPTION-->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.
<!--END_DESCRIPTION-->Docs and references
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
Try out a live version
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.
Setting up the playground locally
- Install dependencies
npm install
- Copy and rename the
.env.examplefile to.env.localand 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>
- Run the development server:
npm run dev
- Open http://localhost:3000 with your browser to see the result.
- If you haven't done so yet, start your agent (with the same project variables as in step 2.)
- Connect to a room and see your agent connecting to the playground
Features
- Render video, audio and chat from your agent
- Send video, audio, or text to your agent
- Configurable settings panel to work with your agent
Notes
- 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.
Known issues
- Layout can break on smaller screens.
- Mobile device sizes not supported currently
<br/><table>
<thead><tr><th colspan="2">LiveKit Ecosystem</th></tr></thead> <tbody> <tr><td>Realtime SDKs</td><td><a href="https://github.com/livekit/components-js">React Components</a> · <a href="https://github.com/livekit/client-sdk-js">Browser</a> · <a href="https://github.com/livekit/components-swift">Swift Components</a> · <a href="https://github.com/livekit/client-sdk-swift">iOS/macOS/visionOS</a> · <a href="https://github.com/livekit/client-sdk-android">Android</a> · <a href="https://github.com/livekit/client-sdk-flutter">Flutter</a> · <a href="https://github.com/livekit/client-sdk-react-native">React Native</a> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/client-sdk-unity-web">Unity (web)</a> · <a href="https://github.com/livekit/client-sdk-unity">Unity (beta)</a></td></tr><tr></tr> <tr><td>Server APIs</td><td><a href="https://github.com/livekit/node-sdks">Node.js</a> · <a href="https://github.com/livekit/server-sdk-go">Golang</a> · <a href="https://github.com/livekit/server-sdk-ruby">Ruby</a> · <a href="https://github.com/livekit/server-sdk-kotlin">Java/Kotlin</a> · <a href="https://github.com/livekit/python-sdks">Python</a> · <a href="https://github.com/livekit/rust-sdks">Rust</a> · <a href="https://github.com/agence104/livekit-server-sdk-php">PHP (community)</a></td></tr><tr></tr> <tr><td>Agents Frameworks</td><td><a href="https://github.com/livekit/agents">Python</a> · <b>Playground</b></td></tr><tr></tr> <tr><td>Services</td><td><a href="https://github.com/livekit/livekit">LiveKit server</a> · <a href="https://github.com/livekit/egress">Egress</a> · <a href="https://github.com/livekit/ingress">Ingress</a> · <a href="https://github.com/livekit/sip">SIP</a></td></tr><tr></tr> <tr><td>Resources</td><td><a href="https://docs.livekit.io">Docs</a> · <a href="https://github.com/livekit-examples">Example apps</a> · <a href="https://livekit.io/cloud">Cloud</a> · <a href="https://docs.livekit.io/home/self-hosting/deployment">Self-hosting</a> · <a href="https://github.com/livekit/livekit-cli">CLI</a></td></tr> </tbody> </table> <!--END_REPO_NAV-->