diff --git a/docs-v2/components/TemporaryTokenGenerator.jsx b/docs-v2/components/TemporaryTokenGenerator.jsx new file mode 100644 index 0000000000000..86e664f0689bf --- /dev/null +++ b/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 ( +
+
+ Generate a temporary access token +
+
+
+ +
+ + {token && ( +
+
+
+ {token} +
+ +
+
+ This is a temporary token. Any linked connected accounts will be regularly deleted. +
+
+ )} +
+
+ ); +} diff --git a/docs-v2/pages/connect/mcp/openai.mdx b/docs-v2/pages/connect/mcp/openai.mdx index 3e56dd2a5e87a..7d868b8dab72c 100644 --- a/docs-v2/pages/connect/mcp/openai.mdx +++ b/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). -## 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. + + + +#### 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 + + + +#### 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! + + + + +Refer to the instructions below when you're ready to use Pipedream MCP in your app. + + +## Using Pipedream MCP in your app @@ -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 \ ``` - - -{/* ## 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) - - - -### 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. - - - -```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); -``` - - -```bash -curl https://api.pipedream.com/v1/oauth/token \ - -H 'Content-Type: application/json' \ - -d '{ - "grant_type": "client_credentials", - "client_id": "", - "client_secret": "" - }' -``` - - - - - -### 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. -*/} \ No newline at end of file + \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0cadb6c487a15..5afea2c286d05 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -675,8 +675,7 @@ importers: specifier: ^1.6.0 version: 1.6.6 - components/all_voice_lab: - specifiers: {} + components/all_voice_lab: {} components/allocadence: dependencies: @@ -6048,8 +6047,7 @@ importers: specifier: ^1.5.1 version: 1.6.6 - components/heylibby: - specifiers: {} + components/heylibby: {} components/heyreach: {} @@ -8576,11 +8574,9 @@ importers: specifier: ^3.0.3 version: 3.0.3 - components/neetocal: - specifiers: {} + components/neetocal: {} - components/neetodesk: - specifiers: {} + components/neetodesk: {} components/neetoform: {} @@ -15488,6 +15484,14 @@ importers: specifier: ^6.0.0 version: 6.2.0 + modelcontextprotocol/node_modules2/@modelcontextprotocol/sdk/dist/cjs: {} + + modelcontextprotocol/node_modules2/@modelcontextprotocol/sdk/dist/esm: {} + + modelcontextprotocol/node_modules2/zod-to-json-schema/dist/cjs: {} + + modelcontextprotocol/node_modules2/zod-to-json-schema/dist/esm: {} + packages/ai: dependencies: '@pipedream/sdk':