feat(shadcn): improve chat transcript UX + live agent session on preview by thomasyuill-livekit · Pull Request #1394 · livekit/components-js

thomasyuill-livekit · 2026-07-22T19:11:36Z

Issue

Related to livekit-examples/agent-starter-react#347 (comment)

Overview

Improves the agent-chat-transcript autoScroll, scroll anchor, and "thinking" UX
Updates agent-chat-transcript story with injectable messages for testing
Wires AgentSessionView-01's story to a LiveKit agent session for testing
- both locally and in the Vercel preview

Summary of changes

Note

The /api/agents-ui/token route is intentionally insecure (no auth layer) and refuses to run on a real Vercel Production deployment (VERCEL_ENV === 'production'), but is allowed on Preview

Anyone with the preview link can mint a token against the configured LiveKit project. This was a deliberate, discussed tradeoff for this demo. I don't believe this is a concern as it's just our HP demo

Chat transcript component

File	Change
`agent-chat-transcript.tsx`	Adds `autoScroll`/`scrollAnchor` props (`boolean \| 'user' \| 'agent' \| 'any'`) and `scrollEdgeThreshold` for configurable scroll-anchoring; replaces the `AnimatePresence` thinking indicator with a `Marker`/`MarkerIcon`/`MarkerContent` "Thinking..." row; restyles the scroll-to-bottom button
`marker.tsx` (new)	New `Marker`/`MarkerIcon`/`MarkerContent` UI primitive, registered in `registry.json`
`agent-session-block.tsx`	Fixes the transcript container to `absolute inset-x-0 top-0 bottom-[135px] overflow-hidden` so it fills its space correctly instead of relying on padding
`bubble.tsx`, `message.tsx`, `message-scroller.tsx`	Formatting only (quote style, semicolons)

Storybook

File	Change
`AgentChatTranscript.stories.tsx`	New `InjectMessages` story — a button that appends a message on each click, alternating agent/user, to visually verify scroll behavior as the transcript grows
`AgentSessionProvider.tsx`	Reverted to the shared LiveKit sandbox token server (works out of the box, no local project needed) — used by every story except `AgentSessionView-01`
`LiveAgentSessionProvider.tsx` (new)	Connects to a real local/preview LiveKit project and dispatches an agent via `AGENT_NAME` — used only by `AgentSessionView-01`, so that story can be exercised against a real agent
`.storybook/main.js`	Local dev-only Vite middleware at `/api/agents-ui/token` that mints tokens for `LiveAgentSessionProvider`
`api/agents-ui/token.ts` (new)	Vercel serverless function serving the same `/api/agents-ui/token` route, so it also works on the deployed preview (the Vite middleware only runs under `storybook dev`, not the static `storybook build` Vercel deploys)
`.env.example`	Documents `VITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID` (sandbox) alongside `LIVEKIT_URL`/`LIVEKIT_API_KEY`/`LIVEKIT_API_SECRET`/`AGENT_NAME` (live)

Testing

/story/agents-ui-agentchattranscript--default
/story/agents-ui-agentchattranscript--inject-messages
- Click the send button repeatedly
/story/agents-ui-agentsessionview-01--default
All other agents-ui-* stories — confirm they still connect via the shared sandbox, unaffected.

🤖 Generated with Claude Code

changeset-bot · 2026-07-22T19:11:41Z

⚠️ No Changeset found

Latest commit: 5b3bbfb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2026-07-22T19:11:42Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
components-js-storybook-5kld	Ready	Preview, Comment	Jul 23, 2026 12:38am

github-actions · 2026-07-22T19:12:45Z

size-limit report 📦

Path	Size
LiveKitRoom only	7.89 KB (0%)
LiveKitRoom with VideoConference	32.52 KB (0%)
All exports	44.13 KB (0%)

…ranscript Adds autoScroll/scrollAnchor props to AgentChatTranscript for configurable scroll behavior, replaces the AnimatePresence thinking indicator with a Marker component, and fixes the transcript container layout in AgentSessionView_01 so it fills the available area with absolute inset-x-0. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Adds a story with a button that appends a new message on each click, alternating between agent and user, to make it easy to visually verify scroll-anchor and auto-scroll behavior with a growing transcript. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…it agent dispatch Replaces the sandbox-token-server-based AgentSessionProvider with a Storybook dev-only Vite middleware (/api/agents-ui/token) that mints tokens from LIVEKIT_URL/LIVEKIT_API_KEY/LIVEKIT_API_SECRET and optionally dispatches a named agent via AGENT_NAME, so stories can run against a real local LiveKit project instead of the shared sandbox. Drops the mocked WithConversation story in favor of exercising the real session. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Splits AgentSessionProvider into two decorators: the default AgentSessionProvider goes back to the shared sandbox token server (dummy session, no local setup required) for every story except AgentSessionView-01, which now uses a new LiveAgentSessionProvider that hits the local /api/agents-ui/token dev route and dispatches AGENT_NAME against a real LiveKit project. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

…en route The /api/agents-ui/token route only existed as a Vite dev-server-only middleware, so it 404'd on the deployed Vercel preview (storybook build produces a static site with no Node server). Adds a Vercel serverless function at the same path with its own copy of the token-minting logic, gated on VERCEL_ENV !== 'production' so it works locally and on Preview but refuses to run on a real Production deployment. Also cleans up main.js's response helpers and consolidates AccessToken/RoomAgentDispatch/ RoomConfiguration imports onto livekit-server-sdk to avoid a duplicate @livekit/protocol version in the dependency tree. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

