← Examples

Floating FAB React

Click the mic button in the corner to open the agent panel. Built with @deepgram/agent-react-ui components.

Code

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

<button className="agent-fab" onClick={toggle}>🎙</button>
{open && (
  <AgentProvider config={config}>
    <div className="agent-floating" data-dg-agent data-dg-scheme="dark">
      <AgentConversation />
      <div style={{ padding: 12, display: "flex", flexDirection: "column", gap: 10 }}>
        <AgentTextInput />
        <AgentStartButton />
      </div>
    </div>
  </AgentProvider>
)}