Skip to content

An JS web client for connecting to Pipecat bots with voice and vision

Notifications You must be signed in to change notification settings

CerebriumAI/web-client-ui

 
 

Repository files navigation

Pipecat Client Web UI

Some docs regarding how all this fits together: here

Getting setup

Install deps and build the UI:

mv env.example .env.development.local
yarn 
yarn run build
yarn dev

Navigate to https://localhost:5173

Configuring your env

VITE_APP_TITLE

Name of your bot e.g. "Simple Chatbot" (shown in HTML and intro)

VITE_SERVER_URL

A server URL to trigger when starting a session (e.g. your Cerebrium function) that instantiates a new agent at the specified room URL. Note: If this is not set, the app will assume you will manually start your bot at the same room URL (and show a warning on the config screen in dev mode.)

VITE_SERVER_AUTH

The JWT token that authenticates your request to your cerebrium endpoint

VITE_MANUAL_ROOM_ENTRY

Disable automatic room creation. User must enter a room URL to join or pass through room_url query string.

VITE_SHOW_SPLASH

Show an initial splash screen (Splash.tsx).

VITE_SHOW_CONFIG

Show app settings before device configuration, useful for debugging.

VITE_OPEN_MIC

Not currently in use

VITE_USER_VIDEO

Not currently in use

What libraries does this use?

Vite / React

We've used Vite to simplify the development and build experience.

Tailwind CSS

We use Tailwind so the UI is easy to theme quickly, and reduce the number of CSS classes used throughout the project.

Radix

For interactive components, we make use of Radix.

About

An JS web client for connecting to Pipecat bots with voice and vision

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 81.3%
  • CSS 14.1%
  • JavaScript 3.1%
  • HTML 1.5%