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

# Embedded UI

Membrane provides a pre-built Connect UI for creating and managing connections inside your app. It lives in the [JavaScript SDK](/docs/ways-to-use-membrane/sdk).

## Install

```bash theme={null}
npm install @membranehq/sdk
```

## Connect UI

Use `membrane.ui.connect()` to open the connection flow. This is the main way to let users connect to external apps from your product.

```javascript theme={null}
const connection = await membrane.ui.connect({ integrationKey: 'hubspot' })
// Returns the connection object, or null if user cancels
```

You can also connect by intent — Membrane will find the right app automatically:

```javascript theme={null}
const connection = await membrane.ui.connect({ intent: 'Connect to a Custom App (https://custo.mydomain.com)' })
```

### Options

| Option                | Description                                                         |
| --------------------- | ------------------------------------------------------------------- |
| `intent`              | Describe what you want to connect to — Membrane finds the right app |
| `integrationKey`      | Connect to a specific integration by key                            |
| `integrationId`       | Connect to a specific integration by ID                             |
| `connectorId`         | Connect using a specific connector (without integration)            |
| `connectorKey`        | Connect using a specific connector by key (without integration)     |
| `externalAppId`       | Connect using a specific external app by ID                         |
| `externalAppKey`      | Connect using a specific external app by key                        |
| `connectionId`        | Reconnect or update an existing connection                          |
| `name`                | Pre-set a custom name for the connection                            |
| `connectorParameters` | Custom connector parameters (e.g., OAuth scopes)                    |
| `authOptionKey`       | Select a specific authentication method                             |
| `theme`               | `'light'`, `'dark'`, or `'auto'` (default: auto-detect from CSS)    |

## Existing Connection UI

Use `membrane.ui.connection()` to open the management UI for an existing connection — shows status, allows reconnection.

```javascript theme={null}
await membrane.ui.connection({ connectionId: 'con_abc123' })
```

## Building a Full Connection Management Experience

For end-to-end connection management in your app (listing, connecting, disconnecting, reconnecting), see [Connection UI](/docs/ways-to-use-membrane/embedded-ui/connection-ui) and the [Integration Catalog](/docs/getting-started/product-integrations/integration-catalog) guide.