> ## 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.

# Components Reference

> Web SDK React components, props, and usage examples

This section provides a detailed reference for all React components available in the Suki Web SDK.

## SukiAssistant component

The `SukiAssistant` is the main UI component that renders the Suki Assistant interface within your React application. It manages the **display** and **interaction** for ambient sessions.

The code snippet below shows how to use the `SukiAssistant` component to render the Suki Assistant interface within your React application.

```jsx React theme={"theme":{"light":"github-dark","dark":"material-theme-darker"}}
import { SukiAssistant, SukiProvider } from '@suki-sdk/react';

function App() {
  return (
    <SukiProvider>
      <SukiAssistant
        // props
      />
    </SukiProvider>
  );
}
```

### Available props

<Expandable title="available props" defaultOpen="true">
  <ResponseField name="ambientOptions" type="AmbientOptions" required={false}>
    Configuration options for ambient session functionality, including note sections and problem-based charting settings. Refer to the [AmbientOptions](/web-sdk/api-reference/types/ambient-options) page for more information.
  </ResponseField>

  <ResponseField name="encounter" type="Encounter" required>
    Full [`Encounter`](/web-sdk/api-reference/types/encounter) payload. **`patient.identifier`** is required. **`encounter.identifier`** is optional. Each value must be **at most 36 characters** (<Tooltip tip="VARCHAR is a variable-length SQL string type. varchar(36) caps these identifiers at 36 characters. See the Glossary." cta="View in Glossary" href="/Glossary/v#varchar-36">varchar(36)</Tooltip>) when present.
  </ResponseField>

  <ResponseField name="onClose" type="() => void" required={false}>
    Callback function invoked when the SDK's close button is clicked. This prop is only available and functional when `uiOptions.showCloseButton` is not explicitly set to `false`. Refer to the [UIOptions](/web-sdk/api-reference/types/ui-options) page for more information.
  </ResponseField>

  <ResponseField name="uiOptions" type="UIOptions" required={false}>
    UI configuration options for the SDK, controlling the visibility and functionality of various interface elements like buttons and editing features. Refer to the [UIOptions](/web-sdk/api-reference/types/ui-options) page for more information.
  </ResponseField>

  <ResponseField name="onNoteSubmit" type="(data: NoteSubmitData) => void" required={false}>
    Callback function when a note is submitted. Refer to [emitter events](/web-sdk/api-reference/types/emitter-events#param-note-submission-success) page for more information.
  </ResponseField>
</Expandable>

### Type safety for onClose prop

The `SukiAssistant` component employs conditional typing to ensure type safety for the `onClose` prop, which is dynamically determined by the `uiOptions.showCloseButton` configuration:

<Expandable title="type safety for onClose prop" defaultOpen="true">
  <ResponseField name="When uiOptions.showCloseButton is false" type="Info">
    The `onClose` prop is not available for use.
  </ResponseField>

  <ResponseField name="When uiOptions.showCloseButton is true or undefined" type="Info">
    The `onClose` prop is optional and can be provided.
  </ResponseField>
</Expandable>

## Next steps

<Icon icon="file-lines" iconType="solid" /> Refer to the [Examples section](/web-sdk/examples/basic-usage) to learn more about how to use the Web SDK in your application.