[jeffdaley]

Ticket

https://linear.app/livekit/issue/DE-206/agents-ui-add-agentcomposer-text-input-with-microphone

Context / reason for change

Agents UI has no standalone way to type to an agent. The chat input only exists inside AgentControlBar, can't be placed or styled on its own, and loses your text when a message fails.

Agents are increasingly hybrid: you type some turns and speak others. The composer is the text input for that, with the microphone alongside it, so an app can offer both without building its own input.

Summary of changes

• AgentComposer, built from parts (Field, Input, Actions, Microphone, Submit, CharacterCount) plus a headless useAgentComposer hook. It sends through the session's chat by default, or through onSend.
• Clears as soon as you send, so you can type the next message right away. A message that fails goes back in the input, unless something new has been typed, and onError reports the error so the app can show it, such as in a toast. There's no failed state or retry in the transcript; message status waits for the client SDK's upcoming useThreadMessages.
• The microphone is a toggle, not press-and-hold. Turning it on lets the agent hear you, the same as the control bar. Spoken turns don't wait for Send. While it's on, it shows the level and the placeholder reads "Listening…". It shows a spinner while starting and says when access is blocked or there's no microphone.
  • Press-and-hold was ruled out because it's hard to use with assistive tech and on touch screens.
• maxLength counts instead of cutting you off. Typing past the limit is allowed. A "12/200" count sits in a row below the input, turns red when over, and sending waits until the message fits. Emoji and accented letters count once.
• Stop is UI only. With responding and onStop, Send becomes Stop while the input is empty. The SDK has no client interrupt API yet, so the app decides what stopping does.
• Enter sends and Shift+Enter adds a line. On touch screens, Return adds a line. IME composition never sends.
• draftKey keeps unsent text in sessionStorage across reloads. Drafts load after mount, so server-rendered HTML matches.
• Without onSend, the microphone hides when the participant can't publish audio.
• onSubmit can cancel a send with preventDefault, on Enter and on the button alike.
• labels on the composer and the transcript, for rewording and translation.
• icons on the composer replaces the send, stop, and microphone icons, including each microphone state, so they can be swapped without rebuilding the layout.
• AgentControlBar uses the composer for its chat input, without the microphone, since the bar already has one.
• Your own messages render as plain text in the transcript, so line breaks stay as typed. Agent messages still render as Markdown.

Screenshots / demos

To add: a failed send putting the message back; the count over the limit; the microphone listening, pending, and blocked; Stop; light and dark.

How to verify

Run Storybook (pnpm --filter @livekit/component-docs-storybook dev) and open Agents UI / AgentComposer:

• Default: type and send. The input clears right away, and the message appears once it's sent.
• SendFails: send. The message goes back in the input, and onError appears in the Actions panel.
• MaxLength: type past 200 characters. The count turns red and Send disables.
• StopReply: send, then press Stop while the reply is pending.
• MicrophoneBlocked: the mic shows as blocked. Pressing it clears the error and retries.
• Draft: type, reload the page, and the text is still there.
• LiveAgent: needs VITE_PUBLIC_LK_SANDBOX_TOKEN_SERVER_ID in docs/storybook/.env. Type and speak to a real agent.

On a phone, Return should add a new line rather than send.

Submitter checklist

• I ran the change locally and inspected the affected UI/flow myself, if applicable.
• I added or updated tests covering this change (unit, play function, or E2E), or explained why none are needed.
• I attached screenshots or a demo for user-facing changes (ideally before + after), if applicable.
• I self-reviewed the diff and removed debug code, dead code, and stray comments.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
components-js-storybook-5kld	Ready	Preview	Nov 9, 2026 3:25pm UTC

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[changeset-bot]

🦋 Changeset detected

Latest commit: 8aa6171

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@livekit/agents-ui	Minor
@livekit/component-docs-storybook	Patch

Not sure what this means? Click here to learn what changesets are.

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

[github-actions]

size-limit report 📦

Path	Size
LiveKitRoom only	7.88 KB (0%)
LiveKitRoom with VideoConference	32.63 KB (0%)
All exports	44.44 KB (0%)