Pipedream Connect Integration

A Next.js application that integrates with Pipedream Connect to allow users to configure triggers and actions for various apps.

Features

• Type Selection: Choose between triggers and actions
• App Selection: Browse and select from available Pipedream apps
• Component Configuration: Configure triggers/actions with dynamic forms
• State Persistence: Configured props are maintained across component switches
• Modern UI: Built with shadcn/ui components and Tailwind CSS

Prerequisites

Before you begin, you'll need:

1. A Pipedream account
2. A Pipedream project (create one at pipedream.com/projects)
3. Pipedream OAuth client credentials (create at Pipedream API OAuth)

Installation

1. Install dependencies:

npm install

2. Set up your environment variables by creating a .env.local file in the root directory:

# Pipedream Connect Configuration

# Project ID - Find this in your Pipedream project settings
NEXT_PUBLIC_PIPEDREAM_PROJECT_ID=your_project_id_here

# OAuth Client ID and Secret - Create these at https://pipedream.com/docs/rest-api/auth#creating-an-oauth-client
PIPEDREAM_CLIENT_ID=your_client_id_here
PIPEDREAM_CLIENT_SECRET=your_client_secret_here

# Environment (development or production)
NEXT_PUBLIC_PIPEDREAM_ENVIRONMENT=development

# Allowed Origins - Set this to match your app's origin
# Format: ["http://localhost:3000"] or ["https://example.com", "http://localhost:3000"]
PIPEDREAM_ALLOWED_ORIGINS=["http://localhost:3000"]

Getting Pipedream Credentials

1. Get Your Project ID

1. Go to pipedream.com/projects
2. Create a new project or select an existing one
3. Copy the Project ID from your project settings

2. Create OAuth Client

1. Go to your Pipedream account settings
2. Navigate to the API section
3. Create a new OAuth client
4. Copy the Client ID and Client Secret

3. Set Allowed Origins

Make sure to set the PIPEDREAM_ALLOWED_ORIGINS environment variable to include all origins where your app will run (e.g., ["http://localhost:3000"] for development).

Running the Application

Start the development server:

npm run dev

Open http://localhost:3000 in your browser.

How to Use

1. Select Type: Choose between "Trigger" or "Action"
2. Select App: Choose an app from the dropdown (e.g., Slack, GitHub, Google Sheets)
3. Select Component: Pick a specific trigger or action from the list
4. Configure: Fill in the required fields in the form
5. Switch Components: Navigate between different components - your configurations are saved

Example Workflow

1. Select "Action" as the type
2. Choose "Slack" from the app dropdown
3. Select "Send Message to Channel"
4. Fill in the required fields (channel, message, etc.)
5. Switch to another component - when you return, your previous configuration will be pre-populated

Project Structure

├── app/
│   ├── actions.ts          # Server-side token fetching
│   ├── layout.tsx          # Root layout with Pipedream provider
│   └── page.tsx            # Main integration page
├── components/
│   ├── providers.tsx       # Pipedream client provider
│   └── ui/                 # shadcn/ui components
│       ├── button.tsx
│       ├── card.tsx
│       ├── label.tsx
│       └── select.tsx
└── lib/
    └── utils.ts            # Utility functions

Technologies Used

• Next.js 15 - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS - Styling
• shadcn/ui - UI component library
• Pipedream Connect React - Pipedream integration components
• Pipedream SDK - API client for Pipedream

Key Features Explained

State Management

The application uses React state to store configured props for each component. When you configure a component and switch to another one, your configuration is preserved in memory. This allows you to:

• Configure multiple components in a single session
• Switch between components without losing your work
• Review previously configured components

ComponentFormContainer

The ComponentFormContainer from Pipedream Connect React handles:

• Dynamic form generation based on component requirements
• OAuth app connections
• Field validation
• Prop configuration

Theming

The application uses a light theme by default and ensures that Pipedream's ComponentFormContainer styles are not overridden, maintaining a consistent look and feel.

Troubleshooting

"Module not found" errors

Make sure all dependencies are installed:

npm install

OAuth/Authentication errors

1. Verify your environment variables are set correctly
2. Check that your Project ID, Client ID, and Client Secret are valid
3. Ensure PIPEDREAM_ALLOWED_ORIGINS includes your app's origin

Components not loading

1. Check your network connection
2. Verify your Pipedream credentials are correct
3. Make sure the selected app has available triggers/actions

Development

To build for production:

npm run build
npm start

To run linting:

npm run lint

Notes

• The externalUserId is currently set to "demo-user". In a production app, this should come from your authentication system and represent your actual user IDs.
• OAuth credentials are fetched securely from the backend using Next.js server actions.
• The application uses --legacy-peer-deps for installation due to React 19 compatibility. Pipedream Connect React works fine despite the peer dependency warning.

Learn More

• Pipedream Connect Documentation
• Pipedream API Documentation
• Next.js Documentation
• shadcn/ui Documentation

License

This project is for demonstration purposes.