Skip to content

Feat/add example frontend#17

Merged
mahimairaja merged 7 commits intomainfrom
feat/add-example-frontend
Mar 21, 2026
Merged

Feat/add example frontend#17
mahimairaja merged 7 commits intomainfrom
feat/add-example-frontend

Conversation

@mahimairaja
Copy link
Copy Markdown
Collaborator

@mahimairaja mahimairaja commented Mar 21, 2026

Summary by CodeRabbit

  • New Features

    • Added a complete frontend demo app with routed demo pages, real-time demo-call UI, audio visualizer, and transcript panels.
    • Demo includes token-based call provisioning, Dockerfile, environment template, and responsive styling/themes.
  • Documentation

    • Updated docs and README to adopt OpenAI plugin-based provider configuration and adjusted CLI/provider defaults.

@mahimairaja mahimairaja self-assigned this Mar 21, 2026
@mahimairaja mahimairaja added the enhancement New feature or request label Mar 21, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 21, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c6a0a829-a25f-4ef9-95cb-891727de1d08

📥 Commits

Reviewing files that changed from the base of the PR and between 51ee0e7 and 5ae6402.

⛔ Files ignored due to path filters (1)
  • examples/frontend/package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (19)
  • README.md
  • docs/api/pool.md
  • docs/cli.md
  • docs/getting-started.md
  • examples/frontend/README.md
  • examples/frontend/app/app.css
  • examples/frontend/app/components/agents-ui/agent-audio-visualizer-wave.tsx
  • examples/frontend/app/components/agents-ui/agent-chat-transcript.tsx
  • examples/frontend/app/components/agents-ui/agent-session-provider.tsx
  • examples/frontend/app/components/demo-call-page.tsx
  • examples/frontend/app/routes/api.token.ts
  • examples/frontend/package.json
  • examples/main.py
  • pyproject.toml
  • src/openrtc/pool.py
  • tests/test_cli.py
  • tests/test_discovery.py
  • tests/test_pool.py
  • tests/test_routing.py

📝 Walkthrough

Walkthrough

Adds a new React Router frontend example with LiveKit integration (token endpoint, UI, routes, styles, build/config), and updates backend worker/session logic to support spawn-safe provider objects, provider pickling, and merged turn_handling; also updates docs, tests, and dependencies to use OpenAI-based provider configuration.

Changes

