Skip to main content
Pipedream Connect is the easiest way for your users to connect to over + APIs, right in your product. You can build in-app messaging, CRM syncs, AI agents, and much more, all in a few minutes.

​
Visual overview

Here’s a high-level overview of how Connect works with your app:
Here’s how Connect sits in your frontend and backend, and communicates with Pipedream’s API:

​
Getting started

We’ll walk through these steps below with an interactive demo that lets you see an execute the code directly in the docs.
1

Configure your environment

You’ll need to do two things to add Pipedream Connect to your app:
  1. Connect to the Pipedream API from your server. This lets you make secure calls to the Pipedream API to initiate the account connection flow and retrieve account credentials.
  2. Add the Pipedream SDK to your frontend or redirect your users to a Pipedream-hosted URL to start the account connection flow.
If you’re building your own app, you’ll need to provide these credentials to the environment, or retrieve them from your secrets store:
# Used to authorize requests to the Pipedream API
PIPEDREAM_CLIENT_ID=your_client_id
PIPEDREAM_CLIENT_SECRET=your_client_secret
PIPEDREAM_ENVIRONMENT=development
PIPEDREAM_PROJECT_ID=your_project_id
2

Create a project in Pipedream

  1. Open an existing Pipedream project or create a new one at pipedream.com/projects
  2. Click the Settings tab, then copy your Project ID
3

Create a Pipedream OAuth client

Pipedream uses OAuth to authorize requests to the REST API. To create an OAuth client:
  1. Visit the API settings for your workspace
  2. Create a new OAuth client and note the client ID and secret
You’ll need these when configuring the SDK and making API requests.
4

Generate a short-lived token

To securely initiate account connections for your users, you’ll need to generate a short-lived token for your users and use that in the account connection flow. See the docs on Connect tokens for a general overview of why we need to create tokens and scope them to end users.Check out the code below and try it yourself:
import { PipedreamClient } from "@pipedream/sdk";
 
// This code runs on your server
const client = new PipedreamClient({
  projectEnvironment: "production",
  clientId: process.env.PIPEDREAM_CLIENT_ID,
  clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,
  projectId: process.env.PIPEDREAM_PROJECT_ID
});
 
// Create a token for a specific user
const { token, expiresAt, connectLinkUrl } = await client.tokens.create({
  externalUserId: "YOUR_USER_ID", // Replace with your user's ID
});
Once you have a token, expose an endpoint your frontend can call (the SDK’s tokenCallback will use it) to start the account connection flow for the user, or redirect them to a Pipedream-hosted URL with Connect Link.
Refer to the API docs for full set of parameters you can pass in the ConnectTokenCreate call.
5

Connect your user’s account

You have two options when connecting an account for your user:
  1. Use the Pipedream SDK in your frontend
  2. Use Connect Link to deliver a hosted URL to your user
6

Use the Pipedream SDK in your frontend

Use this method when you want to handle the account connection flow yourself, in your app. For example, you might want to show a Connect Slack button in your app that triggers the account connection flow.First, install the Pipedream SDK in your frontend:
npm i --save @pipedream/sdk
Configure the PipedreamClient with a tokenCallback that calls your backend endpoint to create tokens on demand. When the user connects an account, call connectAccount. The SDK opens a Pipedream iFrame and automatically refreshes tokens as they expire.
If the Connect popup window doesn’t open, try setting Cross-Origin-Opener-Policy (COOP) header to same-origin-allow-popups on the page that embeds the Connect iFrame.The default COOP is unsafe-none; only make this change if you explicitly enforce same-origin. This relaxes isolation just enough to allow trusted popups (e.g., OAuth) to open from iFrames.
Try the interactive demo below to connect an account after generating a token in the previous step:
import { PipedreamClient } from "@pipedream/sdk"

const externalUserId = "{YOUR_USER_ID}" // Same user ID you used when generating tokens on the server

const client = new PipedreamClient({
  projectEnvironment: "production",
  externalUserId,
  tokenCallback: async () => {
    const res = await fetch("/api/connect-token", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ external_user_id: externalUserId }),
    });

    if (!res.ok) throw new Error("Failed to fetch Connect token");
    const { token } = await res.json();
    if (!token) throw new Error("Failed to fetch Connect token");
    return token;
  },
});

// This code runs in the frontend; the SDK fetches tokens from your server
export default function Home() {
  function connectAccount() {
    client.connectAccount({
      app: "google_sheets",
      // oauthAppId: "YOUR_CUSTOM_OAUTH_APP_ID",
      onSuccess: (account) => {
        // Handle successful connection
        console.log(`Account successfully connected: ${account.id}`)
      },
      onError: (err) => {
        // Handle connection error
        console.error(`Connection error: ${err.message}`)
      },
    });
  }

  return (
    <main>
      <button onClick={connectAccount}>Connect Account</button>
    </main>
  )
}
7

Or use Connect Link

Use this option when you can’t execute JavaScript or open an iFrame in your environment (e.g. mobile apps) and instead want to share a URL with your end users.The Connect Link URL opens a Pipedream-hosted page, guiding users through the account connection process. The URL is specific to the user and expires after 4 hours.After generating a token in the step above, you can use the resulting Connect Link URL. Try it below:
Make sure to add the app parameter to the end of the URL to specify the app.Check out the full API docs for all parameters you can pass when creating tokens, including setting redirect URLs for success or error cases.
8

Make authenticated requests

Now that your users have connected an account, you can use their auth in one of a few ways:
  1. Expose 10k+ tools to your AI app or agent and call them on behalf of your customers
  2. Send custom requests to any one of the 2500+ APIs using the Connect API proxy
  3. Use Pipedream’s visual workflow builder to define complex logic to run on behalf of your users
  4. Embed Pipedream components directly in your app to run actions and triggers on their behalf
9

Deploy your app to production

⌘I