Skip to main content
Membrane provides a pre-built Connect UI for creating and managing connections inside your app. It lives in the JavaScript SDK.

​
Install

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. 
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: 
const connection = await membrane.ui.connect({ intent: 'Connect to a Custom App (https://custo.mydomain.com)' })

​
Options

OptionDescription
intentDescribe what you want to connect to — Membrane finds the right app
integrationKeyConnect to a specific integration by key
integrationIdConnect to a specific integration by ID
connectorIdConnect using a specific connector (without integration)
connectorKeyConnect using a specific connector by key (without integration)
externalAppIdConnect using a specific external app by ID
externalAppKeyConnect using a specific external app by key
connectionIdReconnect or update an existing connection
namePre-set a custom name for the connection
connectorParametersCustom connector parameters (e.g., OAuth scopes)
authOptionKeySelect a specific authentication method
allowMultipleConnectionsAlways 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. 
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 and the Integration Catalog guide.