85 lines
5.2 KiB
Markdown
85 lines
5.2 KiB
Markdown
<!--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](https://github.com/livekit/agents). 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](https://docs.livekit.io/agents)
|
|
|
|
The repo containing the (server side) agent implementations (including example agents): [https://github.com/livekit/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](https://livekit-agent-playground.vercel.app).
|
|
This will connect you to our example agent, KITT, which is based off of the [minimal-assistant](https://github.com/livekit/agents/blob/main/examples/voice-pipeline-agent/minimal_assistant.py).
|
|
|
|
## Setting up the playground locally
|
|
|
|
1. Install dependencies
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. Open [http://localhost:3000](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
|
|
|
|
## 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](https://livekit.io/join-slack).
|
|
|
|
## Known issues
|
|
|
|
- Layout can break on smaller screens.
|
|
- Mobile device sizes not supported currently
|
|
|
|
<!--BEGIN_REPO_NAV-->
|
|
<br/><table>
|
|
<thead><tr><th colspan="2">LiveKit Ecosystem</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>LiveKit SDKs</td><td><a href="https://github.com/livekit/client-sdk-js">Browser</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">Unity</a> · <a href="https://github.com/livekit/client-sdk-unity-web">Unity (WebGL)</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> · <a href="https://github.com/pabloFuente/livekit-server-sdk-dotnet">.NET (community)</a></td></tr><tr></tr>
|
|
<tr><td>UI Components</td><td><a href="https://github.com/livekit/components-js">React</a> · <a href="https://github.com/livekit/components-android">Android Compose</a> · <a href="https://github.com/livekit/components-swift">SwiftUI</a></td></tr><tr></tr>
|
|
<tr><td>Agents Frameworks</td><td><a href="https://github.com/livekit/agents">Python</a> · <a href="https://github.com/livekit/agents-js">Node.js</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-->
|