> ## 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.

# Custom Integrations Catalog UI

# UI for Managing Connections

*Display the list of integrations, connect and disconnect external apps, configure connections.*

## List Integrations

Your integration experience likely starts with a list of integrations your user can enable.

To get this list, use the following code:

```javascript theme={null}
const { items: integrations } = await membrane.integrations.find()
```

Integrations that already have a Connection created will have a `connection` property.\
You can use it to indicate that the integration is already connected.

You can manage the list of available integrations on the [Integrations](/reference/workspace-elements/connectors) page.

## List Connections

If you want to list all the connections a user has created without listing all the available integrations, do this:

```javascript theme={null}
const { items: connections } = await membrane.connections.find()
```

<br />

## Connect

To connect a user's account in a specific third-party app, call this method:

```javascript theme={null}
await membrane.integration('hubspot').openNewConnection()
```

<br />

Or if you want to create your own authentication UI, check out this guide: [Custom Connection UI](/docs/ways-to-use-membrane/embedded-ui/connection-ui/custom-connection-ui)

## Disconnect

To disconnect a specific connection, call this method:

```javascript theme={null}
await membrane.connection('hubspot').archive()
```

<br />

## Next Steps

<Columns cols={2}>
  <Card title="Custom Connection" href="/docs/ways-to-use-membrane/embedded-ui/connection-ui/custom-connection-ui" target="_blank">
    Building "Connect" UI that fully blends into your app
  </Card>

  <Card title="Custom Flows" href="/reference/workspace-elements/flows/flow-ui/custom-flow-ui" target="_blank">
    Managing tenant flows instances from inside your application.
  </Card>

  <Card title="Custom Actions" href="/docs/how-membrane-works/actions" target="_blank">
    Running authenticated work in connected apps.
  </Card>

  <Card title="Custom Field Mapping UI" href="/reference/workspace-elements/field-mappings/field-mapping-instances" target="_blank">
    Letting your users map fields between your app and external apps.
  </Card>
</Columns>