Quick Start
Start building your product integrations using Membrane.
The fastest way to start working with Membrane is by telling Membrane Agent what you want to build.
1. Describe what you want to build
Go to the Membrane Console and type what you want to build:
You can either choose one of the pre-built Packages to start with or create a new one from scratch. The Membrane Agent will start working on building what you asked.
Agent will guide you through testing the result, including creation of a test account in one of the relevant apps.
2. Connect your app or agent to Membrane
After you validated that integrations work on Membrane side, it is time to add them to your product.
We recommend connecting your code to Membrane with the help of an AI coding agent of your choice: it can quickly find the right SDK and figure out how to plug it into your code - just follow the Connecting Dev Environment and/or Connecting Coding Agents guides.
If you want to understand how things work step by step, read on.
Create Authentication Token
To interact with Membrane, you need to use an Authentication Token
To generate it, you need Workspace Key and Workspace Secret. You can find them in your workspace settings.
import jwt from "jsonwebtoken"
// Your workspace key and secret.
// You can find them on the Settings page.
const WORKSPACE_KEY = "<WORKSPACE_KEY>"
const WORKSPACE_SECRET = "<WORKSPACE_SECRET>"
const tokenData = {
// Identifier of your customer (user, team, or organization).
id: "{CUSTOMER_ID}",
// Human-readable customer name.
name: "{CUSTOMER_NAME}",
// (optional) Any user fields you want to attach to your customer.
fields: {
userField: "<user field value>",
},
}
const options = {
issuer: WORKSPACE_KEY,
// To prevent token from being used for too long
expiresIn: 7200,
// HS256 signing algorithm is used by default,
// but we recommend to go with more secure option like HS512.
algorithm: "HS512",
}
const token = jwt.sign(tokenData, WORKSPACE_SECRET, options)import datetime
import jwt
# Your workspace key and secret.
# You can find them on the Settings page.
WORKSPACE_KEY = "<WORKSPACE_KEY>"
WORKSPACE_SECRET = "<WORKSPACE_SECRET>"
encoded_jwt = jwt.encode(
{
# ID of your customer in your system.
# It will be used to identify customer in Integration.app
"id": "{CUSTOMER_ID}",
# Human-readable name (it will simplify troubleshooting)
"name": "{CUSTOMER_NAME}",
"iss": WORKSPACE_KEY,
# Any customer fields you want to attach to your user.
"fields": {
"field1": "<field value>"
}
"exp": datetime.datetime.now() + datetime.timedelta(seconds=1440)
}, WORKSPACE_SECRET, algorithm="HS256")import (
"time"
"github.com/dgrijalva/jwt-go"
)
var WORKSPACE_KEY = "<WORKSPACE_KEY>"
var WORKSPACE_SECRET = "<WORKSPACE_SECRET>"
var SigningKey = []byte(WORKSPACE_SECRET)
claims := jwt.MapClaims{
// Identifier of your customer (user, team, or organization).
"id" : "{CUSTOMER_ID}",
// Human-readable customer name.
"name": "{CUSTOMER_NAME}",
// To prevent token from being used for too long
"exp": time.Now().Add(time.Hour * 24).Unix(),
"iss": WORKSPACE_KEY,
}
token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
tokenString, err := token.SignedString(SigningKey)require 'jwt'
WORKSPACE_SECRET = '<WORKSPACE_KEY>'
WORKSPACE_KEY = '<WORKSPACE_SECRET>'
payload = {
id: '{CUSTOMER_ID}',
name: '{CUSTOMER_NAME}',
iss: WORKSPACE_KEY,
exp: Time.now.to_i + 60 * 60 * 6, # Expiration time (6 hours from now)
}
token = JWT.encode(payload, WORKSPACE_SECRET, 'HS256')import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import javax.crypto.spec.SecretKeySpec;
import java.time.temporal.ChronoUnit;
import java.util.Date;
String workspaceKey = "<WORKSPACE_KEY>";
String workspaceSecret = "<WORKSPACE_SECRET>";
String jwtToken = Jwts.builder()
.claim("id", "{CUSTOMER_ID}") // Identifier of user or organization.
.claim("name", "{CUSTOMER_NAME}") // Human-readable name (it will simplify troubleshooting)
// .claim("fields", <user fields value>) (optional) Any user fields you want to attach to your user.
.setExpiration(Date.from(new Date().toInstant().plus(14400, ChronoUnit.SECONDS))) // To prevent token from being used for too long
.setIssuer(workspaceKey)
.signWith(new SecretKeySpec(workspaceSecret.getBytes(), SignatureAlgorithm.HS256.getJcaName()), SignatureAlgorithm.HS256)
.setHeaderParam("typ", "JWT")
.compact();use FirebaseJWTJWT;
// Your workspace key and secret.
// You can find them on the Settings page.
$secret = '<WORKSPACE_KEY>';
$key = '<WORKSPACE_SECRET>';
$payload = [
'id' => "{CUSTOMER_ID}", // ID of your customer in your system. It will be used to identify customer in Integration.app
'name' => "{CUSTOMER_NAME}", // Human-readable customer name (it will simplify troubleshooting)
'iss' => $key,
'exp' => time() + 60 * 60 * 24 * 60, // To prevent token from being used for too long
];
$token = JWT::encode($payload, $secret, 'HS256');This token includes CUSTOMER_ID and CUSTOMER_NAME which are unique id and name of the current customer of your product. It can be a current user, organization, team, or any other entity you want to associate integrations with.
Always generate authentication token on your backend and never on the front-end. The workspace secret used to generate the token cannot be shared.
See more details on authentication tokens here: Authentication.
Create a Connection
To connect an external app, you need to display a Connection UI in your front-end.
Set up a front-end SDK
To connect your customer accounts and use integrations from your front-end, you need to install an SDK. You can choose from one of these options:
React
Add our React package to start building your integration UI
Vue.js
Use Vue.js with our Javascript SDK to start building your integration UI
JavaScript SDK
Use Membrane in your app's front-end
Display a Connection UI
To start interacting with external apps on behalf of your customer, you need to create a Connection.
The simplest way to display a connection UI is to use .open() method of the Membrane SDK:
membrane.open()This pre-built UI is a good place to start. To build your own fully custom connection UI, check these guides:
Add and connect an External App
To make apps appear in this UI, you need to add them to your workspace.
See External Apps for details on how to do it. After you add an app, it will appear in your connection UI. After you click on it in the connection UI and go through the authentication process, a Connection object will be created.
Congratulations! Your app can now interact with external apps through Membrane.
Add Membrane Elements to Your App
After you created UI and logic for connecting external app, you can start using Membrane elements in your product. The way to do it fully depends on the elements you end up building. To find a guide for a specific element (or a full Package), click "Add to my app" button on the element's page in Console.
Updated 15 days ago
