Skip to content

Danny/openai devtok #16819

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 23, 2025
Merged

Danny/openai devtok #16819

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57c95ba
Updating OpenAI playground info
dannyroosevelt May 23, 2025
e276333
Update pnpm-lock.yaml
dannyroosevelt May 23, 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
90 changes: 90 additions & 0 deletions docs-v2/components/TemporaryTokenGenerator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
"use client";

import { useState } from "react";
import { styles } from "../utils/componentStyles";

export default function TemporaryTokenGenerator() {
const [
token,
setToken,
] = useState("");
const [
copied,
setCopied,
] = useState(false);

// Generate a UUID v4
function generateUUID() {
return crypto.randomUUID();
}

function generateToken() {
const uuid = generateUUID();
const newToken = `devtok_${uuid}`;
setToken(newToken);
setCopied(false);
}

async function copyToClipboard() {
try {
await navigator.clipboard.writeText(token);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error("Failed to copy:", err);
}
}

return (
<div className={styles.container}>
<div className={styles.header}>
Generate a temporary access token
</div>
<div className="p-4">
<div className="mb-4">
<button
onClick={generateToken}
className={styles.primaryButton}
>
Generate token
</button>
</div>

{token && (
<div className="mt-4">
<div className="flex items-center gap-2">
<div className={styles.codeDisplay + " flex-1"}>
<code className={styles.codeText}>{token}</code>
</div>
<button
onClick={copyToClipboard}
className={styles.secondaryButton}
>
{copied
? (
<>
<svg className="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
Copied!
</>
)
: (
<>
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
Copy
</>
)}
</button>
</div>
<div className={`mt-2 ${styles.text.muted}`}>
This is a temporary token. Any linked connected accounts will be regularly deleted.
</div>
</div>
)}
</div>
</div>
);
}
137 changes: 48 additions & 89 deletions docs-v2/pages/connect/mcp/openai.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Callout, Tabs, Steps } from 'nextra/components'
import TemporaryTokenGenerator from '@/components/TemporaryTokenGenerator'

# Using Pipedream MCP with OpenAI

