Danny/openai devtok (#16819)

* Updating OpenAI playground info

* Update pnpm-lock.yaml

Author: dannyroosevelt

docs-v2/components/TemporaryTokenGenerator.jsx

@@ -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>
+  );
+}

docs-v2/pages/connect/mcp/openai.mdx

@@ -1,4 +1,5 @@
 import { Callout, Tabs, Steps } from 'nextra/components'
+import TemporaryTokenGenerator from '@/components/TemporaryTokenGenerator'
 
 # Using Pipedream MCP with OpenAI
 
@@ -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>
 
@@ -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();
@@ -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'
     }
@@ -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"
       }
@@ -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>