thomasyuill-livekit · 2026-07-23T00:49:50Z

@1egoman Re-requesting your review because there's been some iteration on stroybook preview so we can test /story/agents-ui-agentsessionview-01--default with a real agent (I used the homepage demo agent)

thomasyuill-livekit · 2026-07-23T00:52:24Z

Note this becomes a Vercel Serverless Function

thomasyuill-livekit · 2026-07-23T00:53:12Z

+  if (process.env.VERCEL_ENV === 'production') {
+    sendResponse(
+      res,
+      500,
+      'THIS API ROUTE IS INSECURE. DO NOT USE THIS ROUTE IN PRODUCTION WITHOUT AN AUTHENTICATION LAYER.',
+      false,
+    );
+    return;
+  }


I don't think this is necessary

1egoman · 2026-07-23T13:18:37Z

+  try {
+    const LIVEKIT_URL = process.env.LIVEKIT_URL;
+    const API_KEY = process.env.LIVEKIT_API_KEY;
+    const API_SECRET = process.env.LIVEKIT_API_SECRET;
+    const AGENT_NAME = process.env.AGENT_NAME;
+
+    if (LIVEKIT_URL === undefined || LIVEKIT_URL === '') {
+      throw new Error('LIVEKIT_URL is not defined');
+    }
+    if (API_KEY === undefined || API_KEY === '') {
+      throw new Error('LIVEKIT_API_KEY is not defined');
+    }
+    if (API_SECRET === undefined || API_SECRET === '') {
+      throw new Error('LIVEKIT_API_SECRET is not defined');
+    }
+
+    const participantName = 'user';
+    const participantIdentity = `voice_assistant_user_${Math.floor(Math.random() * 10_000)}`;


nitpick: I wonder if you could refactor this to use a shared utility function which has the "core" of this endpoint and is used in both places, so that if updates are made to this in the future one copy couldn't be accidentally missed.

thomasyuill-livekit requested review from 1egoman and lukasIO as code owners July 22, 2026 19:11

vercel Bot had a problem deploying to Preview July 22, 2026 19:11 Failure

thomasyuill-livekit force-pushed the ty/pr-instructions-v1 branch from 58e807c to 0ef18b8 Compare July 22, 2026 19:25

vercel Bot deployed to Preview July 22, 2026 19:26 View deployment

thomasyuill-livekit force-pushed the ty/pr-instructions-v1 branch from 0ef18b8 to 854fec7 Compare July 22, 2026 19:26

vercel Bot deployed to Preview July 22, 2026 19:27 View deployment

thomasyuill-livekit force-pushed the ty/pr-instructions-v1 branch from 854fec7 to ed439a1 Compare July 22, 2026 19:43

vercel Bot deployed to Preview July 22, 2026 19:44 View deployment

1egoman approved these changes Jul 22, 2026

View reviewed changes

thomasyuill-livekit and others added 3 commits July 22, 2026 17:08

adding new chat-transcript story

6ae0cf5

format ui components

4606963

vercel Bot deployed to Preview July 22, 2026 22:10 View deployment

vercel Bot deployed to Preview July 22, 2026 22:32 View deployment

vercel Bot deployed to Preview July 23, 2026 00:38 View deployment

thomasyuill-livekit changed the title ~~feat(shadcn): improve chat transcript scroll anchoring and layout~~ feat(shadcn): improve chat transcript UX + live agent session on preview Jul 23, 2026

thomasyuill-livekit requested a review from 1egoman July 23, 2026 00:48

thomasyuill-livekit commented Jul 23, 2026

View reviewed changes

thomasyuill-livekit self-assigned this Jul 23, 2026

1egoman approved these changes Jul 23, 2026

View reviewed changes

thomasyuill-livekit merged commit b6893b1 into main Jul 23, 2026
5 checks passed

thomasyuill-livekit deleted the ty/pr-instructions-v1 branch July 23, 2026 13:28

thomasyuill-livekit mentioned this pull request Jul 23, 2026

refactor(shadcn): share agent token logic between Vercel route and dev server #1395

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(shadcn): improve chat transcript UX + live agent session on preview#1394

feat(shadcn): improve chat transcript UX + live agent session on preview#1394
thomasyuill-livekit merged 7 commits into
mainfrom
ty/pr-instructions-v1

thomasyuill-livekit commented Jul 22, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Jul 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 22, 2026

Uh oh!

thomasyuill-livekit commented Jul 23, 2026

Uh oh!

thomasyuill-livekit Jul 23, 2026

Uh oh!

thomasyuill-livekit Jul 23, 2026

Uh oh!

1egoman Jul 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

thomasyuill-livekit commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

Overview

Summary of changes

Testing

Uh oh!

changeset-bot Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel Bot commented Jul 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 22, 2026

size-limit report 📦

Uh oh!

thomasyuill-livekit commented Jul 23, 2026

Uh oh!

thomasyuill-livekit Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

thomasyuill-livekit Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

1egoman Jul 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

thomasyuill-livekit commented Jul 22, 2026 •

edited

Loading

changeset-bot Bot commented Jul 22, 2026 •

edited

Loading

vercel Bot commented Jul 22, 2026 •

edited

Loading