> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getmembrane.com/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 |
| `allowMultipleConnections` | Always create a new connection instead of reusing the existing one |
| `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.


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