Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
c79c48f
first commit [draft]
dannyroosevelt Jan 31, 2025
248d71e
Merge branch 'master' into danny/connect-proxy-docs
dannyroosevelt Jan 31, 2025
a118e02
checking work in; need to add redirects for dir changes
dannyroosevelt Feb 4, 2025
abf0bbe
pnpm-lock
dannyroosevelt Feb 4, 2025
d474c8f
Merge branch 'master' into danny/connect-proxy-docs
dannyroosevelt Feb 4, 2025
1eeebea
More progress, still WIP
dannyroosevelt Feb 4, 2025
fcaed8a
More docs progress
dannyroosevelt Feb 4, 2025
62fc17f
Adding redirects to handle directory changes
dannyroosevelt Feb 4, 2025
1aa8dfc
Fixing broken link refs
dannyroosevelt Feb 4, 2025
99e89f9
Fixing more broken links
dannyroosevelt Feb 4, 2025
a7ab520
Merge branch 'master' into danny/connect-proxy-docs
dannyroosevelt Feb 4, 2025
26df530
Adding some links
dannyroosevelt Feb 4, 2025
bcc30d3
small update to environments page
dannyroosevelt Feb 4, 2025
f4f3859
Fixing bad link
dannyroosevelt Feb 4, 2025
708c073
Adding a couple visuals
dannyroosevelt Feb 5, 2025
b074f4d
Merge branch 'master' into danny/connect-proxy-docs
dannyroosevelt Feb 5, 2025
50d7348
Merge branch 'master' into danny/connect-proxy-docs
dannyroosevelt Feb 5, 2025
7d2696b
Merge branch 'danny/connect-proxy-docs' of github.com:PipedreamHQ/pip…
dannyroosevelt Feb 5, 2025
f975c25
pnpm-lock
dannyroosevelt Feb 6, 2025
c9cd135
more pnpm-lock
dannyroosevelt Feb 6, 2025
b5ba6dc
Updating API doc for proxy
dannyroosevelt Feb 6, 2025
b316870
More updates
dannyroosevelt Feb 6, 2025
6c6683e
connect proxy title
dannyroosevelt Feb 6, 2025
f2836ae
Merge branch 'master' into danny/connect-proxy-docs
dannyroosevelt Feb 6, 2025
bacb102
Adding ref to demo app
dannyroosevelt Feb 6, 2025
34a7510
pnpm-lock
dannyroosevelt Feb 6, 2025
a33f990
Merge branch 'master' into danny/connect-proxy-docs
dannyroosevelt Feb 6, 2025
e6be104
tweaking language for connect-react sdk
dannyroosevelt Feb 6, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs-v2/next.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default withNextra({
TMP_SIZE_LIMIT: "2GB",
DELAY_MIN_MAX_TIME:
"You can pause your workflow for as little as one millisecond, or as long as one year",
PUBLIC_APPS: "2,400",
PUBLIC_APPS: "2,500",
REGISTRY_ACTIONS: "5,300",
REGISTRY_SOURCES: "2,500",
REGISTRY_COMPONENTS: "8,000",
Expand Down
2 changes: 1 addition & 1 deletion docs-v2/pages/_meta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default {
"projects": "Projects",
"workflows": "Workflows",
"connect": {
title: "Pipedream Connect",
title: "Connect",
},
"code": "Code",
"data-stores": "Data Stores",
Expand Down
28 changes: 8 additions & 20 deletions docs-v2/pages/connect/_meta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,23 @@ export default {
"use-cases": {
"title": "Use cases",
},
"quickstart": {
"managed-auth": {
"title": "Managed auth",
},
"workflows": {
"title": "Running workflows",
},
"components": {
"title": "Embedding components",
"title": "Pre-built tools",
},
"api": {
"title": "API & SDK reference",
"api-proxy": {
"title": "API proxy",
},
"tokens": {
"title": "Connect tokens",
"workflows": {
"title": "Workflows",
},
"environments": {
"title": "Environments",
},
"oauth-clients": {
"title": "OAuth clients",
},
"webhooks": {
"title": "Webhooks",
},
"connect-link": {
"title": "Connect Link",
},
"customize-your-app": {
"title": "Customize your app",
"api": {
"title": "API & SDK reference",
},
"troubleshooting": {
"title": "Troubleshooting",
Expand Down
123 changes: 123 additions & 0 deletions docs-v2/pages/connect/api-proxy.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import { Tabs } from 'nextra/components'
import Callout from '@/components/Callout'

# Connect API Proxy

Pipedream Connect provides a proxy API that you can use to send authenticated requests to any integrated API on behalf of your users, which is useful in a few scenarios:

1. You need code-level control and you want to use [Pipedream's OAuth](/connect/managed-auth/oauth-clients#using-pipedream-oauth) instead of [your own OAuth client](/connect/managed-auth/oauth-clients#using-a-custom-oauth-client)
2. There isn't a [pre-built tool](/connect/components) (action) for the app, or you need to modify the request
3. You want to avoid storing end user credentials in your app

## Overview

The Connect proxy enables you to interface with any integrated API and make authenticated requests on behalf of your users, without dealing with OAuth or storing end user credentials.

1. You send a request to the proxy and identify the end user you want to act on behalf of
2. The proxy sends the request to the downstream API and dynamically inserts your end user's auth credentials
3. The proxy returns the response from the downstream API back to you

![Connect API proxy visualization](https://res.cloudinary.com/pipedreamin/image/upload/v1738822030/pd-connect-proxy-viz_k5iksb.png)

<Callout type="info">
Before getting started with the Connect proxy, make sure you've already gone through the [managed auth quickstart](/connect/managed-auth/quickstart) for Pipedream Connect.
</Callout>

## Getting started

You can send requests to the Connect proxy using the [Pipedream SDK](/connect/sdk) with a fetch-style interface, or by making a request to the [REST API](/rest-api/connect/proxy).

- A [Pipedream OAuth client](/rest-api/auth#oauth) to make authenticated requests to Pipedream's API
- Connect [environment](/connect/environments) (ex, `production` or `development`)
- The [external user ID](/connect/api#external-users) for your end user (ex, `abc-123`)
- The [account ID](/connect/api#accounts) for your end user's connected account (ex, `apn_1234567`)

Refer to the full Connect API [here](/connect/api).

### Using the Pipedream SDK (preferred)

You can use the [Pipedream SDK](https://www.npmjs.com/package/@pipedream/sdk) to send a fetch-style request:

```javascript
import { createBackendClient } from "@pipedream/sdk/server";

const pd = createBackendClient({
environment: {development | production},
projectId: {your_projectId},
credentials: {
clientId: {your_oauth_client_id},
clientSecret: {your_oauth_client_secret}
},
});


const resp = await pd.makeProxyRequest(
{
searchParams: {
account_id: "{account_id}", // The account ID for your end user (ex, apn_1234567)
external_user_id: "{external_user_id}", // The external user ID for your end user
}
},
{
url: "https://slack.com/api/chat.postMessage", // Include any query params you need; no need to Base64 encode the URL if using the SDK
options: {
method: "POST",
headers: {
hello: "world!" // These get sent to the downstream API
},
body: {
text: "hello, world",
channel: "C03NA8B4VA9"
},
},
}
)

// Parse and return the data you need
console.log(resp);
```

### Using the REST API

You can also send a request to the Connect REST API with the below config:

**URL**

- The URL of the API you want to call (ex, `https://slack.com/api/chat.postMessage`)
- When using the REST API, this should be an URL-safe Base64 encoded string (ex, `aHR0cHM6Ly9zbGFjay5jb20vYXBpL2NoYXQucG9zdE1lc3NhZ2U`)

**HTTP method**

- Use the HTTP method required by the downstream API

**Body**

- Optionally include a body to send to the downstream API

**Headers**

- If using the REST API, include the `Authorization` header with your Pipedream OAuth access token (`Bearer {access_token}`)
- Headers that contain the prefix `x-pd-proxy` will get forwarded to the downstream API

```bash
# First, obtain an OAuth access token
curl -X POST https://api.pipedream.com/v1/oauth/token \
-H "Content-Type: application/json" \
-d '{
"grant_type": "client_credentials",
"client_id": "{your_oauth_client_id}",
"client_secret": "{your_oauth_client_secret}"
}'

# The response will include an access_token. Use it in the Authorization header below.

curl -X POST "https://api.pipedream.com/v1/connect/{your_project_id}/proxy/{url_safe_base64_encoded_url}?external_user_id={external_user_id}&account_id={apn_xxxxxxx}" \
-H "Authorization: Bearer {access_token}" \
-H "x-pd-environment: {development | production}" \
-d '{
"text": "hello, world",
"channel": "C03NA8B4VA9"
}'

# Parse and return the data you need
```
10 changes: 5 additions & 5 deletions docs-v2/pages/connect/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ You'll primarily use the browser SDK to let your users securely connect apps fro
1. [Create a short-lived token on your server](#create-a-new-token)
2. Initiate auth with that token to securely connect an account for a specific user

Here's a Next.js example [from our quickstart](/connect/quickstart):
Here's a Next.js example [from our quickstart](/connect/managed-auth/quickstart):

```typescript
import { createFrontendClient } from "@pipedream/sdk/browser"
Expand Down Expand Up @@ -408,7 +408,7 @@ You can find the app's ID in the response from the [List apps](/rest-api#list-ap

`oauth_app_id` **string** (_optional_)

The ID of the [OAuth app](/connect/quickstart#create-a-pipedream-oauth-client) you'd like to retrieve accounts for.
The ID of the [OAuth app](/connect/managed-auth/quickstart#create-a-pipedream-oauth-client) you'd like to retrieve accounts for.

---

Expand All @@ -427,7 +427,7 @@ Never return user credentials to the client
</Callout>

<Callout type="info">
To retrieve the credentials for any account in `production` for OAuth apps (Slack, Google Sheets, etc), the connected account must be using [your own OAuth client](/connect/oauth-clients#using-a-custom-oauth-client). You can only retrieve end user credentials for accounts that are using Pipedream's OAuth clients in `development`. [Learn more here](/connect/oauth-clients#using-pipedream-oauth).
To retrieve the credentials for any account in `production` for OAuth apps (Slack, Google Sheets, etc), the connected account must be using [your own OAuth client](/connect/managed-auth/oauth-clients#using-a-custom-oauth-client). You can only retrieve end user credentials for accounts that are using Pipedream's OAuth clients in `development`. [Learn more here](/connect/managed-auth/oauth-clients#using-pipedream-oauth).
</Callout>

##### Examples
Expand Down Expand Up @@ -680,7 +680,7 @@ Never return user credentials to the client
</Callout>

<Callout type="info">
To retrieve the credentials for any account in `production` for OAuth apps (Slack, Google Sheets, etc), the connected account must be using [your own OAuth client](/connect/oauth-clients#using-a-custom-oauth-client). You can only retrieve end user credentials for accounts that are using Pipedream's OAuth clients in `development`. [Learn more here](/connect/oauth-clients#using-pipedream-oauth).
To retrieve the credentials for any account in `production` for OAuth apps (Slack, Google Sheets, etc), the connected account must be using [your own OAuth client](/connect/managed-auth/oauth-clients#using-a-custom-oauth-client). You can only retrieve end user credentials for accounts that are using Pipedream's OAuth clients in `development`. [Learn more here](/connect/managed-auth/oauth-clients#using-pipedream-oauth).
</Callout>

##### Examples
Expand Down Expand Up @@ -927,7 +927,7 @@ DELETE /{project_id}/apps/{app_id}/accounts

`app_id` **string**

The app ID for which you want to delete all connected accounts. `app_id` can be `oauth_app_id` for [OAuth apps](/connect/quickstart#create-a-pipedream-oauth-client) or name slug for key-based apps, which you can find under the **Authentication** section of any [app page](https://pipedream.com/apps)
The app ID for which you want to delete all connected accounts. `app_id` can be `oauth_app_id` for [OAuth apps](/connect/managed-auth/quickstart#create-a-pipedream-oauth-client) or name slug for key-based apps, which you can find under the **Authentication** section of any [app page](https://pipedream.com/apps)

##### Examples

Expand Down
23 changes: 17 additions & 6 deletions docs-v2/pages/connect/components.mdx
Original file line number Diff line number Diff line change
@@ -1,22 +1,33 @@
import { Steps, Tabs } from 'nextra/components'
import Callout from '@/components/Callout'

# Embedding components in your application
# Pre-built tools for your app or agent

Pipedream Connect provides APIs to embed [pre-built components](/components) directly in your application
or AI agent, unlocking access to {process.env.REGISTRY_COMPONENTS}+ pre-built API operations. Enable [your end users](/connect/api#external-users) to
Pipedream Connect provides APIs to embed pre-built tools ([triggers and actions](/components)) directly in your application
or AI agent, enabling access to 10,000+ built-in API operations. Enable [your end users](/connect/api#external-users) to
configure, deploy, and invoke Pipedream triggers and actions for more than {process.env.PUBLIC_APPS} APIs.

## What are components?
## What are triggers and actions?

In Pipedream, [components](/components) are self-contained executable units of code. Your end users configure the inputs and the components produce a
In Pipedream, we call triggers and actions [components](/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](https://github.com/PipedreamHQ/pipedream/tree/master/components).

## Implementation

### Use Pipedream's frontend SDK
- Pipedream provides a frontend React SDK to enable your users to configure and run triggers and actions in your app's UI
- Style the UI components however you want to match the design of your app, and you can also fork the SDK
- Refer to the [SDK](https://github.com/PipedreamHQ/pipedream/blob/master/packages/connect-react/README.md) to get started

<Callout type="info">
Running components for your end users via Pipedream Connect is in **beta**, and we're looking for feedback. Please [let us know](https://pipedream.com/support) how you're using it, what's not working, and what else you'd like to see.
Check out the [public demo app](https://pdrm.co/connect) to see the API and SDK in action. You can also [run it locally and explore the code](https://github.com/PipedreamHQ/pipedream-connect-examples/tree/master/connect-react-demo).
</Callout>

### Use your own frontend
- See below to get started with the REST API
- Refer to the [full API reference](/connect/api#components) for supported SDK methods as well

## Getting started

<Callout type="info">
Expand Down
2 changes: 1 addition & 1 deletion docs-v2/pages/connect/environments.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Image from 'next/image'
Pipedream Connect projects support two environments: `development` and `production`. Connected accounts and credentials stored in `development` remain separate from `production`.

<Callout type="info">
Pipedream customers on any plan can use all of the Connect features in `development` mode. To use Connect in `production`, click **Contact Sales** [here](https://pipedream.com/pricing?plan=Enterprise) to get in touch with our team.
You can use all of the Connect features in `development` mode **on any plan**. **[Get in touch with our Sales team](https://pipedream.com/pricing?plan=Enterprise)** when you're ready to ship to production.
</Callout>


Expand Down
53 changes: 17 additions & 36 deletions docs-v2/pages/connect/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,33 @@ import VideoPlayer from "@/components/VideoPlayer";

# Pipedream Connect

Pipedream Connect is the easiest way for your users to connect to [over {process.env.PUBLIC_APPS}+ APIs](https://pipedream.com/apps), **right in your product**. You can build in-app messaging, CRM syncs, AI agents, [and much more](/connect/use-cases), all in a few minutes. Visit [the quickstart](/connect/quickstart) to build your first integration.
**Connect provides a developer toolkit that lets you add {process.env.PUBLIC_APPS}+ integrations to your app or AI agent.** You can build AI agents, in-app messaging, CRM syncs, [and much more](/connect/use-cases), all in a few minutes. You have full, code-level control over how these integrations work in your app. You handle your product, Pipedream simplifies the integration.

You have full, code-level control over how these integrations work in your app. You handle your product, Pipedream simplifies the integration.
![Connect visualization](https://res.cloudinary.com/pipedreamin/image/upload/v1738731467/pd-connect-viz_cep0uq.png)

Connect lets you:
## Use managed auth

1. Handle authorization or accept API keys on behalf of your users, for any of Pipedream's [{process.env.PUBLIC_APPS}+ APIs](https://pipedream.com/apps). Use the [Client SDK](https://github.com/PipedreamHQ/pipedream/tree/master/packages/sdk) or [Connect Link](/connect/quickstart#or-use-connect-link) to accept auth in minutes.
2. Securely retrieve OAuth access tokens, API keys, and other credentials for your end users with Pipedream's [REST API](/connect/api).
3. [Embed any Pipedream action or trigger](/connect/components) to run on behalf of your users, directly from within your application.
4. [Run workflows](/connect/workflows) for your end users with Pipedream's [workflow builder](/workflows), [serverless runtime](/), and thousands of no-code [triggers](/workflows/triggers) and [actions](/workflows/actions). Build complex integrations in minutes, writing code when you need it and using no-code components when you don't. Pipedream workflows are easy to modify, debug, and scale.
- Handle authorization or accept API keys on behalf of your users, for any of Pipedream's [{process.env.PUBLIC_APPS}+ APIs](https://pipedream.com/apps)
- Use the [Client SDK](https://github.com/PipedreamHQ/pipedream/tree/master/packages/sdk) or [Connect Link](/connect/managed-auth/quickstart#or-use-connect-link) to accept auth in minutes
- Ship new integrations quickly with Pipedream's approved OAuth clients, or use your own

<br />

<Image src="https://res.cloudinary.com/pipedreamin/image/upload/v1724194758/Screenshot_2024-08-20_at_3.59.05_PM_rfylfq.png" alt="Pipedream Connect overview" width={800} height={529} />
## Act on behalf of your users

- Retrieve OAuth access tokens and API keys for your end users with Pipedream's [REST API](/connect/api)
- Add 10,000+ pre-built tools and triggers from {process.env.PUBLIC_APPS}+ APIs to your AI agent or embed them directly in your SaaS app
- Develop and deploy complex multi-step [workflows](/connect/workflows) in our [visual workflow builder](/workflows)
- Use the Connect proxy to make custom API requests

{/* <Image src="https://res.cloudinary.com/pipedreamin/image/upload/v1724194758/Screenshot_2024-08-20_at_3.59.05_PM_rfylfq.png" alt="Pipedream Connect overview" width={800} height={529} /> */}

## Use cases

Pipedream Connect lets you build any API integration into your product in minutes. Our customers build:

- **AI products**: Talk to any AI API or LLM, interacting with your users or running AI-driven asynchronous tasks
- **In-app messaging**: Send messages to Slack, Discord, Microsoft Teams, or any app directly from your product.
- **CRM syncs**: Sync data between your app and Salesforce, HubSpot, or any CRM
- **AI products**: Talk to any AI API or LLM, interacting with your users or running AI-driven asynchronous tasks
- **Spreadsheet integrations**: Sync data between your app and Google Sheets, Airtable, or any spreadsheet

[and much more](/connect/use-cases).
Expand All @@ -35,33 +40,9 @@ Pipedream Connect lets you build any API integration into your product in minute

Visit [the managed auth quickstart](/connect/quickstart) to build your first integration.

## App configuration for OAuth apps

Pipedream has more than {process.env.PUBLIC_APPS} apps available for you to integrate via Connect. Getting started is easy — just follow the [quickstart](/connect/quickstart) to get up and running.

By default, apps that use OAuth to authenticate will use Pipedream's OAuth client. Depending on your use case, you may need to configure your own OAuth client. Read more about OAuth clients in Pipedream [here](/connected-accounts/oauth-clients).

[Let us know](https://pipedream.com/support) if the app you're looking for isn't listed [here](https://pipedream.com/apps).

## Users

To view or delete your users' connected accounts:

1. Open your project in Pipedream
2. Click the **Connect** tab on the left
3. Click the **Users** tab at the top

You'll see a list of all users, their connected accounts, and the option to delete any accounts from the UI. You can also retrieve and delete all your users via the API ([see the docs for reference](/connect/api)).

<Callout type="warning">
Connect currently supports one connected account per user, app, environment combination.

So if user `abc-123` in your application connects their Slack account in `production`, then that same user connects a different Slack workspace (also in `production`), the first connected account will get overwritten in Pipedream and replaced by the second.
</Callout>

## Plans and pricing

**Managed authentication with Connect is free to use for up to 1,000 connected accounts for any workspace**. Check out our [pricing page](https://pipedream.com/pricing?plan=Enterprise) for details on running workflows and embedding components in your app.
**Managed authentication with Connect is free to use for up to 1,000 connected accounts for any workspace**. Check out our [pricing page](https://pipedream.com/pricing?plan=Enterprise) to get in touch with our Sales team for details on using Connect in production.

## Security

Expand All @@ -84,4 +65,4 @@ All credentials and tokens are sent to Pipedream securely over HTTPS, and encryp
- **Developer**: This is probably you, the Pipedream customer who's developing an app and wants to use Connect to make API requests on behalf of your end users.
- **End User**: Your customer or user, whose data you want to access on their behalf. End users are identifed via the `external_user_id` param in the Connect SDK and API.
- **Connected Account**: The account your end user connects. [Read more about connected accounts](/connected-accounts).
- **OAuth Client**: Custom OAuth clients you create in Pipedream. [Read more about OAuth clients](/connected-accounts/oauth-clients).
- **OAuth Client**: This is admittedly a bit of an overloaded term and refers both to [custom OAuth clients](/connect/managed-auth/oauth-clients) you create in Pipedream to use when your end users authorize access to their account, as well as [OAuth clients to authenticate to Pipedream's API](/rest-api/auth#oauth).
Loading
Loading