Quickstart: Product Integrations

Build integration features into your product so your tenants can connect their apps, sync data, and automate workflows.

With a Coding Agent (Recommended)

The fastest way to build product integrations is with your coding agent.

1. Install Membrane skills

npx skills add membranehq/agent-skills --skill integrate-anything
npx skills add membranehq/agent-skills --skill build-product-integrations

2. Prompt your agent

Ask your agent to build the integration features you need:

"Build an integrations page where my tenants can connect to HubSpot, Salesforce, and Slack. Use the Membrane React SDK."

"Add a data sync that imports contacts from connected CRMs into our database."

"Give our AI assistant tools from our tenants' connected apps."

The agent will use Membrane's tools to configure the integrations and implement the UI and backend code.

3. Configure integrations in the Console

Use the Membrane Console to fine-tune integrations, test connections, and configure actions for each app.

Manual Setup

If you prefer to set things up without a coding agent, follow these steps:

1. Create integrations in the Console

Go to the Membrane Console and add the apps your tenants will connect to.

2. Install the SDK

npm install @membranehq/sdk

For React apps: npm install @membranehq/react

3. Generate an authentication token

Create a backend endpoint that generates JWT tokens for your tenants:

import jwt from 'jsonwebtoken'

const token = jwt.sign(
  { id: tenantId, name: tenantName },
  process.env.MEMBRANE_WORKSPACE_SECRET,
  {
    issuer: process.env.MEMBRANE_WORKSPACE_KEY,
    expiresIn: 7200,
    algorithm: 'HS512',
  }
)

Get your workspace key and secret from Settings. See Authentication for all languages.

4. Initialize the client

import { MembraneClient } from '@membranehq/sdk'

const membrane = new MembraneClient({
  fetchToken: async () => {
    const response = await fetch('/api/membrane-token')
    const { token } = await response.json()
    return token
  },
})

5. Let tenants connect apps

List available integrations and open the connection UI for your tenants:

// List available integrations
const integrations = await membrane.integrations.find()

// List existing connections
const connections = await membrane.connections.find()

// Open connection UI for an integration
await membrane.integration('hubspot').openNewConnection()

// Or connect via a connector (for tenant-level connections)
await membrane.ui.connect({ connectorId })

6. Use the connection

Once connected, your tenants can run actions and subscribe to events on the connected app. See Actions and Events for details.