Expand All @@ -8,7 +9,40 @@ Access {process.env.PUBLIC_APPS}+ APIs and 10,000+ tools in OpenAI using Pipedre
Pipedream Connect includes built-in user authentication for [every MCP server](https://mcp.pipedream.com), which means you don't need to build any authorization flows or deal with token storage and refresh in order to make authenticated requests on behalf of your users. [Learn more here](/connect/mcp/developers/#user-account-connections).
</Callout>

## Getting started
## Testing in OpenAI's API Playground

OpenAI provides an API playground for developers to test prompts and tool calling, which provides an easy way to test Pipedream MCP. Get started below.

<Steps>

#### Open the playground

Navigate to [OpenAI's playground](https://platform.openai.com/playground/prompts?models=gpt-4.1) and sign in with your OpenAI account.

#### Add Pipedream MCP

Click the **Create** button in the **Tools** section, then select **Pipedream**.

#### Enter your access token

<TemporaryTokenGenerator />

#### Select an app

- Select an app you want to use as an MCP server. For example, `notion`, `google_calendar`, `gmail`, or `slack`.
- Check out all of the available apps here: [mcp.pipedream.com](https://mcp.pipedream.com).

#### Click **Connect**

Enter a prompt and start chatting!

</Steps>

<Callout type="info">
Refer to the instructions below when you're ready to use Pipedream MCP in your app.
</Callout>

## Using Pipedream MCP in your app

<Steps>

Expand Down Expand Up @@ -64,7 +98,8 @@ const pd = createBackendClient({
// Find the app to use for the MCP server
// For this example, we'll use Notion
const apps = await pd.getApps({ q: "notion" });
const appSlug = apps.data[0].name_slug; // e.g., "notion"
const appSlug = apps.data[0].name_slug; // e.g., "notion",
const appLabel = apps.data[0].name; // e.g., "Notion"

// Get access token for MCP server auth
const accessToken = await pd.rawAccessToken();
Expand All @@ -81,12 +116,14 @@ const response = await client.responses.create({
tools: [
{
type: 'mcp',
server_label: 'Notion',
server_url: `https://remote.mcp.pipedream.net/${externalUserId}/${appSlug}`,
server_label: appLabel,
server_url: `https://remote.mcp.pipedream.net`,
headers: {
Authorization: `Bearer ${accessToken}`,
"x-pd-project-id": PIPEDREAM_PROJECT_ID,
"x-pd-environment": PIPEDREAM_ENVIRONMENT
"x-pd-environment": PIPEDREAM_ENVIRONMENT,
"x-pd-external-user-id": externalUserId,
"x-pd-app-slug": appSlug,
},
require_approval: 'never'
}
Expand Down Expand Up @@ -129,11 +166,13 @@ curl -X POST https://api.openai.com/v1/chat/completions \
{
"type": "mcp",
"server_label": "Notion",
"server_url": "https://remote.mcp.pipedream.net/abc-123/'$APP_SLUG'",
"server_url": "https://remote.mcp.pipedream.net",
"headers": {
"Authorization": "Bearer '"$ACCESS_TOKEN"'",
"x-pd-project-id": "$PIPEDREAM_PROJECT_ID",
"x-pd-environment": "$PIPEDREAM_ENVIRONMENT"
"x-pd-project-id": "'"$PIPEDREAM_PROJECT_ID"'",
"x-pd-environment": "'"$PIPEDREAM_ENVIRONMENT"'",
"x-pd-external-user-id": "abc-123",
"x-pd-app-slug": "'"$APP_SLUG"'"
},
"require_approval": "never"
}
Expand All @@ -142,84 +181,4 @@ curl -X POST https://api.openai.com/v1/chat/completions \
```
</Tabs.Tab>
</Tabs>
</Steps>

{/* ## Testing in OpenAI's API Playground

OpenAI provides an API playground for developers to test prompts and tool calling:
[https://platform.openai.com/playground/prompts](https://platform.openai.com/playground/prompts?models=gpt-4.1)

1. Navigate to [OpenAI's playground](https://platform.openai.com/playground/prompts?models=gpt-4.1) and sign in with your OpenAI account
2. Click the **Create** button in the **Tools** section, then select **Pipedream**
3. You'll need these inputs to get set up:

- [Pipedream project ID](#copy-your-project-id)
- [Pipedream environment](#define-the-environment)
- [Developer access token](#generate-an-access-token)

<Steps>

### Copy your project ID

1. Open an existing Pipedream project or create a new one at [pipedream.com/projects](https://pipedream.com/projects)
2. Click the **Settings** tab, then copy your **Project ID**

### Define the environment

- Since you're testing for yourself, you should use `development`
- Use `production` when you're ready to ship your app to users

### Generate an access token

**First, create an OAuth client in Pipedream:**

1. Visit the [API settings](https://pipedream.com/settings/api) for your workspace
2. Click the **New OAuth Client** button and give it a name
3. Copy the client ID and secret

**Next, get an access token:**

In the client credentials model, as a developer, you exchange your OAuth client ID and secret for a short-lived access token to make API requests.

<Tabs items={['Node.js', 'cURL']}>
<Tabs.Tab>
```javascript
import { createBackendClient } from "@pipedream/sdk/server";

// Initialize the Pipedream SDK client
const pd = createBackendClient({
environment: PIPEDREAM_ENVIRONMENT,
credentials: {
clientId: PIPEDREAM_CLIENT_ID,
clientSecret: PIPEDREAM_CLIENT_SECRET,
},
projectId: PIPEDREAM_PROJECT_ID
});

const accessToken = await pd.rawAccessToken();

console.log(accessToken);
```
</Tabs.Tab>
<Tabs.Tab>
```bash
curl https://api.pipedream.com/v1/oauth/token \
-H 'Content-Type: application/json' \
-d '{
"grant_type": "client_credentials",
"client_id": "<PIPEDREAM_CLIENT_ID>",
"client_secret": "<PIPEDREAM_CLIENT_SECRET>"
}'
```
</Tabs.Tab>
</Tabs>

</Steps>

### Playground limitations

- The server URL that's defined in OpenAI's playground uses two static fields. In practice, you'll define those dynamically in your app:
- `external_user_id`: `demo-openai-user-123`
- `app_slug`: `google_calendar`
- You'll also define the `PIPEDREAM_PROJECT_ID` and `PIPEDREAM_ENVIRONMENT` in your environment once, then use the Pipedream SDK or REST API to get a fresh access token.
*/}
</Steps>
20 changes: 12 additions & 8 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading