> ## Documentation Index
> Fetch the complete documentation index at: https://developer.suki.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Full Code Example

> Full code example for useAmbientSession recording controls, plus Headless Ambient tutorials and next steps

The following example shows how to build a recording interface with `start`, `pause`, `resume`, and `submit` controls. The UI updates based on `sessionStatus` to show the appropriate buttons at each stage. Pass `selectedMicrophoneId` when you want a specific microphone. Leave it out to use the browser default.

```tsx React expandable theme={"theme":{"light":"one-light","dark":"material-theme-darker"}}
import { useAmbientSession } from '@suki-sdk/platform-react';

export const Recorder = ({
  sessionId,
  selectedMicrophoneId, // [!code ++] New in v0.3.1
}) => {
  const {
    start,
    pause,
    resume,
    submit,
    sessionStatus,
    sessionType, // [!code ++] New in v0.2.2
    setSessionContext
  } = useAmbientSession({
    ambientSessionId: sessionId,
    config: selectedMicrophoneId // [!code ++:3] New in v0.3.1
      ? { audio: { deviceId: selectedMicrophoneId } }
      : undefined,
    onAudioChunkAvailable: (chunk) => {
      // Optional: Pass chunk to a waveform visualizer
      drawWaveform(chunk);
    }
  });

  // Set context immediately after starting for better note quality
  const handleStart = async () => {
    await start();
    // Send patient and visit context to improve note generation
    await setSessionContext({
      patient: {
        patient_id: '905c2521-25eb-4324-9978-724636df3436',
        name: {
          use: 'official',
          family: 'Doe',
          given: ['John'],
        },
        dob: '1980-01-15',
        sex: 'M'
      },
      provider: {
        specialty: 'FAMILY_MEDICINE',
        role: 'Attending Physician'
      },
      visit: {
        visit_type: 'Follow-up',
        encounter_type: 'Office Visit',
        reason_for_visit: 'Chest pain evaluation',
        chief_complaint: 'Chest pain'
      }
    });
  };

  return (
    <div className="recorder-controls">
      <h3>Status: {sessionStatus}</h3>
      {sessionType === 'offline' && ( // [!code ++:2] added in v0.2.2
        <p className="offline-indicator">Session will sync when online</p>
      )}

      <div className="button-group">
        {/* Start Button */}
        {sessionStatus === 'created' && (
          <button onClick={handleStart}>Start Recording</button>
        )}

        {/* Pause/Resume Toggles - Add your own state tracking for recording/paused */}
        <button onClick={pause}>Pause</button>
        <button onClick={resume}>Resume</button>

        {/* Finalize Button */}
        <button onClick={submit}>
          Finish & Submit
        </button>
      </div>
    </div>
  );
};
```

<Tip>
  Always call `setSessionContext` to provide patient and encounter details. This context helps the AI understand the clinical scenario and generates significantly higher quality clinical notes.
</Tip>

## Available tutorials

<div className="hp-io-method-grid tut-hub-card-grid">
  <a className="hp-io-method-card tut-hub-method-card" href="/documentation/tutorials/headless-ambient-hooks">
    <div className="tut-hub-card-media" aria-hidden="true" />

    <div className="hp-io-method-card-body">
      <span className="hp-wn-badge hp-wn-badge-new">Headless Web SDK</span>
      <h3 className="hp-io-method-card-title">Build a Headless Ambient Recorder</h3>

      <p className="hp-io-method-card-desc">
        Use Headless hooks to sign in, create an ambient session, and control recording in a custom React UI.
      </p>

      <div className="hp-io-method-card-meta tut-hub-card-foot" aria-label="20 min, Intermediate">
        <div className="tut-hub-card-foot-meta">
          <span className="hp-io-method-card-meta-time">20 min</span>
          <span className="tut-hub-level">Intermediate</span>
        </div>
      </div>
    </div>
  </a>
</div>

## Next steps

<Icon icon="file-lines" iconType="solid" /> Learn production pause and submit patterns in [Session integration patterns](/headless-web-sdk/guides/integration-patterns).

<Icon icon="file-lines" iconType="solid" /> Call `startAmbientSession` and `resumeAmbientSession` with microphone options in [Platform client and provider](/headless-web-sdk/api-reference/platform-client#startambientsession).

<Icon icon="file-lines" iconType="solid" /> Learn how to handle errors in the [Error handling guide](/headless-web-sdk/guides/error-handling).

<Icon icon="file-lines" iconType="solid" /> Refer to [Handle ambient session conflicts](/headless-web-sdk/guides/handle-ambient-session-conflicts) and [Read shared ambient notes](/headless-web-sdk/guides/read-shared-ambient-notes) for remote conflict handling, remote session end handling, and shared note reads.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.