13 |
19 | )
20 |
--------------------------------------------------------------------------------
/managed-auth-basic-next-app/app/_components/ExternalLink.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import type { ReactNode } from "react";
4 |
5 | interface ExternalLinkProps {
6 | href: string;
7 | children: ReactNode;
8 | className?: string;
9 | }
10 |
11 | export function ExternalLink({ href, children, className = "" }: ExternalLinkProps) {
12 | return (
13 |
19 | {children}
20 |
21 | );
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/managed-auth-basic-next-app/public/typescript-icon.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/mcp/shared/config.d.ts:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | /**
3 | * Load environment configuration for examples
4 | * Tries to load .env from current working directory first, then from project root
5 | */
6 | export declare function loadConfig(): void;
7 | /**
8 | * Load and validate environment configuration with Zod schema
9 | * @param schema - Zod schema to validate environment variables
10 | * @returns Parsed and validated environment configuration
11 | */
12 | export declare function loadAndValidateConfig
14 |
17 | {icon}
15 | {title}
16 | {children}
18 |
16 | {shouldAnimate ? (
17 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/connect-react-demo/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef
18 |
19 |
20 | ) : output ? (
21 |
22 | {JSON.stringify(output, null, 2)}
23 |
24 | ) : null}
25 | Coming soon
24 |
14 |
30 | )
31 |
--------------------------------------------------------------------------------
/connect-react-demo/app/components/SectionHeader.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { cn } from "@/lib/utils"
4 | import { FC, ReactNode } from "react"
5 |
6 | interface SectionHeaderProps {
7 | title: string
8 | icon?: ReactNode
9 | children?: ReactNode
10 | variant?: "default" | "terminal"
11 | }
12 |
13 | export const SectionHeader: FC
15 |
17 |
18 |
19 |
23 |
24 | {externalUserId}
25 |
26 |
27 |
28 |
29 | User ID
16 |
20 | {externalUserId}
21 |
22 |
28 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/connect-react-demo/app/components/customization-select/default-unstyled.ts:
--------------------------------------------------------------------------------
1 | import type { CustomizationConfig } from "@pipedream/connect-react"
2 |
3 | const customization: CustomizationConfig
29 | {icon}
30 | {title}
31 |
32 | {children}
33 |
17 |
35 | )
36 |
--------------------------------------------------------------------------------
/mcp/shared/cli.d.ts.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["cli.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,6BAA6B,EAAE,MAAM,iDAAiD,CAAC;AAEhG,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,cAAc,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,aAAa,8PAIuE,CAAC;AAElG,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,WAclE;AAED,wBAAgB,uBAAuB,CACrC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,cAAc,GACtB,gBAAgB,CAYlB;AAED,wBAAsB,kBAAkB,CAAC,gBAAgB,EAAE,MAAM,0CAahE;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,QAS3E;AAED,wBAAgB,OAAO,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,QAE5D;AAED,wBAAgB,eAAe,SAE9B;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,QAElD;AAED,wBAAgB,aAAa,SAE5B;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,MAAM,QAE1C;AAED,wBAAgB,YAAY,SAE3B;AAED,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,iBAAiB,SAEhC;AAED,wBAAgB,uBAAuB,SAEtC;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,QAElD;AAED,wBAAgB,kBAAkB,SAEjC;AAED,wBAAgB,gBAAgB,SAE/B;AAED,wBAAgB,eAAe,SAE9B;AAED,wBAAgB,aAAa,SAE5B;AAED,wBAAgB,qBAAqB,SAUpC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,QAI1D"}
--------------------------------------------------------------------------------
/connect-react-demo/app/components/customization-select/CustomLabel.tsx:
--------------------------------------------------------------------------------
1 | import type { CSSProperties } from "react"
2 | import type { LabelProps } from "@pipedream/connect-react"
3 | import type { ConfigurableProp } from "@pipedream/sdk"
4 | import { useCustomize } from "@pipedream/connect-react"
5 |
6 | export function CustomLabel
18 |
34 | Theme
19 | Pipedream Connect: Managed Auth Demo App
15 |
16 |
26 |
27 |
17 | Refer to the
21 | When your customers connect accounts with Pipedream, pass their unique user ID from your system. In this example, 22 | we will use the following external user ID: 23 | {externalUserId}. 24 |
25 |
28 |
34 |
35 | );
36 | }
37 |
38 |
--------------------------------------------------------------------------------
/connect-react-demo/lib/constants/design-tokens.ts:
--------------------------------------------------------------------------------
1 | // Design tokens for consistent spacing, colors, and other design values
2 |
3 | export const SPACING = {
4 | xs: "0.25rem", // 4px
5 | sm: "0.5rem", // 8px
6 | md: "1rem", // 16px
7 | lg: "1.5rem", // 24px
8 | xl: "2rem", // 32px
9 | xxl: "3rem", // 48px
10 | } as const
11 |
12 | export const HEIGHTS = {
13 | tab: "3rem", // 48px (h-12)
14 | button: "2.5rem", // 40px (h-10)
15 | input: "2.25rem", // 36px (h-9)
16 | } as const
17 |
18 | export const BORDER_RADIUS = {
19 | sm: "0.25rem", // 4px
20 | md: "0.375rem", // 6px
21 | lg: "0.5rem", // 8px
22 | } as const
23 |
24 | export const COLORS = {
25 | primary: {
26 | 50: "#f0f9ff",
27 | 500: "#3b82f6",
28 | 600: "#2563eb",
29 | 700: "#1d4ed8",
30 | },
31 | neutral: {
32 | 50: "#fafafa",
33 | 100: "#f4f4f5",
34 | 200: "#e4e4e7",
35 | 300: "#d4d4d8",
36 | 500: "#71717a",
37 | 600: "#52525b",
38 | 700: "#3f3f46",
39 | 800: "#27272a",
40 | 900: "#18181b",
41 | },
42 | zinc: {
43 | 50: "#fafafa",
44 | 100: "#f4f4f5",
45 | 200: "#e4e4e7",
46 | 600: "#52525b",
47 | 900: "#18181b",
48 | }
49 | } as const
50 |
51 | export const COMMON_CLASSES = {
52 | input: "px-3 py-1.5 text-sm font-mono border rounded bg-zinc-50/50",
53 | button: "px-3 py-1.5 text-xs font-medium font-mono transition-colors",
54 | toggle: "w-fit flex rounded-md border border-zinc-200 shadow-sm",
55 | tab: "h-12 rounded-none border-b-2 border-transparent data-[state=active]:border-primary",
56 | } as const
--------------------------------------------------------------------------------
/managed-auth-basic-next-app/app/_components/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | 'use client'
2 |
3 | import React from 'react';
4 |
5 | interface ErrorBoundaryState {
6 | hasError: boolean;
7 | error?: Error;
8 | }
9 |
10 | interface ErrorBoundaryProps {
11 | children: React.ReactNode;
12 | fallback?: React.ReactNode;
13 | }
14 |
15 | export class ErrorBoundary extends React.Component
29 | In server.ts, the app calls serverConnectTokenCreate to create a short-lived token for the user. You'll
30 | use that token to initiate app connection requests securely.{" "}
31 |
33 |
44 | );
45 | }
46 |
47 | return this.props.children;
48 | }
49 | }
--------------------------------------------------------------------------------
/connect-react-demo/app/components/DemoTabTrigger.tsx:
--------------------------------------------------------------------------------
1 | import { TabsTrigger } from "@/components/ui/tabs"
2 | import { Badge } from "@/components/ui/badge"
3 | import { cn } from "@/lib/utils"
4 |
5 | interface DemoTabTriggerProps {
6 | value: string
7 | icon: React.ComponentType<{ className?: string }>
8 | label: string
9 | callCount?: number
10 | pendingCount?: number
11 | className?: string
12 | isMobile?: boolean
13 | }
14 |
15 | export function DemoTabTrigger({
16 | value,
17 | icon: Icon,
18 | label,
19 | callCount = 0,
20 | pendingCount = 0,
21 | className,
22 | isMobile = false
23 | }: DemoTabTriggerProps) {
24 | const baseClasses = "h-12 rounded-none border-b-2 border-transparent data-[state=active]:border-primary"
25 | const mobileClasses = "px-4 flex-1"
26 | const desktopClasses = "px-6"
27 |
28 | return (
29 | Something went wrong
34 |35 | There was an error loading this section. Please refresh the page to try again. 36 |
37 | 43 |
24 |
38 |
39 |
53 |
54 | )
55 | }
--------------------------------------------------------------------------------
/managed-auth-basic-next-app/app/_components/CodePanel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import React, { useEffect, useState } from "react";
4 | import Prism from "prismjs";
5 | import "prismjs/themes/prism-okaidia.css";
6 | import "prismjs/components/prism-typescript";
7 | import "prismjs/components/prism-python";
8 | import "prismjs/components/prism-bash";
9 |
10 | interface CodePanelProps {
11 | code: string;
12 | language: string;
13 | }
14 |
15 | const CodePanel = ({ code, language }: CodePanelProps) => {
16 | const [highlightedCode, setHighlightedCode] = useState("");
17 |
18 | useEffect(() => {
19 | // Use the correct language for highlighting, with fallback to typescript
20 | const languageGrammar = Prism.languages[language] || Prism.languages.typescript;
21 | const highlighted = Prism.highlight(
22 | code,
23 | languageGrammar,
24 | language,
25 | );
26 | const lines = highlighted.split("\n").map(
27 | (line, index) =>
28 | `
29 | ${index + 1}
30 | ${line}
31 |
`,
32 | );
33 | setHighlightedCode(lines.join(""));
34 | }, [code, language]);
35 |
36 | return (
37 |
38 |
45 | );
46 | };
47 |
48 | export default CodePanel;
49 |
--------------------------------------------------------------------------------
/connect-react-demo/app/components/ConfigAndCodePanel.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useState } from "react"
4 | import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
5 | import { ConfigPanel } from "./ConfigPanel"
6 | import { LiveCodePanel } from "./LiveCodePanel"
7 | import { IoSettingsOutline, IoCodeSlashOutline } from "react-icons/io5"
8 |
9 | export function ConfigAndCodePanel() {
10 | const [activeTab, setActiveTab] = useState("config")
11 |
12 | return (
13 |
39 |
44 | 40 |43 |41 |
42 |
14 |
15 |
31 |
33 |
34 |
35 |
37 |
38 |
39 | )
40 | }
--------------------------------------------------------------------------------
/mcp/shared/config.ts:
--------------------------------------------------------------------------------
1 | import { config } from "dotenv"
2 | import { dirname, join } from "path"
3 | import { existsSync } from "fs"
4 | import { z } from "zod"
5 |
6 | /**
7 | * Load environment configuration for examples
8 | * Tries to load .env from current working directory first, then from project root
9 | */
10 | export function loadConfig(): void {
11 | let dir = process.cwd()
12 | let envLoaded = false
13 |
14 | while (true) {
15 | const envPath = join(dir, '.env')
16 | if (existsSync(envPath)) {
17 | config({ path: envPath })
18 | envLoaded = true
19 | break
20 | }
21 |
22 | const parent = dirname(dir)
23 | if (parent === dir) {
24 | break
25 | }
26 |
27 | dir = parent
28 | }
29 |
30 | if (!envLoaded) {
31 | config()
32 | }
33 | }
34 |
35 | /**
36 | * Load and validate environment configuration with Zod schema
37 | * @param schema - Zod schema to validate environment variables
38 | * @returns Parsed and validated environment configuration
39 | */
40 | export function loadAndValidateConfig
16 |
17 |
18 |
22 |
23 |
27 |
28 |
29 |
30 |
42 |
54 | )
55 | }
56 |
57 | return this.props.children
58 | }
59 | }
--------------------------------------------------------------------------------
/connect-react-demo/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import * as ResizablePrimitive from "react-resizable-panels"
3 | import { cn } from "@/lib/utils"
4 | import { IoReorderThreeOutline } from "react-icons/io5"
5 |
6 | const ResizablePanelGroup = ({
7 | className,
8 | ...props
9 | }: React.ComponentPropsSomething went wrong
43 |44 | {this.state.error?.message || "An unexpected error occurred"} 45 |
46 | 53 |
37 |
39 | )}
40 |
14 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/connect-react-demo/app/components/ComponentTypeSelector.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils"
2 | import { IoCubeSharp, IoFlashOutline } from "react-icons/io5"
3 | import { TOGGLE_STYLES } from "@/lib/constants/ui"
4 | import { ComponentType } from "@pipedream/sdk"
5 |
6 | interface ComponentTypeSelectorProps {
7 | selectedType: ComponentType
8 | onTypeChange: (type: ComponentType) => void
9 | }
10 |
11 | const COMPONENT_TYPES = [
12 | {
13 | value: "action",
14 | label: "Action",
15 | icon: IoCubeSharp,
16 | description: "Perform read and write API operations"
17 | },
18 | {
19 | value: "trigger",
20 | label: "Trigger",
21 | icon: IoFlashOutline,
22 | description: "React to events and webhooks"
23 | },
24 | ] as const
25 |
26 | export function ComponentTypeSelector({ selectedType, onTypeChange }: ComponentTypeSelectorProps) {
27 | return (
28 |
15 |
38 |
16 |
37 |
17 |
36 |
18 |
35 |
19 |
32 |
33 | {children}
34 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
31 |
28 | preview.myapp.com
29 |
30 |
29 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/connect-react-demo/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import "./globals.css";
3 | import { DatadogScript } from "./components/DatadogScript";
4 | import { GoogleAnalytics } from "./components/GoogleAnalytics";
5 | import { GeistSans } from "geist/font/sans";
6 |
7 | export const metadata: Metadata = {
8 | title: "One SDK, thousands of API integrations",
9 | description:
10 | "Pipedream Connect provides managed authentication for 3,000+ 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.",
11 | openGraph: {
12 | title: "One SDK, thousands of API integrations",
13 | description:
14 | "Pipedream Connect provides managed authentication for 3,000+ 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.",
15 | url: "https://pipedream.com/connect",
16 | siteName: "Pipedream Connect",
17 | images: [
18 | {
19 | url: "https://pipedream.com/connect/demo/opengraph-image.png",
20 | width: 1200,
21 | height: 630,
22 | alt: "Pipedream Connect",
23 | },
24 | ],
25 | locale: "en_US",
26 | type: "website",
27 | },
28 | twitter: {
29 | card: "summary_large_image",
30 | title: "One SDK, thousands of API integrations",
31 | description:
32 | "Pipedream Connect provides managed authentication for 3,000+ APIs and access to 10,000+ prebuilt tools.",
33 | images: ["https://pipedream.com/connect/demo/opengraph-image.png"],
34 | },
35 | };
36 |
37 | export default async function RootLayout({
38 | children,
39 | }: Readonly<{
40 | children: React.ReactNode;
41 | }>) {
42 | return (
43 |
44 |
30 | {COMPONENT_TYPES.map((type, index) => (
31 |
50 |
51 |
32 |
46 | {index === 0 && }
47 |
48 | ))}
49 |
52 | {COMPONENT_TYPES.find(type => type.value === selectedType)?.description}
53 |
54 |
32 |
46 |
67 | )
68 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
47 |
63 | {children}
64 |
65 |
66 | 
3 | Pipedream Connect Examples
4 | 5 | 6 |7 | Connect provides a developer toolkit that lets you add 3,000+ 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. 8 |
9 | 10 |11 | Managed Auth · 12 | Connect SDK and React Playground · 13 | MCP 14 |
15 |16 | 17 | - This repo provides a collection of demo apps to highlight example implementations 18 | - **Always refer to [Pipedream's developer docs](https://pipedream.com/docs/connect/mcp/developers) for the most up to date information** 19 | 20 | ## Managed Auth 21 | 22 | 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 3,000 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. 23 | 24 | ## Connect React 25 | 26 | The **[connect-react-demo](/connect-react-demo/)** demonstrates how you can embed any of the 10,000+ Pipedream actions and triggers directly in your app or AI agent. Check out the [connect-react](https://github.com/PipedreamHQ/pipedream/tree/master/packages/connect-react) for more info on the SDK, and the [core Pipedream docs](https://pipedream.com/docs/connect/components) for a good overview with detailed examples. 27 | 28 | **You can play around with the hosted version of this app at [pipedream.com/connect/demo](https://pipedream.com/connect/demo).** 29 | 30 | ## MCP 31 | 32 | The **[mcp](/mcp/)** directory contains CLI examples that demonstrate how to integrate with Pipedream's MCP (Model Context Protocol) server using different AI SDKs for developers who are building AI chat apps or AI agents. See [the docs](https://pipedream.com/docs/connect/mcp/developers) for more info. 33 | -------------------------------------------------------------------------------- /connect-react-demo/app/components/customization-select/dark-theme.ts: -------------------------------------------------------------------------------- 1 | import { CustomizationConfig } from "@pipedream/connect-react" 2 | 3 | const customization: CustomizationConfig
22 |
83 | )
84 |
--------------------------------------------------------------------------------
/connect-react-demo/app/components/customization-select/blue-theme.ts:
--------------------------------------------------------------------------------
1 | import { CustomizationConfig } from "@pipedream/connect-react"
2 | import { CustomDropdownIndicator } from "./CustomIndicators"
3 | import { CustomLabel } from "./CustomLabel"
4 |
5 | const customization: CustomizationConfig = {
6 | components: {
7 | Label: CustomLabel,
8 | controlSelect: {
9 | DropdownIndicator: CustomDropdownIndicator,
10 | },
11 | },
12 | styles: {
13 | label: { fontSize: "80%" },
14 | controlInput: (base, { theme }) => ({
15 | ...base,
16 | borderTop: 0,
17 | borderLeft: 0,
18 | borderRight: 0,
19 | border: "solid",
20 | borderColor: theme.colors.primary,
21 | backgroundColor: theme.colors.neutral0,
22 | }),
23 | description: { fontSize: "60%" },
24 | field: { padding: 2 },
25 | heading: { fontSize: "80%" },
26 | controlSelect: {
27 | control: (base, { theme }) => ({
28 | ...base,
29 | borderRadius: 0,
30 | borderColor: theme.colors.primary25,
31 | fontSize: "small",
32 | maxHeight: "36px",
33 | }),
34 | container: (base) => ({
35 | ...base,
36 | fontSize: "small",
37 | }),
38 | menu: (base) => ({
39 | ...base,
40 | fontSize: "small",
41 | }),
42 | },
43 | controlSubmit: (base, { form, theme }) => {
44 | const spinner = ``
45 | return {
46 | ...base,
47 | backgroundImage: form.submitting ? `url('data:image/svg+xml;base64,${btoa(spinner)}')` : "unset",
48 | backgroundPosition: "right 15% top 50%",
49 | backgroundRepeat: "no-repeat",
50 | }
51 | },
52 | },
53 | theme: {
54 | borderRadius: 0,
55 | colors: {
56 | primary: "hsl(200, 100%, 60%)",
57 | primary75: "hsl(200, 100%, 55%)",
58 | primary50: "hsl(200, 100%, 40%)",
59 | primary25: "hsl(200, 100%, 35%)",
60 |
61 | danger: "#DE350B",
62 | dangerLight: "#FFBDAD",
63 |
64 | neutral0: "hsl(200, 50%, 97%)",
65 | neutral5: "hsl(200, 50%, 95%)",
66 | neutral10: "hsl(200, 50%, 90%)",
67 | neutral20: "hsl(200, 50%, 80%)",
68 | neutral30: "hsl(200, 50%, 70%)",
69 | neutral40: "hsl(200, 50%, 60%)",
70 | neutral50: "hsl(200, 50%, 50%)",
71 | neutral60: "hsl(200, 50%, 40%)",
72 | neutral70: "hsl(200, 50%, 30%)",
73 | neutral80: "hsl(200, 50%, 20%)",
74 | neutral90: "hsl(200, 50%, 10%)",
75 | },
76 | spacing: {
77 | baseUnit: 4,
78 | controlHeight: 10,
79 | menuGutter: 6,
80 | },
81 | },
82 | }
83 |
84 | export default customization
85 |
--------------------------------------------------------------------------------
/connect-react-demo/app/components/TerminalCollapsible.tsx:
--------------------------------------------------------------------------------
1 | import { IoTerminalOutline } from "react-icons/io5"
2 | import {
3 | Collapsible,
4 | CollapsibleContent,
5 | CollapsibleTrigger,
6 | } from "@/components/ui/collapsible"
7 | import { Terminal } from "./Terminal"
8 | import type { TerminalOutput } from "./Terminal"
9 | import { SectionHeader } from "./SectionHeader"
10 | import { cn } from "@/lib/utils"
11 |
12 | interface TerminalCollapsibleProps {
13 | isOpen: boolean
14 | onOpenChange: (open: boolean) => void
15 | hasOutput: boolean
16 | output?: TerminalOutput | null
17 | }
18 |
19 | export const TerminalCollapsible = ({
20 | isOpen,
21 | onOpenChange,
22 | hasOutput,
23 | output,
24 | }: TerminalCollapsibleProps) => {
25 | const getStatusMessage = () => {
26 | if (!hasOutput) return "Waiting for submission..."
27 | return "Response received"
28 | }
29 |
30 | return (
31 |
23 |
34 |
35 |
24 |
28 |
25 | Hide Optional Props
26 |
27 |
36 |
82 |
37 |
60 | {propNames.length > 0 && (
61 |
38 | Filter Props
39 |
40 | {!propNames.length && (
41 |
58 | )}
59 |
62 |
80 | )}
81 |
39 |
56 |
57 |
62 |
64 |
77 |
87 | {active && (
88 |
95 | )}
96 |
97 | )
98 |
--------------------------------------------------------------------------------
/mcp/shared/cli.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"cli.js","sourceRoot":"","sources":["cli.ts"],"names":[],"mappings":"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"}
--------------------------------------------------------------------------------
/connect-react-demo/app/components/DemoHeader.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button"
2 | import {
3 | DropdownMenu,
4 | DropdownMenuContent,
5 | DropdownMenuItem,
6 | DropdownMenuTrigger,
7 | } from "@/components/ui/dropdown-menu"
8 | import { PipedreamLogo } from "./PipedreamLogo"
9 | import { IoHelpCircleOutline, IoMenuOutline } from "react-icons/io5"
10 | import { SiGithub } from "react-icons/si"
11 |
12 | const NAV_LINKS = [
13 | { href: "https://pipedream.com/support", label: "Contact us", icon: IoHelpCircleOutline },
14 | { href: "https://pipedream.com/docs/connect/components", label: "Read the docs", icon: "📖" },
15 | { href: "https://github.com/PipedreamHQ/pipedream-connect-examples/tree/master/connect-react-demo", label: "View on GitHub", icon: SiGithub },
16 | ]
17 |
18 | export function DemoHeader() {
19 | return (
20 |
21 |
77 | )
78 | }
--------------------------------------------------------------------------------
/managed-auth-basic-next-app/app/_hooks/useAppsSearch.ts:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useCallback, useRef, useState } from "react";
4 | import type { App, PipedreamClient as FrontendClient } from "@pipedream/sdk/browser";
5 |
6 | interface UseAppsSearchResult {
7 | results: App[];
8 | isSearching: boolean;
9 | isLoadingMore: boolean;
10 | hasMore: boolean;
11 | currentQuery?: string;
12 | searchApps: (query?: string) => Promise
22 |
24 |
25 |
26 |
33 |
41 |
46 |
47 |
48 |
49 |
50 |
51 |
55 |
56 |
57 | {NAV_LINKS.map((link) => (
58 | window.open(link.href, "_blank")}
61 | className="justify-start"
62 | >
63 | {typeof link.icon === "string" ? (
64 |
72 | ))}
73 |
74 |
75 |
76 |
65 | {link.icon}
66 |
67 | ) : (
68 |
52 |
129 | )
130 | }
131 |
--------------------------------------------------------------------------------
/connect-react-demo/app/components/LiveCodePanel.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useState } from "react"
4 | import { useAppState } from "@/lib/app-state"
5 | import { cn } from "@/lib/utils"
6 | import { CodeBlock } from "./ui/code-block"
7 | import {
8 | generateComponentCode,
9 | generateSetupCode,
10 | generateApiCode,
11 | CODE_FILES
12 | } from "@/lib/code-templates"
13 |
14 | export function LiveCodePanel() {
15 | const {
16 | selectedComponentType,
17 | selectedComponentKey,
18 | externalUserId,
19 | configuredProps,
20 | webhookUrl,
21 | selectedApp,
22 | hideOptionalProps,
23 | enableDebugging,
24 | propNames
25 | } = useAppState()
26 |
27 | const [activeTab, setActiveTab] = useState("current")
28 | const [showLiveUpdates, setShowLiveUpdates] = useState(true)
29 |
30 | const currentComponentCode = generateComponentCode({
31 | externalUserId,
32 | componentKey: selectedComponentKey,
33 | configuredProps,
34 | selectedComponentType,
35 | webhookUrl,
36 | hideOptionalProps,
37 | enableDebugging,
38 | propNames
39 | })
40 |
41 | const setupCode = generateSetupCode(externalUserId)
42 |
43 | const apiCode = generateApiCode(externalUserId)
44 |
45 | const files = CODE_FILES
46 |
47 | const getCodeForFile = (fileId: string) => {
48 | switch (fileId) {
49 | case "current": return currentComponentCode
50 | case "setup": return setupCode
51 | case "api": return apiCode
52 | default: return ""
53 | }
54 | }
55 |
56 | return (
57 |
53 |
66 | {customizationOption.file && (
67 |
80 | )}
81 |
82 |
103 |
104 |
105 |
106 |
123 | {fileCode || code}
124 |
125 |
126 |
127 | {formControls}
128 |
58 | {/* Header section - fixed height */}
59 |
120 | )
121 | }
--------------------------------------------------------------------------------
/mcp/shared/cli.ts:
--------------------------------------------------------------------------------
1 | import { Command } from "commander";
2 | import { config as pdConfig, pdHeaders } from "./pd.js";
3 | import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp";
4 |
5 | export interface ProgramOptions {
6 | model: string;
7 | maxSteps: number;
8 | external_user_id: string;
9 | }
10 |
11 | export interface ProcessingConfig {
12 | instruction: string;
13 | options: ProgramOptions;
14 | maxSteps: number;
15 | }
16 |
17 | export const SYSTEM_PROMPT = `You are an intelligent AI assistant that can use Pipedream tools to help users.
18 |
19 | Use the available tools to fulfill the user's request effectively.
20 |
21 | If you encounter any errors or need clarification, explain what happened and suggest next steps.`;
22 |
23 | export function createBaseProgram(name: string, description: string) {
24 | const program = new Command();
25 |
26 | return program
27 | .name(name)
28 | .description(description)
29 | .version("1.0.0")
30 | .argument("
60 |
89 |
90 | {/* Code section */}
91 |
61 |
66 |
67 | {/* IDE-style file tabs */}
68 | Implementation Code
62 |63 | {files.find(f => f.id === activeTab)?.description || "Ready-to-use React files - copy these into your project to add Pipedream Connect"} 64 |
65 |
69 | {files.map((file, index) => (
70 |
86 | ))}
87 |
88 |
92 |
93 | {getCodeForFile(activeTab)}
94 |
95 |
96 | {activeTab === "current" && selectedComponentKey && showLiveUpdates && (
97 |
119 |
98 |
117 | )}
118 |
99 |
100 |
116 |
101 |
106 |
115 | Live Updates
102 |103 | This code updates in real-time as you configure the component in the demo. 104 |
105 |
32 |
128 | );
129 | }
130 |
--------------------------------------------------------------------------------
/mcp/ai-sdk/index.ts:
--------------------------------------------------------------------------------
1 | import { openai } from "@ai-sdk/openai";
2 | import {
3 | ModelMessage,
4 | experimental_createMCPClient,
5 | generateText,
6 | stepCountIs,
7 | } from "ai";
8 | import {
9 | createBaseProgram,
10 | validateAndParseOptions,
11 | createMCPTransport,
12 | logProcessingStart,
13 | logStep,
14 | logToolsLoading,
15 | logAvailableTools,
16 | logAIResponse,
17 | logResponse,
18 | logToolCalls,
19 | logToolResults,
20 | logConversationComplete,
21 | logMaxStepsReached,
22 | logSessionComplete,
23 | logClosingClient,
24 | logClientClosed,
25 | logContinuing,
26 | setupGracefulShutdown,
27 | handleError,
28 | SYSTEM_PROMPT,
29 | ProgramOptions,
30 | } from "../shared/cli.js";
31 |
32 | const program = createBaseProgram(
33 | "ai-sdk",
34 | "AI SDK CLI tool with MCP integration"
35 | );
36 |
37 | program.action(async (instruction: string, options: ProgramOptions) => {
38 | const config = validateAndParseOptions(instruction, options);
39 |
40 | let mcpClient:
41 | | AwaitedConnect your account
33 |
34 | {
84 | const res = await fetch("/api/pipedream/token", {
85 | method: "POST",
86 | headers: { "content-type": "application/json" },
87 | body: JSON.stringify({ externalUserId }),
88 | });
89 |
90 | if (!res.ok) {
91 | throw new Error("Failed to fetch connect token");
92 | }
93 |
94 | const { token, expiresAt } = await res.json();
95 | return { token, expiresAt: new Date(expiresAt) };
96 | },
97 | });
98 |
99 | pd.connectAccount({
100 | app: "${selectedApp.data.nameSlug}",
101 | onSuccess: ({ id: accountId }) => {
102 | console.log('🎉 Connection successful!', { accountId });
103 | },
104 | });`}
105 | />
106 |
107 | Option 1: Connect via SDK
35 |
36 | Use the frontend SDK to open a Pipedream iFrame directly from your site (
37 |
44 |
71 | )}
72 |
45 | ✅ Account connected!{" "}
46 | {accountName ? (
47 | <>
48 | {accountName} (ID:
49 |
58 | {accountId}
50 | )
51 |
52 | ) : (
53 | <>
54 | Account ID: {accountId}
55 |
56 | )}
57 |
59 | You can manage users and their connected accounts in the
60 | {projectId ? (
61 |
62 | Pipedream UI
63 |
64 | ) : (
65 | Pipedream UI
66 | )}
67 | or
68 | via the API
69 |
70 |
73 | Call connectAccount() with the token and the app slug of the app you'd like to connect:
74 |
108 |
127 | Option 2: Connect Link
109 |
110 | Give your users a link to connect their account when you can't run JavaScript / iFrames.
111 | See the docs
112 | or learn how
113 | Pipedream's MCP server
114 | uses Connect Link URLs in chat interfaces.
115 |
116 | {connectLinkUrl && (
117 |
123 | {connectLinkUrl}&app={selectedApp.data.nameSlug}
124 |
125 | )}
126 |
45 |
55 | ));
56 |
57 | CommandInput.displayName = CommandPrimitive.Input.displayName;
58 |
59 | const CommandList = React.forwardRef<
60 | React.ElementRef
86 |
95 | ))
96 | NavigationMenuViewport.displayName =
97 | NavigationMenuPrimitive.Viewport.displayName
98 |
99 | const NavigationMenuIndicator = React.forwardRef<
100 | React.ElementRef
25 |
49 | )
50 | }`
51 | }
52 |
53 | const optionalProps = [
54 | data.hideOptionalProps && ` hideOptionalProps={true}`,
55 | data.enableDebugging && ` enableDebugging={true}`,
56 | data.propNames?.length && ` propNames={${JSON.stringify(data.propNames)}}`,
57 | ].filter(Boolean).join('\n')
58 |
59 | const webhookUrlLine = data.selectedComponentType === "trigger"
60 | ? `\n webhookUrl: "${data.webhookUrl || 'https://your-app.com/webhook'}",`
61 | : ""
62 |
63 | return `import { ComponentForm, useFrontendClient, useComponent } from "@pipedream/connect-react"
64 | import { useState } from "react"
65 |
66 | function MyComponent() {
67 | const frontendClient = useFrontendClient()
68 | const [configuredProps, setConfiguredProps] = useState(${JSON.stringify(data.configuredProps, null, 2).replace(/\n/g, '\n ')})
69 |
70 | const { component } = useComponent({
71 | key: "${data.componentKey}"
72 | })
73 |
74 | const handleSubmit = async (ctx) => {
75 | const result = await frontendClient.${data.selectedComponentType === "action" ? "actions.run" : "triggers.deploy"}({
76 | externalUserId: "${data.externalUserId}",
77 | id: "${data.componentKey}",
78 | configuredProps: ctx.configuredProps,${webhookUrlLine}
79 | })
80 |
81 | // Handle success - show toast, redirect, etc.
82 | }
83 |
84 | return (
85 |
26 |
29 |
34 |
35 | {selectedApp && (
36 |
37 |
40 |
47 | )}
48 |
86 |
94 | )
95 | }`
96 | }
97 |
98 | export const generateSetupCode = (externalUserId: string) => `import { FrontendClientProvider } from "@pipedream/connect-react"
99 | import { createFrontendClient } from "@pipedream/sdk/browser"
100 |
101 | export function ClientProvider({ children }) {
102 | const client = createFrontendClient({
103 | projectEnvironment: process.env.NEXT_PUBLIC_PIPEDREAM_PROJECT_ENVIRONMENT,
104 | tokenCallback: async ({ externalUserId }) => {
105 | // Call your backend to get a Connect token for this user
106 | const response = await fetch('/api/connect/token', {
107 | method: 'POST',
108 | headers: { 'Content-Type': 'application/json' },
109 | body: JSON.stringify({ externalUserId }),
110 | })
111 | const { token } = await response.json()
112 | return token
113 | },
114 | externalUserId: "${externalUserId}", // Your user's unique ID
115 | })
116 |
117 | return (
118 |