From 7e683eb1009c700ad7adcd8ae7628b0a368fbab3 Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Wed, 22 Oct 2025 13:51:46 -0700 Subject: [PATCH 1/3] Bumping to latest connect-react SDK --- connect-react-demo/package.json | 2 +- connect-react-demo/pnpm-lock.yaml | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/connect-react-demo/package.json b/connect-react-demo/package.json index 406972d..84367dc 100644 --- a/connect-react-demo/package.json +++ b/connect-react-demo/package.json @@ -11,7 +11,7 @@ "validate-env": "node scripts/validate-env.js" }, "dependencies": { - "@pipedream/connect-react": "^2.0.0", + "@pipedream/connect-react": "^2.1.0", "@pipedream/sdk": "^2.0.13", "@radix-ui/react-collapsible": "^1.1.1", "@radix-ui/react-dialog": "^1.1.14", diff --git a/connect-react-demo/pnpm-lock.yaml b/connect-react-demo/pnpm-lock.yaml index 883625d..48b5568 100644 --- a/connect-react-demo/pnpm-lock.yaml +++ b/connect-react-demo/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@pipedream/connect-react': - specifier: ^2.0.0 - version: 2.0.0(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^2.1.0 + version: 2.1.0(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@pipedream/sdk': specifier: ^2.0.13 version: 2.0.13 @@ -338,8 +338,8 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} - '@pipedream/connect-react@2.0.0': - resolution: {integrity: sha512-z0S833a6svXRobI+KDEQLeaAed8zOL9v/kDF9GiLbIXbMSpmds/wLnY0hDXQLrBdxYVpGKD4c9f/53YLdUa+cA==} + '@pipedream/connect-react@2.1.0': + resolution: {integrity: sha512-a1l6LGNPLD9J2jdhcsYrmCjzZbVk5Xs7/fPBRXz+Ek2p5d1aMGB3IhYmsIY+YaknsTeUBkTEVLotcKgw0iX6KQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -2421,7 +2421,7 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.19.1 - '@pipedream/connect-react@2.0.0(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@pipedream/connect-react@2.1.0(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@pipedream/sdk': 2.0.13 '@tanstack/react-query': 5.90.2(react@18.3.1) From ca807b02a861d5be379ad79004f73b76d15bba3e Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Wed, 22 Oct 2025 23:10:49 -0700 Subject: [PATCH 2/3] 2900 apps --- README.md | 4 +- connect-react-demo/app/components/Demo.tsx | 190 +++++++++++++-------- connect-react-demo/app/layout.tsx | 30 ++-- 3 files changed, 132 insertions(+), 92 deletions(-) diff --git a/README.md b/README.md index 8bc73b5..83ffe00 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@

- Connect provides a developer toolkit that lets you add 2,800+ integrations to your app or AI agent. You can build AI agents, chatbots, workflow builders, and much more, all in a few minutes. You have full, code-level control over how these integrations work in your app. + Connect provides a developer toolkit that lets you add 2,900+ integrations to your app or AI agent. You can build AI agents, chatbots, workflow builders, and much more, all in a few minutes. You have full, code-level control over how these integrations work in your app.

@@ -19,7 +19,7 @@ ## Managed Auth -The **[managed-auth-basic-next-app](/managed-auth-basic-next-app/)** shows the foundational managed auth capability, which enables your end users to connect their account for any of the 2,800 apps available on Pipedream. This is an example Next.js app, but Pipedream has [SDKs available in TypeScript, Python, and Java](https://pipedream.com/docs/connect/api-reference/sdks) to go along with the REST API. [Refer to our docs](https://pipedream.com/docs/connect) for more info. +The **[managed-auth-basic-next-app](/managed-auth-basic-next-app/)** shows the foundational managed auth capability, which enables your end users to connect their account for any of the 2,900 apps available on Pipedream. This is an example Next.js app, but Pipedream has [SDKs available in TypeScript, Python, and Java](https://pipedream.com/docs/connect/api-reference/sdks) to go along with the REST API. [Refer to our docs](https://pipedream.com/docs/connect) for more info. ## Connect React diff --git a/connect-react-demo/app/components/Demo.tsx b/connect-react-demo/app/components/Demo.tsx index 8c212be..66014db 100644 --- a/connect-react-demo/app/components/Demo.tsx +++ b/connect-react-demo/app/components/Demo.tsx @@ -1,24 +1,36 @@ -"use client" +"use client"; -import { useState } from "react" -import { Tabs, TabsList, TabsContent } from "@/components/ui/tabs" -import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" -import { ConfigPanel } from "./ConfigPanel" -import { LiveCodePanel } from "./LiveCodePanel" -import { DemoPanel } from "./DemoPanel" -import { SDKDebugger } from "./SDKDebugger" -import { DemoHeader } from "./DemoHeader" -import { DemoTabTrigger } from "./DemoTabTrigger" -import { useSDKLoggerCallCount, useSDKLoggerPendingCount } from "@/lib/sdk-logger" -import { IoSettingsOutline, IoFlashOutline, IoCodeSlashOutline, IoChevronDown } from "react-icons/io5" -import { cn } from "@/lib/utils" -import { useQueryParams } from "@/lib/use-query-params" +import { useState } from "react"; +import { Tabs, TabsList, TabsContent } from "@/components/ui/tabs"; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/components/ui/collapsible"; +import { ConfigPanel } from "./ConfigPanel"; +import { LiveCodePanel } from "./LiveCodePanel"; +import { DemoPanel } from "./DemoPanel"; +import { SDKDebugger } from "./SDKDebugger"; +import { DemoHeader } from "./DemoHeader"; +import { DemoTabTrigger } from "./DemoTabTrigger"; +import { + useSDKLoggerCallCount, + useSDKLoggerPendingCount, +} from "@/lib/sdk-logger"; +import { + IoSettingsOutline, + IoFlashOutline, + IoCodeSlashOutline, + IoChevronDown, +} from "react-icons/io5"; +import { cn } from "@/lib/utils"; +import { useQueryParams } from "@/lib/use-query-params"; const TABS = [ { value: "config", icon: IoSettingsOutline, label: "Config" }, { value: "code", icon: IoCodeSlashOutline, label: "Code" }, { value: "debug", icon: IoFlashOutline, label: "Debug" }, -] as const +] as const; function HeroSection({ children }: { children: React.ReactNode }) { return ( @@ -27,44 +39,57 @@ function HeroSection({ children }: { children: React.ReactNode }) {

One SDK, thousands of API integrations

- -
- {children} -
+ +
{children}
- ) + ); } function DescriptionParagraph({ className }: { className?: string }) { return (

- Pipedream Connect - - {" "}provides managed authentication for 2,800+ APIs and access to 10,000+ prebuilt tools. Roll your own frontend with the server SDK or use{" "} - {" "} + provides managed authentication for 2,900+ APIs and access to 10,000+ + prebuilt tools. Roll your own frontend with the server SDK or use{" "} + @pipedream/connect-react - - + + {" "} to get started in minutes.

- ) + ); } -function LoadingSkeleton({ withContainer = false }: { withContainer?: boolean }) { +function LoadingSkeleton({ + withContainer = false, +}: { + withContainer?: boolean; +}) { const content = (
@@ -80,41 +105,49 @@ function LoadingSkeleton({ withContainer = false }: { withContainer?: boolean })
- ) + ); return withContainer ? (
{content}
- ) : content + ) : ( + content + ); } -function TabsContainer({ - activeTab, - onTabChange, - callCount, - pendingCount, +function TabsContainer({ + activeTab, + onTabChange, + callCount, + pendingCount, isMobile, className, tabsListClassName, - isLoading + isLoading, }: { - activeTab: string - onTabChange: (value: string) => void - callCount: number - pendingCount: number - isMobile?: boolean - className?: string - tabsListClassName?: string - isLoading?: boolean + activeTab: string; + onTabChange: (value: string) => void; + callCount: number; + pendingCount: number; + isMobile?: boolean; + className?: string; + tabsListClassName?: string; + isLoading?: boolean; }) { return ( - +
- + {TABS.map((tab) => (
- + {isLoading ? ( <> @@ -145,13 +178,13 @@ function TabsContainer({ )}
- +
- +
@@ -174,13 +207,13 @@ function TabsContainer({ )}
- +
- +
@@ -189,27 +222,29 @@ function TabsContainer({ )} - ) + ); } export default function Demo({ isLoading = false }: { isLoading?: boolean }) { - const { queryParams, setQueryParam } = useQueryParams() - const [showMoreInfo, setShowMoreInfo] = useState(false) - const callCount = useSDKLoggerCallCount() - const pendingCount = useSDKLoggerPendingCount() - - const validTabs = ["config", "code", "debug"] as const - const tabFromQuery = queryParams.tab as string - const activeTab = validTabs.includes(tabFromQuery as any) ? tabFromQuery : "config" - + const { queryParams, setQueryParam } = useQueryParams(); + const [showMoreInfo, setShowMoreInfo] = useState(false); + const callCount = useSDKLoggerCallCount(); + const pendingCount = useSDKLoggerPendingCount(); + + const validTabs = ["config", "code", "debug"] as const; + const tabFromQuery = queryParams.tab as string; + const activeTab = validTabs.includes(tabFromQuery as any) + ? tabFromQuery + : "config"; + const setActiveTab = (tab: string) => { - setQueryParam("tab", tab === "config" ? undefined : tab) - } + setQueryParam("tab", tab === "config" ? undefined : tab); + }; return (
- +
@@ -219,7 +254,12 @@ export default function Demo({ isLoading = false }: { isLoading?: boolean }) { More info - +
@@ -229,7 +269,7 @@ export default function Demo({ isLoading = false }: { isLoading?: boolean }) {
- +
- ) -} \ No newline at end of file + ); +} diff --git a/connect-react-demo/app/layout.tsx b/connect-react-demo/app/layout.tsx index d4970db..6f03e02 100644 --- a/connect-react-demo/app/layout.tsx +++ b/connect-react-demo/app/layout.tsx @@ -1,15 +1,17 @@ -import type { Metadata } from "next" -import "./globals.css" -import { DatadogScript } from "./components/DatadogScript" -import { GoogleAnalytics } from "./components/GoogleAnalytics" -import { GeistSans } from "geist/font/sans" +import type { Metadata } from "next"; +import "./globals.css"; +import { DatadogScript } from "./components/DatadogScript"; +import { GoogleAnalytics } from "./components/GoogleAnalytics"; +import { GeistSans } from "geist/font/sans"; export const metadata: Metadata = { title: "One SDK, thousands of API integrations", - description: "Pipedream Connect provides managed authentication for 2,800+ APIs and access to 10,000+ prebuilt tools. Roll your own frontend with the server SDK or use @pipedream/connect-react to get started in minutes.", + description: + "Pipedream Connect provides managed authentication for 2,900+ APIs and access to 10,000+ prebuilt tools. Roll your own frontend with the server SDK or use @pipedream/connect-react to get started in minutes.", openGraph: { title: "One SDK, thousands of API integrations", - description: "Pipedream Connect provides managed authentication for 2,800+ APIs and access to 10,000+ prebuilt tools. Roll your own frontend with the server SDK or use @pipedream/connect-react to get started in minutes.", + description: + "Pipedream Connect provides managed authentication for 2,900+ APIs and access to 10,000+ prebuilt tools. Roll your own frontend with the server SDK or use @pipedream/connect-react to get started in minutes.", url: "https://pipedream.com/connect", siteName: "Pipedream Connect", images: [ @@ -26,24 +28,22 @@ export const metadata: Metadata = { twitter: { card: "summary_large_image", title: "One SDK, thousands of API integrations", - description: "Pipedream Connect provides managed authentication for 2,800+ APIs and access to 10,000+ prebuilt tools.", + description: + "Pipedream Connect provides managed authentication for 2,900+ APIs and access to 10,000+ prebuilt tools.", images: ["https://pipedream.com/connect/demo/opengraph-image.png"], }, -} +}; export default async function RootLayout({ children, }: Readonly<{ - children: React.ReactNode + children: React.ReactNode; }>) { - return ( - - {children} - + {children} - ) + ); } From 18beab8562a05c129aaf66e342f4d5514f5b067d Mon Sep 17 00:00:00 2001 From: Danny Roosevelt Date: Thu, 23 Oct 2025 14:43:08 -0700 Subject: [PATCH 3/3] updating default app and action to slack send message --- connect-react-demo/lib/app-state.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/connect-react-demo/lib/app-state.tsx b/connect-react-demo/lib/app-state.tsx index ebedb75..b0404d3 100644 --- a/connect-react-demo/lib/app-state.tsx +++ b/connect-react-demo/lib/app-state.tsx @@ -54,7 +54,7 @@ const useAppStateProviderValue = () => { }) } - const selectedAppSlug = queryParams.app || "google_sheets" + const selectedAppSlug = queryParams.app || "slack_v2" const setSelectedAppSlug = (value: string) => { updateStateAsync(() => { setQueryParams([ @@ -85,7 +85,7 @@ const useAppStateProviderValue = () => { const [webhookUrl, setWebhookUrl] = useState("") const [webhookUrlValidationAttempted, setWebhookUrlValidationAttempted] = useState(false) - const selectedComponentKey = queryParams.component || "google_sheets-add-single-row" + const selectedComponentKey = queryParams.component || "slack_v2-send-message-to-channel" const setSelectedComponentKey = (value: string) => { // Batch all state updates to prevent multiple configureComponent calls updateStateAsync(() => {