Cohort / File(s) Summary
Frontend app scaffold
examples/frontend/package.json, examples/frontend/tsconfig.json, examples/frontend/vite.config.ts, examples/frontend/react-router.config.ts
New frontend project config: npm scripts, TypeScript settings, Vite plugins, React Router SSR config and path aliases.
Build / Deploy / Env
examples/frontend/Dockerfile, examples/frontend/.dockerignore, examples/frontend/.gitignore, examples/frontend/.env.example
Added multi-stage Dockerfile, docker/git ignores, and example env file for LiveKit credentials.
Frontend routes & entry
examples/frontend/app/root.tsx, examples/frontend/app/routes.ts, examples/frontend/app/routes/*.tsx, examples/frontend/app/routes/api.token.ts
New router config, root layout, error boundary, index/home, dentist/restaurant demo routes, and an API action (/api/token) that creates LiveKit rooms and issues participant tokens.
Demo UI components
examples/frontend/app/components/demo-call-page.tsx, examples/frontend/app/components/agents-ui/*, examples/frontend/app/welcome/welcome.tsx
Added demo call page managing LiveKit session lifecycle, agent UI components (audio visualizer, transcript, session provider), and welcome page.
Styling & assets
examples/frontend/app/app.css
Comprehensive Tailwind-based stylesheet, theme variables, responsive layouts, and component styles.
Frontend docs
examples/frontend/README.md, README.md
New frontend README and updates to project README describing provider/plugin changes and CLI defaults.
Backend: AgentPool/session changes
src/openrtc/pool.py, examples/main.py, pyproject.toml
Worker prewarm now stores turn_detection_factory; AgentConfig serializes/deserializes provider objects into spawn-safe refs; session startup merges turn_handling defaults and deprecated keys handling; pyproject adds livekit-agents[openai].
Tests
tests/test_pool.py, tests/test_routing.py, tests/test_cli.py, tests/test_discovery.py
Updated tests to use OpenAI provider identifiers/objects, added tests for pickling/provider-object safety and turn_handling behavior.
Example build infra
examples/frontend/.dockerignore, examples/frontend/Dockerfile
Docker build context exclusions and a multi-stage Node.js build for production runtime.

Sequence Diagram

sequenceDiagram
    participant Browser as Browser
    participant FrontendAPI as Frontend API\n(api/token)
    participant LiveKit as LiveKit Service
    participant Worker as OpenRTC Worker\n(AgentPool)

    Browser->>FrontendAPI: POST /api/token { variant:"dentist" }
    FrontendAPI->>FrontendAPI: validate variant & env
    FrontendAPI->>LiveKit: Create room (room_name, metadata=agent)
    LiveKit-->>FrontendAPI: Room created
    FrontendAPI->>FrontendAPI: generate AccessToken (participant, ttl)
    FrontendAPI-->>Browser: 201 { server_url, participant_token, room_name, agent }
    Browser->>LiveKit: Connect using participant_token
    LiveKit-->>Browser: Connected
    Worker->>LiveKit: Worker/AgentPool joins room (reads metadata)
    LiveKit-->>Worker: Agent connected
    Browser-->>Worker: Audio/session established (via LiveKit)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Poem

🐇 I hopped a message, light and quick, to spin a frontend bright and slick,
Tokens signed and rooms that sing, agents answer when bells ring,
OpenAI plugins tucked in fur, picklable dreams that safely purr,
Hop in, dear devs, the demo's live — carrots, code, and joyful drive! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Feat/add example frontend' accurately describes the main change—addition of a new example frontend application with multiple supporting files and configuration.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/add-example-frontend

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link
Copy Markdown

codecov bot commented Mar 21, 2026

Codecov Report

❌ Patch coverage is 89.84375% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.34%. Comparing base (0a9c9c4) to head (5ae6402).
⚠️ Report is 8 commits behind head on main.

Files with missing lines Patch % Lines
src/openrtc/pool.py 89.84% 13 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main      #17      +/-   ##
==========================================
- Coverage   90.64%   90.34%   -0.30%     
==========================================
  Files           3        3              
  Lines         342      466     +124     
==========================================
+ Hits          310      421     +111     
- Misses         32       45      +13     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (2)
examples/frontend/Dockerfile (1)

17-22: Add a non-root user for improved container security.

The container currently runs as root. Adding a non-root user is a security best practice that limits potential damage if the container is compromised.

🔒 Proposed fix
 FROM node:20-alpine
 COPY ./package.json package-lock.json /app/
 COPY --from=production-dependencies-env /app/node_modules /app/node_modules
 COPY --from=build-env /app/build /app/build
 WORKDIR /app
+RUN addgroup -g 1001 -S nodejs && adduser -S nodejs -u 1001
+USER nodejs
 CMD ["npm", "run", "start"]
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@examples/frontend/Dockerfile` around lines 17 - 22, The Dockerfile runs the
app as root—create a non-root user and switch to it before CMD to improve
security: add steps to create a user/group (e.g., appuser), chown the /app
directory and any needed files to that user, set USER to that non-root account,
and ensure WORKDIR remains /app so npm run start (CMD ["npm","run","start"])
runs as the non-root user; update the COPY/ownership sequence around COPY
--from=... and WORKDIR to avoid permission issues at runtime.
examples/frontend/.dockerignore (1)

1-4: Consider excluding .env* files from Docker build context.

Environment files containing secrets could accidentally be copied into the Docker image. Add .env* to prevent this.

🔧 Proposed fix
 .react-router
 build
 node_modules
 README.md
+.env*
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@examples/frontend/.dockerignore` around lines 1 - 4, Add a rule to the
examples/frontend/.dockerignore that excludes any environment files by adding
the pattern ".env*" so .env, .env.local, etc. are not sent in the Docker build
context; update the .dockerignore (which currently lists .react-router, build,
node_modules, README.md) to include ".env*" and commit the change.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@examples/frontend/app/app.css`:
- Around line 3-5: The stylelint config extends stylelint-config-standard-scss
which will flag Tailwind v4 at-rules like `@theme` as unknown; update
.stylelintrc.json to override the scss/at-rule-no-unknown rule so it ignores
Tailwind directives (e.g., add scss/at-rule-no-unknown with ignoreAtRules
including "theme", "utility", "variant", "apply") or disable that rule entirely
to prevent editor/CI failures when encountering `@theme` in app.css.

In `@examples/frontend/app/components/demo-call-page.tsx`:
- Around line 32-36: The startCall flow is vulnerable to re-entrancy and stale
async updates after unmount; add a mounted flag and an in-flight guard to
prevent parallel invocations and post-unmount setState calls: introduce a ref
like isMountedRef updated in the existing useEffect cleanup that calls
disconnectFromRoom(), check isMountedRef.current before any state updates (e.g.
the phase state updates around startCall and subsequent async steps), and add an
isStarting/inFlight ref guard around the startCall function to early-return if a
start is already in progress; ensure any async callbacks (the blocks at lines
noted that update state after awaits) verify isMountedRef.current and clear the
in-flight flag on all paths (success/error) to avoid stale updates or racing
calls.

In `@examples/frontend/app/routes/api.token.ts`:
- Around line 22-24: The action handler parses request.json() directly which can
throw on malformed JSON and convert what should be a 400 client error into an
unhandled 500; wrap the parse in a try/catch and on any JSON parse error return
a 400 response (with a clear message) before running validation like
isDemoVariant; apply the same change to the other request.json()-parsing handler
in this file so both handlers explicitly handle malformed JSON and then validate
variant.

---

Nitpick comments:
In `@examples/frontend/.dockerignore`:
- Around line 1-4: Add a rule to the examples/frontend/.dockerignore that
excludes any environment files by adding the pattern ".env*" so .env,
.env.local, etc. are not sent in the Docker build context; update the
.dockerignore (which currently lists .react-router, build, node_modules,
README.md) to include ".env*" and commit the change.

In `@examples/frontend/Dockerfile`:
- Around line 17-22: The Dockerfile runs the app as root—create a non-root user
and switch to it before CMD to improve security: add steps to create a
user/group (e.g., appuser), chown the /app directory and any needed files to
that user, set USER to that non-root account, and ensure WORKDIR remains /app so
npm run start (CMD ["npm","run","start"]) runs as the non-root user; update the
COPY/ownership sequence around COPY --from=... and WORKDIR to avoid permission
issues at runtime.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: cdbb107c-efc3-4e76-a848-2c21368c0ff7

📥 Commits

Reviewing files that changed from the base of the PR and between 0a9c9c4 and 51ee0e7.

⛔ Files ignored due to path filters (4)
  • examples/frontend/app/welcome/logo-dark.svg is excluded by !**/*.svg
  • examples/frontend/app/welcome/logo-light.svg is excluded by !**/*.svg
  • examples/frontend/package-lock.json is excluded by !**/package-lock.json
  • examples/frontend/public/favicon.ico is excluded by !**/*.ico
📒 Files selected for processing (18)
  • examples/frontend/.dockerignore
  • examples/frontend/.env.example
  • examples/frontend/.gitignore
  • examples/frontend/Dockerfile
  • examples/frontend/README.md
  • examples/frontend/app/app.css
  • examples/frontend/app/components/demo-call-page.tsx
  • examples/frontend/app/root.tsx
  • examples/frontend/app/routes.ts
  • examples/frontend/app/routes/api.token.ts
  • examples/frontend/app/routes/dentist.tsx
  • examples/frontend/app/routes/home.tsx
  • examples/frontend/app/routes/restaurant.tsx
  • examples/frontend/app/welcome/welcome.tsx
  • examples/frontend/package.json
  • examples/frontend/react-router.config.ts
  • examples/frontend/tsconfig.json
  • examples/frontend/vite.config.ts

Comment thread examples/frontend/app/app.css
Comment thread examples/frontend/app/components/demo-call-page.tsx Outdated
Comment thread examples/frontend/app/routes/api.token.ts Outdated
@mahimairaja mahimairaja merged commit 96d7295 into main Mar 21, 2026
6 of 7 checks passed
@mahimairaja mahimairaja deleted the feat/add-example-frontend branch March 23, 2026 17:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant