├── .env.example ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yaml │ ├── config.yml │ └── feature_request.yaml ├── banner_dark.png └── banner_light.png ├── .gitignore ├── LICENSE ├── NOTICE ├── README.md ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── logo.svg ├── renovate.json ├── src ├── cloud │ ├── CloudConnect.tsx │ ├── README.md │ └── useCloud.tsx ├── components │ ├── PlaygroundConnect.tsx │ ├── button │ │ ├── Button.tsx │ │ └── LoadingSVG.tsx │ ├── chat │ │ ├── ChatMessage.tsx │ │ ├── ChatMessageInput.tsx │ │ └── ChatTile.tsx │ ├── colorPicker │ │ └── ColorPicker.tsx │ ├── config │ │ ├── AttributeRow.tsx │ │ ├── AttributesInspector.tsx │ │ ├── AudioInputTile.tsx │ │ ├── ConfigurationPanelItem.tsx │ │ └── NameValueRow.tsx │ ├── playground │ │ ├── Playground.tsx │ │ ├── PlaygroundDeviceSelector.tsx │ │ ├── PlaygroundHeader.tsx │ │ ├── PlaygroundTile.tsx │ │ ├── RpcPanel.tsx │ │ ├── SettingsDropdown.tsx │ │ └── icons.tsx │ └── toast │ │ ├── PlaygroundToast.tsx │ │ └── ToasterProvider.tsx ├── hooks │ ├── useConfig.tsx │ ├── useConnection.tsx │ ├── useTrackVolume.tsx │ └── useWindowResize.ts ├── lib │ ├── tailwindTheme.preval.ts │ ├── types.ts │ └── util.ts ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── api │ │ └── token.ts │ └── index.tsx ├── styles │ └── globals.css └── transcriptions │ └── TranscriptionTile.tsx ├── tailwind.config.js └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | # LiveKit API Configuration 2 | LIVEKIT_API_KEY=YOUR_API_KEY 3 | LIVEKIT_API_SECRET=YOUR_API_SECRET 4 | 5 | # Public configuration 6 | NEXT_PUBLIC_LIVEKIT_URL=wss://YOUR_LIVEKIT_URL 7 | 8 | # Application Configuration 9 | NEXT_PUBLIC_APP_CONFIG=" 10 | title: 'LiveKit Agents Playground' 11 | description: 'A virtual workbench for your multimodal AI agents.' 12 | github_link: 'https://github.com/livekit/agents-playground' 13 | video_fit: 'contain' # 'contain' or 'cover' 14 | settings: 15 | editable: true # Should the user be able to edit settings in-app 16 | theme_color: 'cyan' 17 | chat: true # Enable or disable chat feature 18 | outputs: 19 | audio: true # Enable or disable audio output 20 | video: true # Enable or disable video output 21 | inputs: 22 | mic: true # Enable or disable microphone input 23 | camera: true # Enable or disable camera input 24 | sip: true # Enable or disable SIP input 25 | " 26 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.yaml: -------------------------------------------------------------------------------- 1 | name: "\U0001F41E Bug report" 2 | description: Report an issue with LiveKit Agents Playground 3 | body: 4 | - type: markdown 5 | attributes: 6 | value: | 7 | Thanks for taking the time to fill out this bug report! 8 | Please report security issues by email to security@livekit.io 9 | - type: textarea 10 | id: bug-description 11 | attributes: 12 | label: Describe the bug 13 | description: Describe what you are expecting vs. what happens instead. 14 | placeholder: | 15 | ### What I'm expecting 16 | ### What happens instead 17 | validations: 18 | required: true 19 | - type: textarea 20 | id: reproduction 21 | attributes: 22 | label: Reproduction 23 | description: A detailed step-by-step guide on how to reproduce the issue or (preferably) a link to a repository that reproduces the issue. Reproductions must be [short, self-contained and correct](http://sscce.org/) and must not contain files or code that aren't relevant to the issue. It's best if you use the sample app in `example/index.ts` as a starting point for your reproduction. We will prioritize issues that include a working minimal reproduction repository. 24 | placeholder: Reproduction 25 | validations: 26 | required: true 27 | - type: textarea 28 | id: logs 29 | attributes: 30 | label: Logs 31 | description: "Please include browser console and server logs around the time this bug occurred. Enable debug logging by calling `setLogLevel('debug')` from the livekit-client package as early as possible. Please try not to insert an image but copy paste the log text." 32 | render: shell 33 | - type: textarea 34 | id: system-info 35 | attributes: 36 | label: System Info 37 | description: Please mention the OS (incl. Version) and Browser (including exact version) on which you are seeing this issue. For ease of use you can run `npx envinfo --system --binaries --browsers --npmPackages "{livekit-client, @livekit/*}"` from within your livekit project, to give us all the needed info about your current environment 38 | render: shell 39 | placeholder: System, Binaries, Browsers 40 | validations: 41 | required: true 42 | - type: dropdown 43 | id: severity 44 | attributes: 45 | label: Severity 46 | options: 47 | - annoyance 48 | - serious, but I can work around it 49 | - blocking an upgrade 50 | - blocking all usage of LiveKit 51 | validations: 52 | required: true 53 | - type: textarea 54 | id: additional-context 55 | attributes: 56 | label: Additional Information 57 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: Slack Community Chat 4 | url: https://livekit.io/join-slack 5 | about: Ask questions and discuss with other LiveKit users in real time. 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yaml: -------------------------------------------------------------------------------- 1 | name: "Feature Request" 2 | description: Suggest an idea for this project 3 | body: 4 | - type: markdown 5 | attributes: 6 | value: | 7 | Thanks for taking the time to request this feature! 8 | - type: textarea 9 | id: problem 10 | attributes: 11 | label: Describe the problem 12 | description: Please provide a clear and concise description the problem this feature would solve. The more information you can provide here, the better. 13 | placeholder: I would like to be able to ... in order to solve ... 14 | validations: 15 | required: true 16 | - type: textarea 17 | id: solution 18 | attributes: 19 | label: Describe the proposed solution 20 | description: Please provide a clear and concise description of what you would like to happen. 21 | placeholder: I would like to see ... 22 | validations: 23 | required: true 24 | - type: textarea 25 | id: alternatives 26 | attributes: 27 | label: Alternatives considered 28 | description: "Please provide a clear and concise description of any alternative solutions or features you've considered." 29 | - type: dropdown 30 | id: importance 31 | attributes: 32 | label: Importance 33 | description: How important is this feature to you? 34 | options: 35 | - nice to have 36 | - would make my life easier 37 | - I cannot use LiveKit without it 38 | validations: 39 | required: true 40 | - type: textarea 41 | id: additional-context 42 | attributes: 43 | label: Additional Information 44 | description: Add any other context or screenshots about the feature request here. 45 | -------------------------------------------------------------------------------- /.github/banner_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/livekit/agents-playground/0218a5a002332537aa5c9906e7c0389a9a31c267/.github/banner_dark.png -------------------------------------------------------------------------------- /.github/banner_light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/livekit/agents-playground/0218a5a002332537aa5c9906e7c0389a9a31c267/.github/banner_light.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | Copyright 2024 LiveKit, Inc. 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The LiveKit icon, the name of the repository and some sample code in the background. 7 | 8 | 9 | 10 | 11 | # LiveKit Agents Playground 12 | 13 | 14 | 15 | The Agents 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. 16 | The playground includes components to fully interact with any LiveKit agent, through video, audio and chat. 17 | 18 | 19 | 20 | ## Docs and references 21 | 22 | Docs for how to get started with LiveKit agents at [https://docs.livekit.io/agents](https://docs.livekit.io/agents) 23 | 24 | The repo containing the (server side) agent implementations (including example agents): [https://github.com/livekit/agents](https://github.com/livekit/agents) 25 | 26 | ## Try out a live version 27 | 28 | You can try out a demo of the playground with [KITT](https://kitt.livekit.io) or the [hosted playground](https://agents-playground.livekit.io) for your own agents. 29 | 30 | ## Setting up the playground locally 31 | 32 | 1. Install dependencies 33 | 34 | ```bash 35 | npm install 36 | ``` 37 | 38 | 2. Copy and rename the `.env.example` file to `.env.local` and fill in the necessary environment variables. 39 | 40 | ``` 41 | LIVEKIT_API_KEY= 42 | LIVEKIT_API_SECRET= 43 | NEXT_PUBLIC_LIVEKIT_URL=wss:// 44 | ``` 45 | 46 | 3. Run the development server: 47 | 48 | ```bash 49 | npm run dev 50 | ``` 51 | 52 | 4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 53 | 5. If you haven't done so yet, start your agent (with the same project variables as in step 2.) 54 | 6. Connect to a room and see your agent connecting to the playground 55 | 56 | ## Features 57 | 58 | - Render video, audio and chat from your agent 59 | - Send video, audio, or text to your agent 60 | - Configurable settings panel to work with your agent 61 | 62 | ## Notes 63 | 64 | - This playground is currently work in progress. There are known layout/responsive bugs and some features are under tested. 65 | - The playground was tested against the kitt example in `https://github.com/livekit/agents`. 66 | - Feel free to ask questions, request features in our [community slack](https://livekit.io/join-slack). 67 | 68 | ## Known issues 69 | 70 | - Layout can break on smaller screens. 71 | - Mobile device sizes not supported currently 72 | 73 | 74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
LiveKit Ecosystem
LiveKit SDKsBrowser · iOS/macOS/visionOS · Android · Flutter · React Native · Rust · Node.js · Python · Unity · Unity (WebGL)
Server APIsNode.js · Golang · Ruby · Java/Kotlin · Python · Rust · PHP (community) · .NET (community)
UI ComponentsReact · Android Compose · SwiftUI
Agents FrameworksPython · Node.js · Playground
ServicesLiveKit server · Egress · Ingress · SIP
ResourcesDocs · Example apps · Cloud · Self-hosting · CLI
87 | 88 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const createNextPluginPreval = require("next-plugin-preval/config"); 2 | const withNextPluginPreval = createNextPluginPreval(); 3 | 4 | /** @type {import('next').NextConfig} */ 5 | const nextConfig = { 6 | reactStrictMode: false, 7 | }; 8 | 9 | module.exports = withNextPluginPreval(nextConfig); 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "agents-playground", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint", 10 | "format": "prettier --write ." 11 | }, 12 | "dependencies": { 13 | "@livekit/components-react": "^2.9.3", 14 | "@livekit/components-styles": "^1.1.5", 15 | "@radix-ui/react-dropdown-menu": "^2.1.2", 16 | "cookies-next": "^4.3.0", 17 | "framer-motion": "^10.18.0", 18 | "js-yaml": "^4.1.0", 19 | "livekit-client": "^2.9.5", 20 | "livekit-server-sdk": "^2.13.0", 21 | "lodash": "^4.17.21", 22 | "next": "^14.2.20", 23 | "next-plugin-preval": "^1.2.6", 24 | "qrcode.react": "^4.1.0", 25 | "react": "^18.3.1", 26 | "react-dom": "^18.3.1" 27 | }, 28 | "devDependencies": { 29 | "@types/js-yaml": "^4.0.9", 30 | "@types/lodash": "^4.17.13", 31 | "@types/node": "^20.17.9", 32 | "@types/react": "^18.3.14", 33 | "@types/react-dom": "^18.3.3", 34 | "autoprefixer": "^10.4.20", 35 | "eslint": "^8.57.1", 36 | "eslint-config-next": "14.2.26", 37 | "postcss": "^8.4.49", 38 | "tailwindcss": "^3.4.16", 39 | "typescript": "^5.7.2", 40 | "prettier": "^3.4.2" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/livekit/agents-playground/0218a5a002332537aa5c9906e7c0389a9a31c267/public/favicon.ico -------------------------------------------------------------------------------- /public/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 | "extends": ["config:recommended"], 4 | "packageRules": [ 5 | { 6 | "schedule": "before 6am on the first day of the month", 7 | "matchDepTypes": ["devDependencies"], 8 | "matchUpdateTypes": ["patch", "minor"], 9 | "groupName": "devDependencies (non-major)" 10 | }, 11 | { 12 | "matchSourceUrlPrefixes": ["https://github.com/livekit/"], 13 | "matchUpdateTypes": ["patch", "minor"], 14 | "groupName": "LiveKit dependencies (non-major)", 15 | "automerge": true 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/cloud/CloudConnect.tsx: -------------------------------------------------------------------------------- 1 | export const CloudConnect = ({ accentColor }: { accentColor: string }) => { 2 | return null; 3 | }; 4 | 5 | export const CLOUD_ENABLED = false; 6 | -------------------------------------------------------------------------------- /src/cloud/README.md: -------------------------------------------------------------------------------- 1 | Files in this `cloud/` directory can be ignored. They are mocks which we override in our private, hosted version of the agents-playground that supports LiveKit Cloud authentication. 2 | -------------------------------------------------------------------------------- /src/cloud/useCloud.tsx: -------------------------------------------------------------------------------- 1 | export function CloudProvider({ children }: { children: React.ReactNode }) { 2 | return <>{children}; 3 | } 4 | 5 | export function useCloud() { 6 | const generateToken: () => Promise = async () => { 7 | throw new Error("Not implemented"); 8 | }; 9 | const wsUrl = ""; 10 | 11 | return { generateToken, wsUrl }; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/PlaygroundConnect.tsx: -------------------------------------------------------------------------------- 1 | import { useConfig } from "@/hooks/useConfig"; 2 | import { CLOUD_ENABLED, CloudConnect } from "../cloud/CloudConnect"; 3 | import { Button } from "./button/Button"; 4 | import { useState } from "react"; 5 | import { ConnectionMode } from "@/hooks/useConnection"; 6 | 7 | type PlaygroundConnectProps = { 8 | accentColor: string; 9 | onConnectClicked: (mode: ConnectionMode) => void; 10 | }; 11 | 12 | const ConnectTab = ({ active, onClick, children }: any) => { 13 | let className = "px-2 py-1 text-sm"; 14 | 15 | if (active) { 16 | className += " border-b border-cyan-500 text-cyan-500"; 17 | } else { 18 | className += " text-gray-500 border-b border-transparent"; 19 | } 20 | 21 | return ( 22 | 25 | ); 26 | }; 27 | 28 | const TokenConnect = ({ 29 | accentColor, 30 | onConnectClicked, 31 | }: PlaygroundConnectProps) => { 32 | const { setUserSettings, config } = useConfig(); 33 | const [url, setUrl] = useState(config.settings.ws_url); 34 | const [token, setToken] = useState(config.settings.token); 35 | 36 | return ( 37 |
38 |
39 |
40 | setUrl(e.target.value)} 43 | className="text-white text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-2" 44 | placeholder="wss://url" 45 | > 46 | 52 |
53 | 66 | 70 | Don’t have a URL or token? Try out our KITT example to see agents in 71 | action! 72 | 73 |
74 |
75 | ); 76 | }; 77 | 78 | export const PlaygroundConnect = ({ 79 | accentColor, 80 | onConnectClicked, 81 | }: PlaygroundConnectProps) => { 82 | const [showCloud, setShowCloud] = useState(true); 83 | const copy = CLOUD_ENABLED 84 | ? "Connect to playground with LiveKit Cloud or manually with a URL and token" 85 | : "Connect to playground with a URL and token"; 86 | return ( 87 |
88 |
89 |
90 |
91 |
92 |

Connect to playground

93 |

{copy}

94 |
95 | {CLOUD_ENABLED && ( 96 |
97 | { 100 | setShowCloud(true); 101 | }} 102 | > 103 | LiveKit Cloud 104 | 105 | { 108 | setShowCloud(false); 109 | }} 110 | > 111 | Manual 112 | 113 |
114 | )} 115 |
116 |
117 | {showCloud && CLOUD_ENABLED ? ( 118 | 119 | ) : ( 120 | 124 | )} 125 |
126 |
127 |
128 |
129 | ); 130 | }; 131 | -------------------------------------------------------------------------------- /src/components/button/Button.tsx: -------------------------------------------------------------------------------- 1 | import React, { ButtonHTMLAttributes, ReactNode } from "react"; 2 | 3 | type ButtonProps = { 4 | accentColor: string; 5 | children: ReactNode; 6 | className?: string; 7 | disabled?: boolean; 8 | } & ButtonHTMLAttributes; 9 | 10 | export const Button: React.FC = ({ 11 | accentColor, 12 | children, 13 | className, 14 | disabled, 15 | ...allProps 16 | }) => { 17 | return ( 18 | 26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /src/components/button/LoadingSVG.tsx: -------------------------------------------------------------------------------- 1 | export const LoadingSVG = ({ 2 | diameter = 20, 3 | strokeWidth = 4, 4 | }: { 5 | diameter?: number; 6 | strokeWidth?: number; 7 | }) => ( 8 | 17 | 25 | 30 | 31 | ); 32 | -------------------------------------------------------------------------------- /src/components/chat/ChatMessage.tsx: -------------------------------------------------------------------------------- 1 | type ChatMessageProps = { 2 | message: string; 3 | accentColor: string; 4 | name: string; 5 | isSelf: boolean; 6 | hideName?: boolean; 7 | }; 8 | 9 | export const ChatMessage = ({ 10 | name, 11 | message, 12 | accentColor, 13 | isSelf, 14 | hideName, 15 | }: ChatMessageProps) => { 16 | return ( 17 |
18 | {!hideName && ( 19 |
24 | {name} 25 |
26 | )} 27 |
34 | {message} 35 |
36 |
37 | ); 38 | }; 39 | -------------------------------------------------------------------------------- /src/components/chat/ChatMessageInput.tsx: -------------------------------------------------------------------------------- 1 | import { useWindowResize } from "@/hooks/useWindowResize"; 2 | import { useCallback, useEffect, useRef, useState } from "react"; 3 | 4 | type ChatMessageInput = { 5 | placeholder: string; 6 | accentColor: string; 7 | height: number; 8 | onSend?: (message: string) => void; 9 | }; 10 | 11 | export const ChatMessageInput = ({ 12 | placeholder, 13 | accentColor, 14 | height, 15 | onSend, 16 | }: ChatMessageInput) => { 17 | const [message, setMessage] = useState(""); 18 | const [inputTextWidth, setInputTextWidth] = useState(0); 19 | const [inputWidth, setInputWidth] = useState(0); 20 | const hiddenInputRef = useRef(null); 21 | const inputRef = useRef(null); 22 | const windowSize = useWindowResize(); 23 | const [isTyping, setIsTyping] = useState(false); 24 | const [inputHasFocus, setInputHasFocus] = useState(false); 25 | 26 | const handleSend = useCallback(() => { 27 | if (!onSend) { 28 | return; 29 | } 30 | if (message === "") { 31 | return; 32 | } 33 | 34 | onSend(message); 35 | setMessage(""); 36 | }, [onSend, message]); 37 | 38 | useEffect(() => { 39 | setIsTyping(true); 40 | const timeout = setTimeout(() => { 41 | setIsTyping(false); 42 | }, 500); 43 | 44 | return () => clearTimeout(timeout); 45 | }, [message]); 46 | 47 | useEffect(() => { 48 | if (hiddenInputRef.current) { 49 | setInputTextWidth(hiddenInputRef.current.clientWidth); 50 | } 51 | }, [hiddenInputRef, message]); 52 | 53 | useEffect(() => { 54 | if (inputRef.current) { 55 | setInputWidth(inputRef.current.clientWidth); 56 | } 57 | }, [hiddenInputRef, message, windowSize.width]); 58 | 59 | return ( 60 |
64 |
65 |
0 75 | ? Math.min(inputTextWidth, inputWidth - 20) - 4 76 | : 0) + 77 | "px)", 78 | }} 79 | >
80 | 0 ? "12px" : "24px", 85 | caretShape: "block", 86 | }} 87 | placeholder={placeholder} 88 | value={message} 89 | onChange={(e) => { 90 | setMessage(e.target.value); 91 | }} 92 | onFocus={() => { 93 | setInputHasFocus(true); 94 | }} 95 | onBlur={() => { 96 | setInputHasFocus(false); 97 | }} 98 | onKeyDown={(e) => { 99 | if (e.key === "Enter") { 100 | handleSend(); 101 | } 102 | }} 103 | > 104 | 108 | {message.replaceAll(" ", "\u00a0")} 109 | 110 | 119 |
120 |
121 | ); 122 | }; 123 | -------------------------------------------------------------------------------- /src/components/chat/ChatTile.tsx: -------------------------------------------------------------------------------- 1 | import { ChatMessage } from "@/components/chat/ChatMessage"; 2 | import { ChatMessageInput } from "@/components/chat/ChatMessageInput"; 3 | import { ChatMessage as ComponentsChatMessage } from "@livekit/components-react"; 4 | import { useEffect, useRef } from "react"; 5 | 6 | const inputHeight = 48; 7 | 8 | export type ChatMessageType = { 9 | name: string; 10 | message: string; 11 | isSelf: boolean; 12 | timestamp: number; 13 | }; 14 | 15 | type ChatTileProps = { 16 | messages: ChatMessageType[]; 17 | accentColor: string; 18 | onSend?: (message: string) => Promise; 19 | }; 20 | 21 | export const ChatTile = ({ messages, accentColor, onSend }: ChatTileProps) => { 22 | const containerRef = useRef(null); 23 | useEffect(() => { 24 | if (containerRef.current) { 25 | containerRef.current.scrollTop = containerRef.current.scrollHeight; 26 | } 27 | }, [containerRef, messages]); 28 | 29 | return ( 30 |
31 |
38 |
39 | {messages.map((message, index, allMsg) => { 40 | const hideName = 41 | index >= 1 && allMsg[index - 1].name === message.name; 42 | 43 | return ( 44 | 52 | ); 53 | })} 54 |
55 |
56 | 62 |
63 | ); 64 | }; 65 | -------------------------------------------------------------------------------- /src/components/colorPicker/ColorPicker.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | type ColorPickerProps = { 4 | colors: string[]; 5 | selectedColor: string; 6 | onSelect: (color: string) => void; 7 | }; 8 | 9 | export const ColorPicker = ({ 10 | colors, 11 | selectedColor, 12 | onSelect, 13 | }: ColorPickerProps) => { 14 | const [isHovering, setIsHovering] = useState(false); 15 | const onMouseEnter = () => { 16 | setIsHovering(true); 17 | }; 18 | const onMouseLeave = () => { 19 | setIsHovering(false); 20 | }; 21 | 22 | return ( 23 |
28 | {colors.map((color) => { 29 | const isSelected = color === selectedColor; 30 | const saturation = !isHovering && !isSelected ? "saturate-[0.25]" : ""; 31 | const borderColor = isSelected 32 | ? `border border-${color}-800` 33 | : "border-transparent"; 34 | const opacity = isSelected ? `opacity-100` : "opacity-20"; 35 | return ( 36 |
{ 40 | onSelect(color); 41 | }} 42 | > 43 |
44 |
45 | ); 46 | })} 47 |
48 | ); 49 | }; 50 | -------------------------------------------------------------------------------- /src/components/config/AttributeRow.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AttributeItem } from "@/lib/types"; 3 | 4 | interface AttributeRowProps { 5 | attribute: AttributeItem; 6 | onKeyChange: (id: string, newKey: string) => void; 7 | onValueChange: (id: string, newValue: string) => void; 8 | onRemove?: (id: string) => void; 9 | disabled?: boolean; 10 | } 11 | 12 | export const AttributeRow: React.FC = ({ 13 | attribute, 14 | onKeyChange, 15 | onValueChange, 16 | onRemove, 17 | disabled = false, 18 | }) => { 19 | return ( 20 |
21 | onKeyChange(attribute.id, e.target.value)} 24 | className="flex-1 min-w-0 text-gray-400 text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1 font-mono" 25 | placeholder="Name" 26 | disabled={disabled} 27 | /> 28 | onValueChange(attribute.id, e.target.value)} 31 | className="flex-1 min-w-0 text-gray-400 text-sm bg-transparent border border-gray-800 rounded-sm px-3 py-1 font-mono" 32 | placeholder="Value" 33 | disabled={disabled} 34 | /> 35 | {onRemove && ( 36 | 57 | )} 58 |
59 | ); 60 | }; 61 | -------------------------------------------------------------------------------- /src/components/config/AttributesInspector.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useCallback, useEffect, useRef } from "react"; 2 | import { ConnectionState } from "livekit-client"; 3 | import { AttributeItem } from "@/lib/types"; 4 | import { Button } from "@/components/button/Button"; 5 | import { useLocalParticipant } from "@livekit/components-react"; 6 | import { AttributeRow } from "./AttributeRow"; 7 | 8 | interface AttributesInspectorProps { 9 | attributes: AttributeItem[]; 10 | onAttributesChange: (attributes: AttributeItem[]) => void; 11 | themeColor: string; 12 | disabled?: boolean; 13 | connectionState?: ConnectionState; 14 | metadata?: string; 15 | onMetadataChange?: (metadata: string) => void; 16 | } 17 | 18 | export const AttributesInspector: React.FC = ({ 19 | attributes, 20 | onAttributesChange, 21 | themeColor, 22 | disabled = false, 23 | connectionState, 24 | metadata, 25 | onMetadataChange, 26 | }) => { 27 | const [isExpanded, setIsExpanded] = useState(false); 28 | const [isMetadataExpanded, setIsMetadataExpanded] = useState(false); 29 | const [localAttributes, setLocalAttributes] = 30 | useState(attributes); 31 | const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false); 32 | const [showSyncFlash, setShowSyncFlash] = useState(false); 33 | const { localParticipant } = useLocalParticipant(); 34 | const timeoutRef = useRef(); 35 | const syncFlashTimeoutRef = useRef(); 36 | 37 | // Update local attributes when props change 38 | useEffect(() => { 39 | setLocalAttributes(attributes); 40 | }, [attributes]); 41 | 42 | const syncAttributesWithRoom = useCallback(() => { 43 | if (!localParticipant || connectionState !== ConnectionState.Connected) 44 | return; 45 | 46 | const attributesMap = localAttributes.reduce( 47 | (acc, attr) => { 48 | if (attr.key && attr.key.trim() !== "") { 49 | acc[attr.key] = attr.value; 50 | } 51 | return acc; 52 | }, 53 | {} as Record, 54 | ); 55 | 56 | localParticipant.setAttributes(attributesMap); 57 | setHasUnsavedChanges(false); 58 | setShowSyncFlash(true); 59 | if (syncFlashTimeoutRef.current) { 60 | clearTimeout(syncFlashTimeoutRef.current); 61 | } 62 | syncFlashTimeoutRef.current = setTimeout( 63 | () => setShowSyncFlash(false), 64 | 1000, 65 | ); 66 | }, [localAttributes, localParticipant, connectionState]); 67 | 68 | // Handle debounced sync 69 | useEffect(() => { 70 | if (!hasUnsavedChanges) return; 71 | 72 | if (timeoutRef.current) { 73 | clearTimeout(timeoutRef.current); 74 | } 75 | 76 | timeoutRef.current = setTimeout(() => { 77 | if (connectionState === ConnectionState.Connected && localParticipant) { 78 | syncAttributesWithRoom(); 79 | } 80 | }, 2000); 81 | 82 | return () => { 83 | if (timeoutRef.current) { 84 | clearTimeout(timeoutRef.current); 85 | } 86 | }; 87 | }, [ 88 | hasUnsavedChanges, 89 | syncAttributesWithRoom, 90 | connectionState, 91 | localParticipant, 92 | ]); 93 | 94 | const handleKeyChange = (id: string, newKey: string) => { 95 | const updatedAttributes = localAttributes.map((attr) => 96 | attr.id === id ? { ...attr, key: newKey } : attr, 97 | ); 98 | setLocalAttributes(updatedAttributes); 99 | onAttributesChange(updatedAttributes); 100 | if (connectionState === ConnectionState.Connected && newKey.trim() !== "") { 101 | setHasUnsavedChanges(true); 102 | } 103 | }; 104 | 105 | const handleValueChange = (id: string, newValue: string) => { 106 | const updatedAttributes = localAttributes.map((attr) => 107 | attr.id === id ? { ...attr, value: newValue } : attr, 108 | ); 109 | setLocalAttributes(updatedAttributes); 110 | onAttributesChange(updatedAttributes); 111 | if (connectionState === ConnectionState.Connected) { 112 | setHasUnsavedChanges(true); 113 | } 114 | }; 115 | 116 | const handleRemoveAttribute = (id: string) => { 117 | const updatedAttributes = localAttributes.filter((attr) => attr.id !== id); 118 | setLocalAttributes(updatedAttributes); 119 | onAttributesChange(updatedAttributes); 120 | if (connectionState === ConnectionState.Connected) { 121 | setHasUnsavedChanges(true); 122 | } 123 | }; 124 | 125 | const handleAddAttribute = () => { 126 | const newId = `attr_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; 127 | const updatedAttributes = [ 128 | ...localAttributes, 129 | { id: newId, key: "", value: "" }, 130 | ]; 131 | setLocalAttributes(updatedAttributes); 132 | onAttributesChange(updatedAttributes); 133 | if (connectionState === ConnectionState.Connected) { 134 | setHasUnsavedChanges(true); 135 | } 136 | }; 137 | 138 | return ( 139 |
140 |
setIsExpanded(!isExpanded)} 143 | > 144 |
Attributes
145 | 152 | 158 | 159 |
160 | {isExpanded && ( 161 |
162 | {disabled ? ( 163 | localAttributes.length === 0 ? ( 164 |
165 | No attributes set 166 |
167 | ) : ( 168 | localAttributes.map((attribute) => ( 169 | 176 | )) 177 | ) 178 | ) : ( 179 | <> 180 | {localAttributes.map((attribute) => ( 181 | 189 | ))} 190 |
191 | 212 | {showSyncFlash && ( 213 |
214 | Changes saved 215 |
216 | )} 217 |
218 | 219 | )} 220 |
221 | )} 222 | <> 223 |
setIsMetadataExpanded(!isMetadataExpanded)} 226 | > 227 |
Metadata
228 | 235 | 241 | 242 |
243 | {isMetadataExpanded && 244 | (disabled || connectionState === ConnectionState.Connected ? ( 245 |
246 | {metadata ? ( 247 | 
248 |                   {metadata}
249 |
250 | ) : ( 251 |
252 | No metadata set 253 |
254 | )} 255 |
256 | ) : ( 257 |