← Examples

Inline React

Agent panel mounted inline in the page. All component styling is built-in via data-dg-agent — you only provide the container.

Code

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

<AgentProvider config={config}>
  <div className="agent-panel" data-dg-agent data-dg-scheme="dark">
    <AgentConversation />
    <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 10 }}>
      <AgentTextInput />
      <AgentStartButton />
    </div>
  </div>
</AgentProvider>