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

# UI SDKs

> Build your own MeshAgent UI with the React and Flutter SDK packages.

MeshAgent UI SDKs are for building your own application on top of MeshAgent rooms, documents, and agent interactions.

They are different from [MeshAgent Accounts](../interfaces/accounts), [MeshAgent Studio](../interfaces/meshagent_studio), and [Powerboards](../interfaces/powerboards). Those are product interfaces. The UI SDKs are developer packages you use inside your own app.

## What exists today

* **React**
  * `@meshagent/meshagent-react` for room and document connection hooks, chat helpers, toolkits, and file upload helpers
  * `@meshagent/meshagent-ts-auth` for framework-agnostic OAuth/PKCE login, token storage, and refresh helpers
  * `@meshagent/meshagent-react-auth` for React auth helpers built on top of the TypeScript auth package, including `useAuth` and `useEnsureLogin`
* **Flutter**
  * `meshagent_flutter` for room and document connection widgets and related helpers
  * `meshagent_flutter_auth` for auth helpers
  * `meshagent_flutter_widgets` for higher-level Flutter widgets

## Core building blocks

The two most important primitives are:

* **Room connections**: establish and hold a `RoomClient` connection inside your app
* **Document connections**: open a room document and keep it in sync while your UI is mounted

Those patterns exist in both React and Flutter:

* React exports hooks such as `useRoomConnection` and `useDocumentConnection`
* Flutter exports widgets such as `RoomConnectionScope` and `DocumentConnectionScope`

## How to use this section

1. Start with [Room Connections](./room_connection_scope) to connect your app to a room.
2. Use [Document Connections](./document_connection_scope) when your UI needs a live room document.
3. Use the [Room API](../room_api/overview) docs for the runtime capabilities available after the connection is established.

## Which package to pick

* Use **React** when you are building a web app and want hooks around the MeshAgent JS client.
* Add **`@meshagent/meshagent-ts-auth`** when you want provider-agnostic auth helpers outside React.
* Add **`@meshagent/meshagent-react-auth`** when your React app should handle OAuth login, callback exchange, token refresh, and profile loading with hooks.
* Use **Flutter** when you want one codebase across mobile, desktop, or embedded form factors.

In both cases, the app model is the same: your backend mints a participant token, your UI connects to a room with that token, and then your UI uses the room runtime from there.

For the broader cross-language SDK map, see [SDK Overview](../reference/sdk_reference).