← Examples

Standalone Card React UI

All components from @deepgram/agent-react-ui. You provide the container — components style themselves via data-dg-agent CSS variables.

Code

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

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