Does Pipedream Connect offer embedded features and a white-label experience for AI agent projects, and can it directly invoke Google Calendar actions/APIs without creating workflows?

1

This topic was automatically generated from Slack. You can find the original thread here.

Hi everyone, I’m considering Pipedream Connect for my AI Agent project. Can someone please help me understand what embedded features are available?

I’m building a B2B app which will let my users:

  1. Define and run Workflows
  2. Create AI Agents that will perform Actions in real-time, such as book events using Google Calendar.
    For #1 does Pipedream provide any embedded / whitelabel experience? I’d prefer if my users do not have to leave my app. If not embedded then what will the user experience look like – can my users switch over to Pipedream to define the WFs, and then come back to my app to run them?

For #2 I understand that I can use Pipedream Connect to OAuth my user’s Google Calendar account, and then invoke workflows. Is there a way to invoke Google Calendar actions/APIs directly without creating Workflows? Somehow it doesn’t seem intuitive to create a "workflow” to perform a single action of creating a calendar event.

Thanks!

2

Yes! We’re starting to roll out access to embed triggers and actions directly in your app, and this my solve both #1 and #2 for you. While the entire workflow builder is not embeddable today, with our components SDK and API, you’re able to embed individual triggers and actions directly in your application, and you can either use our React UI components in our frontend SDK, or build your own.

3

Here’s the demo app to show you how embedding actions in your app could work: Demo - Pipedream Connect

4

Excellent, thank you!

and you can either use our React UI components in our frontend SDK, or build your own.
Besides /sdk and @U080WU6G482/connect-react, are there other packages that I need to know about? I don’t see the app (Slack) icon in the demo, so I’m guessing I’ll have to provide the icons for now?

Also, I noticed that the integration uses Pipedream’s Google Calendar app (see screenshot). Can I use my own Google Calendar app instance and have Pipedream manage the OAuth?

Screenshot 2024-12-05 at 5.39.51 PM.png
Screenshot 2024-12-05 at 5.39.51 PM.png2108×1036 210 KB

5

Where are you not seeing the icon? The icon URL should be returned when you fetch the apps from the API.

6

Yea you can definitely use your own OAuth: https://pipedream.com/docs/connect/oauth-clients

7

I’d like to show the app (Slack) icon here (see screenshot).

Where can I find documentation on the primitive APIs for:
• [Frontend, React] Embedding a ‘connect app’ button (with icon)
• [Backend] Running an individual action without creating a workflow.
I started reading the Components documentation but seems like it’s more about developing the Components and less about using/running them.

Screenshot 2024-12-05 at 6.17.17 PM.png
Screenshot 2024-12-05 at 6.17.17 PM.png2880×1554 500 KB

8

Yea, that demo app is purely to show an example of the implementation. The idea is that you’d use the React component and style them however you want to match your site’s design and brand, so you can add whatever icons you want.

9

As we’re just starting to share access to this, docs are still in progress but coming soon. You’re right that the docs you linked to are focused on developing components, not accessing them via the API / SDK.

10

But check out the Connect quickstart to learn more about your first question and integrating a Connect app or Connect your account button in your app: GitHub

11

Those docs focus on the authentication portion, we’re still working on docs for the embeddable triggers and actions, but this is another good resource in the meantime: pipedream/packages/connect-react at master · PipedreamHQ/pipedream · GitHub

12

I followed the Connect Quickstart docs and was able to connect and fetch accounts. Then I got stuck at running actions. Thanks for sharing the Github link - checking it out.

13

I couldn’t find documentation on running actions from Github. Here what’s I found:

I see an actionRun function in the SDK, but it’s not clear how to find the inputs like actionId
• Is that the component key, e.g., google_calendar-quick-add-event?
I know I can create a Workflow, add an Action to it and then run the Workflow. But I’m trying to avoid that as I’d like to run actions directly.

14

Yea, actionId is that component key that you referenced — you should be able to get those from here

15

I’m trying to avoid that as I’d like to run actions directly
Yep that’s exactly what this SDK enables

16

I ran into TypeError: Cannot read properties of undefined (reading 'oauth_access_token') when I invoked actionRun.

17

Can you show me the payload?

18 
pd.actionRun({
    userId: 'beb48a74-ebeb-4675-890e-e831cf0e6ea7',
    actionId: 'google_calendar-quick-add-event',
    configuredProps: { text: 'Meet with Oli 10am 12/22/2024' },
})

I’m trying to use the SDK function from a NextJS app. I don’t notice any network logs for this invocation, so I’m guess it’s failing in the client side validation.

I only found 1 reference of the actionRun function in the CLI so maybe it’s not the right function? Do you have any sample code that runs an action?

Also, I didn’t actually configure any action/component for this. I’m assuming that the configuredProps will run the action dynamically. My user Id has a connected OAuth client (OAuth App Id: oa_RpiQjD).

19

Looks like you’re missing the app prop in configuredProps — can you try adding

googleCalendar: {
  authProvisionId: "<account.id>" // apn_abc1234
}

to the configuredProps object?

20

Great, it works now!