Integration Catalog

npm install @membranehq/react

import { MembraneProvider } from '@membranehq/react'

export function MyApp() {
  return (
    <MembraneProvider fetchToken={fetchToken}>
      <YourApp />
    </MembraneProvider>
  )
}

import { useIntegrations, useConnections, useMembrane } from '@membranehq/react'
import { useMemo } from 'react'

function IntegrationsPage() {
  const membrane = useMembrane()
  const { items: integrations, loading: integrationsLoading } = useIntegrations()
  const { items: connections, loading: connectionsLoading } = useConnections()

  // Split integrations into connected vs available
  const connectedIntegrationIds = useMemo(() => new Set(connections?.map((c) => c.integrationId)), [connections])
  const availableIntegrations = useMemo(
    () => integrations?.filter((i) => !connectedIntegrationIds.has(i.id)),
    [integrations, connectedIntegrationIds],
  )

  if (integrationsLoading || connectionsLoading) return <div>Loading...</div>

  return (
    <div>
      {/* Section 1: Connected accounts */}
      <h2>Your Connections</h2>
      {connections?.length === 0 && <p>No connections yet.</p>}
      {connections?.map((connection) => (
        <div key={connection.id}>
          <span>{connection.name}</span>
          {connection.disconnected ? (
            <button onClick={() => membrane.ui.connect({ connectionId: connection.id })}>Reconnect</button>
          ) : (
            <button onClick={() => membrane.connection(connection.id).archive()}>Disconnect</button>
          )}
        </div>
      ))}

      {/* Section 2: Available apps to connect */}
      <h2>Available Integrations</h2>
      {availableIntegrations?.map((integration) => (
        <div key={integration.key}>
          <img src={integration.logoUri} alt='' width={24} />
          <span>{integration.name}</span>
          <button onClick={() => membrane.ui.connect({ integrationKey: integration.key })}>Connect</button>
        </div>
      ))}
    </div>
  )
}

npm install @membranehq/sdk

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
  },
})

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

// List current tenant's connections
const connections = await membrane.connections.find()

// Connect to an app (opens popup)
await membrane.ui.connect({ integrationKey: 'hubspot' })

// Reconnect a disconnected connection
await membrane.ui.connect({ connectionId: 'con_abc123' })

// Disconnect
await membrane.connection('con_abc123').archive()

GET https://api.getmembrane.com/integrations
Authorization: Bearer {TOKEN}

GET https://api.getmembrane.com/connections
Authorization: Bearer {TOKEN}

https://ui.getmembrane.com/embed/integrations/{INTEGRATION_KEY}/connect?token={TOKEN}

https://ui.getmembrane.com/embed/connections/{CONNECTION_ID}/refresh?token={TOKEN}