← Examples

Sidebar React

Agent panel slides in from the right. Components from @deepgram/agent-react-ui handle all styling via data-dg-agent.

Code

import {
  AgentProvider, AgentStatus, AgentConversation,
  AgentTextInput, AgentMicrophoneButton,
  AgentSpeakerButton, AgentStartButton,
} from '@deepgram/agent-react-ui';

<AgentProvider config={config}>
  <div className="agent-sidebar" data-dg-agent data-dg-scheme="dark">
    <div style={{ padding: "14px 16px", display: "flex", gap: 10 }}>
      <span style={{ fontWeight: 600, flex: 1 }}>Agent</span>
      <AgentStatus />
    </div>
    <AgentConversation />
    <div style={{ padding: "12px 16px", display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ display: "flex", gap: 8 }}>
        <AgentTextInput />
        <AgentMicrophoneButton />
        <AgentSpeakerButton />
      </div>
      <AgentStartButton />
    </div>
  </div>
</AgentProvider>