Pipedream Connect provides APIs to embed pre-built tools (triggers and actions) directly in your application or AI agent, enabling access to 10,000+ built-in API operations. Enable your end users to configure, deploy, and invoke Pipedream triggers and actions for more than + APIs.

​
What are triggers and actions?

In Pipedream, we call triggers and actions components, which are self-contained executable units of code. Your end users configure the inputs and these components produce a result that’s exported as output. These components are developed and maintained by Pipedream and our community and their source code is available in our public Github repo.
Check out the SDK playground to see the SDK in action. You can also run it locally and explore the code.

​
Implementation

You have two options for implementing Connect components in your application:
  1. Use the pipedream backend SDK with your own frontend
  2. Use the connect-react frontend SDK with Pipedream’s pre-built frontend components

​
Backend SDK

Use the Pipedream server SDK to handle all Connect operations on your backend, then build your own frontend UI. This gives you full control over the user experience. 
import { PipedreamClient } from '@pipedream/sdk';

// Initialize with OAuth credentials
const client = new PipedreamClient({
  projectEnvironment: "development",
  clientId: process.env.PIPEDREAM_CLIENT_ID,
  clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,
  projectId: process.env.PIPEDREAM_PROJECT_ID,
});

// Run a pre-built action on behalf of your user
const result = await client.actions.run({
  id: "slack-send-message-to-channel",
  externalUserId: "user-123", 
  configuredProps: {
    slack: {
      authProvisionId: "apn_abc123", // User's connected account
    },
    channel: "#general",
    text: "Hello from my app!",
  },
});

​
Connect React SDK

Use Pipedream’s pre-built React components to abstract the complexity of building a frontend form interface. 
"use server";
import { PipedreamClient } from "@pipedream/sdk";

const client = new PipedreamClient({
  projectEnvironment: "development", // or "production"
  projectId: process.env.PIPEDREAM_PROJECT_ID,
  clientId: process.env.PIPEDREAM_CLIENT_ID,
  clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,
});

// Generate connect tokens for frontend requests
export async function fetchToken(opts: { externalUserId: string }) {
  return await client.tokens.create({
    externalUserId: opts.externalUserId,
    allowedOrigins: JSON.parse(process.env.PIPEDREAM_ALLOWED_ORIGINS || "[]"),
  });
}

​
Getting started

The following guide walks through using the backend SDK or REST API to manually discover apps, list components, and configure them. If you’re using the Connect React SDK, the ComponentFormContainer handles these steps automatically.
Refer to the Connect API docs for the full API reference. Below is a quickstart with a few specific examples.You can skip steps 1 and 2 if you already know the component you want to use or if you’d prefer to pass a natural language prompt to Pipedream’s component search API.
1

Authenticate to the Pipedream API

Before sending requests to the API, make sure to authenticate using a Pipedream OAuth client:
// Initialize the Pipedream SDK client
 
import { PipedreamClient } from "@pipedream/sdk";
 
const client = new PipedreamClient({
  projectEnvironment: "development | production",
  clientId: "{oauth_client_id}",
  clientSecret: "{oauth_client_secret}",
  projectId: "{your_project_id}"
});
All subsequent examples assume that you’ve either initialized the SDK client or have a valid access token.
2

Find the app you want to use

To find the right trigger or action to configure and run, first find the app. In this example, we’ll search for gitlab.
const apps = await client.apps.list({ q: "gitlab" });
 
// Parse and return the data you need
Here’s the response:
{
  "page_info": {
    "total_count": 1,
    "count": 1,
    "start_cursor": "Z2l0bGFi",
    "end_cursor": "Z2l0bGFi"
  },
  "data": [
    {
      "id": "app_1Z2hw1",
      "name_slug": "gitlab",
      "name": "GitLab",
      "auth_type": "oauth",
      "description": "GitLab is the most comprehensive AI-powered DevSecOps Platform.",
      "img_src": "https://assets.pipedream.net/s.v0/app_1Z2hw1/logo/orig",
      "custom_fields_json": "[{\"name\":\"base_api_url\",\"label\":\"Base API URL\",\"description\":\"The Base API URL defaults to `gitlab.com`. If you are using self-hosted Gitlab, enter your base url here, e.g. `gitlab.example.com`\",\"default\":\"gitlab.com\",\"optional\":null}]",
      "categories": [
        "Developer Tools"
      ],
      "featured_weight": 5000,
      "connect": {
        "proxy_enabled": true,
        "allowed_domains": ["gitlab.com"],
        "base_proxy_target_url": "https://{{custom_fields.base_api_url}}"
      }
    }
  ]
}
3

List the available components for the app

Once you have the app you want to use, now you can list the triggers and/or actions for that app. We’ll list the actions for Gitlab and we’ll pass the name_slug gitlab as the app.
const components = await client.components.list({ q: "gitlab" });
 
// Parse and return the data you need
Here’s the response:
{
  "page_info": {
    "total_count": 20,
    "count": 10,
    "start_cursor": "c2NfbHlpRThkQQ",
    "end_cursor": "c2NfQjVpTkJBTA"
  },
  "data": [
    {
      "name": "List Commits",
      "version": "0.0.2",
      "key": "gitlab_developer_app-list-commits"
    },
    {
      "name": "Update Issue",
      "version": "0.0.1",
      "key": "gitlab_developer_app-update-issue"
    },
    {
      "name": "Update Epic",
      "version": "0.0.1",
      "key": "gitlab_developer_app-update-epic"
    },
    {
      "name": "Search Issues",
      "version": "0.0.1",
      "key": "gitlab_developer_app-search-issues"
    },
    {
      "name": "List Repo Branches",
      "version": "0.0.1",
      "key": "gitlab_developer_app-list-repo-branches"
    },
    {
      "name": "Get Repo Branch",
      "version": "0.0.1",
      "key": "gitlab_developer_app-get-repo-branch"
    },
    {
      "name": "Get Issue",
      "version": "0.0.1",
      "key": "gitlab_developer_app-get-issue"
    },
    {
      "name": "Create issue",
      "version": "0.0.1",
      "key": "gitlab_developer_app-create-issue"
    },
    {
      "name": "Create Epic",
      "version": "0.0.1",
      "key": "gitlab_developer_app-create-epic"
    },
    {
      "name": "Create Branch",
      "version": "0.0.1",
      "key": "gitlab_developer_app-create-branch"
    }
  ]
}
4

Next steps

Now that you’ve found the components you want to use, you can proceed to configure and execute them:
  • For actions: See the Actions guide to learn how to configure props, handle dynamic props, and invoke actions
  • For triggers: See the Triggers guide to learn how to deploy event sources and native triggers
  • Need help?: Check the Troubleshooting guide for common issues and solutions