First pass (#16705)

* First pass

* Fixing refs

* Additional changes

* Update pnpm-lock.yaml

Author: dannyroosevelt

docs-v2/components/ConnectCodeSnippets.js

@@ -13,7 +13,7 @@ export function getServerCodeSnippet(externalUserId) {
  
 // This code runs on your server
 const pd = createBackendClient({
-  environment: "development", 
+  environment: "production",
   credentials: {
     clientId: process.env.PIPEDREAM_CLIENT_ID,
     clientSecret: process.env.PIPEDREAM_CLIENT_SECRET,

docs-v2/next.config.mjs

@@ -91,7 +91,12 @@ export default withNextra({
       },
       {
         source: "/quickstart/run-workflow-on-a-schedule/",
-        destination: "/quickstart/",
+        destination: "/workflows/quickstart/",
+        permanent: true,
+      },
+      {
+        source: "/quickstart/",
+        destination: "/workflows/quickstart/",
         permanent: true,
       },
       {
@@ -476,6 +481,11 @@ export default withNextra({
         destination: "/connect/managed-auth/webhooks/",
         permanent: true,
       },
+      {
+        source: "/connect/environments/",
+        destination: "/connect/managed-auth/environments/",
+        permanent: true,
+      },
       {
         source: "/integrations/connected-accounts/oauth-clients/",
         destination: "/integrations/oauth-clients/",

docs-v2/pages/_meta.tsx

@@ -1,6 +1,5 @@
 export default {
   "index": "What is Pipedream?",
-  "quickstart": "Quickstart",
   "workspaces": "Workspaces",
   "projects": "Projects",
   "connect": "Connect",

docs-v2/pages/connect/_meta.tsx

@@ -1,31 +1,12 @@
 export default {
-  "index": {
-    "title": "Overview",
-  },
-  "use-cases": {
-    "title": "Use cases",
-  },
-  "managed-auth": {
-    "title": "Managed auth",
-  },
-  "components": {
-    "title": "Pre-built tools",
-  },
-  "mcp": {
-    "title": "MCP servers",
-  },
-  "api-proxy": {
-    "title": "API proxy",
-  },
-  "workflows": {
-    "title": "Workflows",
-  },
-  "environments": {
-    "title": "Environments",
-  },
-  "api": {
-    "title": "API & SDK reference",
-  },
+  "index": "Overview",
+  "use-cases": "Use cases",
+  "managed-auth": "Managed auth",
+  "components": "Tool calling",
+  "mcp": "MCP",
+  "api-proxy": "API proxy",
+  "workflows": "Workflows",
+  "api": "API & SDK reference",
   "migrating-from-project-keys-to-oauth": {
     "display": "hidden",
   },

docs-v2/pages/connect/api-proxy.mdx

@@ -27,7 +27,7 @@ Before getting started with the Connect proxy, make sure you've already gone thr
 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`)
+- Connect [environment](/connect/managed-auth/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`)
 

docs-v2/pages/connect/api.mdx

@@ -104,7 +104,7 @@ export default function Home() {
 
 ## Environment
 
-Some API endpoints accept an [environment](/connect/environments/) parameter. This lets you specify the environment (`production` or `development`) where resources will live in your project.
+Some API endpoints accept an [environment](/connect/managed-auth/environments/) parameter. This lets you specify the environment (`production` or `development`) where resources will live in your project.
 
 Always set the environment when you create the SDK client:
 

docs-v2/pages/connect/managed-auth/_meta.tsx

@@ -4,6 +4,7 @@ export default {
   "tokens": "Connect Tokens",
   "connect-link": "Connect Link",
   "oauth-clients": "OAuth Clients",
+  "environments": "Environments",
   "webhooks": "Webhooks",
-  "customization": "Customizing the Auth Flow",
+  "customization": "Project Configuration",
 } as const

docs-v2/pages/connect/managed-auth/customization.mdx

@@ -1,17 +1,15 @@
 import ArcadeEmbed from '@/components/ArcadeEmbed'
 import Callout from '@/components/Callout'
 
-# Customizing the Auth Flow
+# Project Configuration
+
+By default, your end users will see a primarly Pipedream branded experience when they connect their account. To customize this screen to highlight your application, you can configure your [app's name](#application-name), [support email](#support-email), and [logo](#logo) in the Pipedream UI.
 
 <ArcadeEmbed
     src="https://demo.arcade.software/b3aw8YEPFavVpOrXRvca?embed"
     title="Pipedream Connect Auth Flow">
 </ArcadeEmbed>
 
-<Callout type="info">
-By default, your end users will see a primarly Pipedream branded experience when they connect their account. To customize this screen to highlight your application, you can configure your [app's name](#application-name), [support email](#support-email), and [logo](#logo) in the Pipedream UI.
-</Callout>
-
 ## Customizing your application details
 
 Open your project in the Pipedream UI: [https://pipedream.com/projects](https://pipedream.com/projects)

docs-v2/pages/connect/environments.mdx renamed to docs-v2/pages/connect/managed-auth/environments.mdx

@@ -3,22 +3,22 @@ import Image from 'next/image'
 
 # Environments
 
-Pipedream Connect projects support two environments: `development` and `production`. Connected accounts and credentials stored in `development` remain separate from `production`.
+Pipedream Connect projects support two environments: `development` and `production`. Connected accounts and credentials stored in one environment remain separate from the other.
 
 <Callout type="info">
-You can use all of the Connect features in `development` mode **on any plan**. **[Visit the pricing page](https://pipedream.com/pricing?plan=Connect)** to select the right plan when you're ready to ship to production.
+You can use all of the Connect features in `development` mode **on any plan**. **[Visit the pricing page](https://pipedream.com/pricing?plan=Connect)** to select the right plan when you're ready to ship your app to production.
 </Callout>
 
 ## Development mode
 
-Development mode provides access to all Connect features while you're building and testing your integration. It has the following constraints:
+Development mode provides access to all Connect features while you're building and testing your integration with the following constraints:
 
 - **Maximum of 10 external users**: The development environment is limited to 10 unique external user IDs. If you exceed this limit, you'll need to [delete some existing users](/connect/managed-auth/users/#deleting-users) before adding new ones.
 - **Must be signed in to pipedream.com**: When connecting an account in development mode, you must be signed in to pipedream.com in the same browser where you're connecting your account.
 - **Personal testing only**: Development mode is intended for your own accounts during testing and development, not for your real end users.
 
 <Callout type="warning">
-The `development` environment is not intended for production use with your customers. When you're ready to launch, you should transition to the `production` environment.
+The `development` environment is not intended for production use with your customers. When you're ready to launch, you should transition to `production`.
 </Callout>
 
 <br />
@@ -39,7 +39,8 @@ const pd = createBackendClient({
   credentials: {
     clientId: "your-oauth-client-id",
     clientSecret: "your-oauth-client-secret",
-  }
+  },
+  projectId: "proj_xxxxxxx"
 });
 ```
 

docs-v2/pages/connect/managed-auth/quickstart.mdx

@@ -1,5 +1,5 @@
 import Callout from '@/components/Callout'
-import { Steps, Tabs } from 'nextra/components'
+import { Steps } from 'nextra/components'
 import Image from 'next/image'
 import VideoPlayer from "@/components/VideoPlayer"
 import { GlobalConnectProvider } from '@/components/GlobalConnectProvider'
@@ -27,17 +27,17 @@ Here's how Connect sits in your frontend and backend, and communicates with Pipe
 
 ## Getting started
 
+We'll walk through these steps below with an interactive demo that lets you see an execute the code directly in the docs.
+
 <Steps>
 
 ### Configure your environment
 
 You'll need to do two things to add Pipedream Connect to your app:
 
-1. [Connect to the Pipedream API from your server](#generate-a-short-lived-token). This lets you make secure calls to the Pipedream API to initiate the account connection flow and retrieve account credentials. If you're running a JavaScript framework like Node.js on your server, you can use the Pipedream SDK.
+1. [Connect to the Pipedream API from your server](#generate-a-short-lived-token). This lets you make secure calls to the Pipedream API to initiate the account connection flow and retrieve account credentials.
 2. [Add the Pipedream SDK to your frontend](#connect-your-users-account) or redirect your users to [a Pipedream-hosted URL](/connect/connect-link/) to start the account connection flow.
 
-We'll walk through these steps below with an interactive demo that lets you see an execute the code directly in the docs.
-
 If you're building your own app, you'll need to provide these credentials to the environment, or retrieve them from your secrets store:
 
 ```bash
@@ -50,26 +50,23 @@ PIPEDREAM_PROJECT_ID=your_project_id
 
 ### Create a project in Pipedream
 
-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**.
+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**
 
 ### Create a Pipedream OAuth client
 
 Pipedream uses OAuth to authorize requests to the REST API. To create an OAuth client:
 
-1. Visit the [API settings](https://pipedream.com/settings/api) for your workspace.
-2. Click the **New OAuth Client** button.
-3. Name your client and click **Create**.
-4. Copy the client secret. **It will not be accessible again**. Click **Close**.
-5. Copy the client ID from the list.
+1. Visit the [API settings](https://pipedream.com/settings/api) for your workspace
+2. Create a new OAuth client and note the client ID and secret
 
 You'll need these when configuring the SDK and making API requests.
 
 ### Generate a short-lived token
 
 To securely initiate account connections for your users, you'll need to generate a short-lived token for your users and use that in the [account connection flow](#connect-your-users-account). See [the docs on Connect tokens](/connect/tokens/) for a general overview of why we need to create tokens and scope them to end users.
 
-In the code below you can see how we generate a Connect token for an example user, and even **try it yourself**:
+Check out the code below **try it yourself**:
 
 <div className="not-prose">
   <TokenGenerationDemo />
@@ -83,7 +80,7 @@ Refer to the API docs for [full set of parameters you can pass](/connect/api/#cr
 
 ### Connect your user's account
 
-To connect a third-party account for a user, you have two options:
+You have two options when connecting an account for your user:
 
 1. [Use the Pipedream SDK](#use-the-pipedream-sdk-in-your-frontend) in your frontend
 2. [Use Connect Link](#or-use-connect-link) to deliver a hosted URL to your user
@@ -128,24 +125,16 @@ Check out the [full API docs](/connect/api/#create-token) for all parameters you
 
 Now that your users have connected an account, you can use their auth in one of a few ways:
 
-1. [Retrieve their credentials from the REST API](/connect/api/#accounts) to use in your backend application
-2. [Use Pipedream's visual workflow builder](/connect/workflows/) to define complex logic to run on behalf of your users
-3. [Embed Pipedream components directly in your app](/connect/components/) to run actions and triggers on their behalf
+1. [Expose 10k+ tools](/connect/components/) to your AI app or agent and call them on behalf of your customers
+2. [Send custom requests](/connect/proxy/) to any one of the 2500+ APIs using the Connect API proxy
+3. [Use Pipedream's visual workflow builder](/connect/workflows/) to define complex logic to run on behalf of your users
+4. [Embed Pipedream components directly in your app](/connect/components/) to run actions and triggers on their behalf
 
 ### Deploy your app to production
 
-- Test end to end in [development](/connect/environments/)
+- Test end to end in [development](/connect/managed-auth/environments/)
 - Ship to production!
 
 </Steps>
 
-<div className="mt-8 text-sm text-gray-600 border-t pt-4">
-  <p className="text-sm">This quickstart showcases the recommended implementation flow:</p>
-  <ol className="list-decimal pl-5 mt-2 space-y-1 text-sm">
-    <li>Securely generate a token on your server (keeping credentials private)</li>
-    <li>Pass the token to your frontend to connect an account</li>
-  </ol>
-  <p className="mt-2 text-sm opacity-80">Note: Each time you reload this page, a new unique user ID is generated.</p>
-</div>
-
 </GlobalConnectProvider>