Skip to content

Commit 22d1d93

Browse files
Adding MCP examples, cleaning up Readme
1 parent 7deafbc commit 22d1d93

23 files changed

+4740
-5
lines changed

.gitignore

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Dependencies
2+
node_modules/
3+
npm-debug.log*
4+
yarn-debug.log*
5+
yarn-error.log*
6+
pnpm-debug.log*
7+
8+
# Build outputs
9+
dist/
10+
build/
11+
.next/
12+
out/
13+
14+
# Environment files
15+
.env
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
# IDE files
22+
.vscode/
23+
.idea/
24+
*.swp
25+
*.swo
26+
27+
# OS files
28+
.DS_Store
29+
Thumbs.db
30+
31+
# Temporary files
32+
*.tmp
33+
*.temp
34+
35+
# TypeScript
36+
*.tsbuildinfo

README.md

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,32 @@
1-
# Pipedream Connect examples
1+
<a href="https://pipedream.com/connect">
2+
<img alt="Pipedream Connect" src="https://res.cloudinary.com/pipedreamin/image/upload/v1756328952/connect-image_ygqjeq.png">
3+
<h1 align="center">Pipedream Connect Examples</h1>
4+
</a>
25

3-
Learn more about Pipedream Connect [here](https://pipedream.com/connect) and in our official docs [here](https://pipedream.com/docs/connect).
6+
<p align="center">
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.
8+
</p>
49

5-
This repo provides a collection of demo apps to highlight example implementations:
10+
<p align="center">
11+
<a href="#managed-auth"><strong>Managed Auth</strong></a> ·
12+
<a href="#connect-react"><strong>Connect SDK and React Playground</strong></a> ·
13+
<a href="#mcp"><strong>MCP</strong></a>
14+
</p>
15+
<br/>
616

7-
- **[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,700 apps available on Pipedream. This is an example Next.js app, but the SDK works in any JavaScript environment, and there are corresponding REST API as well. [Refer to our docs](https://pipedream.com/docs/connect) for more info.
8-
- **[connect-react-demo](/connect-react-demo/)** demonstrates how you can embed any of the 10k+ 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.
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 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.
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.

mcp/.env.example

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# AI providers
2+
OPENAI_API_KEY= # sk-xxx...
3+
ANTHROPIC_API_KEY= # sk-xxx...
4+
GOOGLE_GENERATIVE_AI_API_KEY= #
5+
EXA_API_KEY= # To enable web searches
6+
7+
# Pipedream credentials
8+
# Read more here: https://pipedream.com/docs/connect/mcp/developers/#prerequisites
9+
PIPEDREAM_CLIENT_ID=
10+
PIPEDREAM_CLIENT_SECRET=
11+
PIPEDREAM_PROJECT_ID= # proj_xxxxxxx
12+
PIPEDREAM_PROJECT_ENVIRONMENT= # development | production

mcp/README.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Pipedream MCP CLI Examples
2+
3+
This directory contains CLI examples that demonstrate how to integrate with Pipedream's MCP (Model Context Protocol) server using different AI SDKs.
4+
5+
## Examples
6+
7+
- **ai-sdk/**: Example using Vercel's AI SDK with automatic tool handling
8+
- **openai-sdk/**: Example using OpenAI SDK directly with manual tool conversion for full control
9+
- **shared/**: Shared utilities used by both CLI examples
10+
11+
## Prerequisites
12+
13+
To set up your environment, you'll need:
14+
15+
1. A [Pipedream account](https://pipedream.com/auth/signup)
16+
2. A [Pipedream project](https://pipedream.com/docs/projects/#creating-projects)
17+
3. [Pipedream OAuth credentials](https://pipedream.com/docs/rest-api/auth/#oauth)
18+
4. An [OpenAI API key](https://platform.openai.com/api-keys)
19+
20+
## Setup
21+
22+
1. Copy the example environment file and add your credentials:
23+
24+
```bash
25+
cp .env.example .env
26+
# Edit .env with your API keys and Pipedream credentials
27+
```
28+
29+
2. Install dependencies:
30+
31+
```bash
32+
pnpm install
33+
```
34+
35+
## Usage
36+
37+
### AI SDK Example
38+
39+
```bash
40+
pnpm ai-sdk -u <external-user-id> "Send a funny joke to the #random channel in Slack"
41+
```
42+
43+
### OpenAI SDK Example
44+
45+
```bash
46+
pnpm openai-sdk -u <external-user-id> "Send a funny joke to the #random channel in Slack"
47+
```
48+
49+
## For the Full Chat App
50+
51+
For a complete chat application example that demonstrates MCP integration in a web interface, see the [Pipedream MCP Chat app](https://github.com/PipedreamHQ/mcp-chat).

mcp/ai-sdk/README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# AI SDK Example
2+
3+
This example demonstrates how to use [Vercel's AI SDK](https://ai-sdk.dev) with Pipedream's dynamic MCP server.
4+
5+
## Prerequisites
6+
7+
See the [main README](../../README.md) for environment setup.
8+
9+
## Installation
10+
11+
```bash
12+
pnpm install
13+
```
14+
15+
## Usage
16+
17+
The `--external-user-id` or `-u` parameter is required.
18+
19+
### Basic Usage
20+
21+
```bash
22+
pnpm start -u your-user-id "Send a message to Slack saying hello"
23+
```
24+
25+
### With Additional Options
26+
27+
```bash
28+
pnpm start -u your-user-id "Create a Linear ticket for the bug I found" --model gpt-4 --max-steps 15
29+
```
30+
31+
### Available Options
32+
33+
- `--external-user-id` or `-u` (required): The external user ID for Pipedream Connect
34+
- `--model`: AI model
35+
- `--max-steps`: Maximum conversation steps (default: 10)

mcp/ai-sdk/config.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { loadAndValidateConfig } from "../shared/config.js";
2+
import { z } from "zod";
3+
4+
export const config = loadAndValidateConfig(
5+
z.object({
6+
OPENAI_API_KEY: z.string(),
7+
PIPEDREAM_CLIENT_ID: z.string(),
8+
PIPEDREAM_CLIENT_SECRET: z.string(),
9+
PIPEDREAM_PROJECT_ID: z.string(),
10+
PIPEDREAM_PROJECT_ENVIRONMENT: z
11+
.enum(["development", "production"])
12+
.default("development"),
13+
})
14+
);

mcp/ai-sdk/index.ts

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { openai } from "@ai-sdk/openai";
2+
import { CoreMessage, experimental_createMCPClient, generateText } from "ai";
3+
import {
4+
createBaseProgram,
5+
validateAndParseOptions,
6+
createMCPTransport,
7+
logProcessingStart,
8+
logStep,
9+
logToolsLoading,
10+
logAvailableTools,
11+
logAIResponse,
12+
logResponse,
13+
logToolCalls,
14+
logToolResults,
15+
logConversationComplete,
16+
logMaxStepsReached,
17+
logSessionComplete,
18+
logClosingClient,
19+
logClientClosed,
20+
logContinuing,
21+
setupGracefulShutdown,
22+
handleError,
23+
SYSTEM_PROMPT,
24+
ProgramOptions,
25+
} from "../shared/cli.js";
26+
27+
const program = createBaseProgram(
28+
"ai-sdk",
29+
"AI SDK CLI tool with MCP integration"
30+
);
31+
32+
program.action(async (instruction: string, options: ProgramOptions) => {
33+
const config = validateAndParseOptions(instruction, options);
34+
35+
let mcpClient:
36+
| Awaited<ReturnType<typeof experimental_createMCPClient>>
37+
| undefined;
38+
39+
try {
40+
logProcessingStart(config, "AI SDK");
41+
42+
const transport = await createMCPTransport(config.options.external_user_id);
43+
44+
// Initialize the MCP client from AI SDK
45+
mcpClient = await experimental_createMCPClient({
46+
transport,
47+
});
48+
49+
console.log("✅ MCP client initialized");
50+
51+
const messages: CoreMessage[] = [
52+
{
53+
role: "system",
54+
content: SYSTEM_PROMPT,
55+
},
56+
{
57+
role: "user",
58+
content: config.instruction,
59+
},
60+
];
61+
62+
let ended = false;
63+
let steps = 0;
64+
65+
// Main conversation loop - continues until AI decides to stop or max steps reached
66+
while (!ended && steps < config.maxSteps) {
67+
logStep(steps + 1, config.maxSteps);
68+
69+
// Reload tools from MCP client before each generation step
70+
// This ensures we have the latest available tools (servers can add/remove tools dynamically)
71+
logToolsLoading();
72+
const tools = await mcpClient.tools();
73+
const toolNames = Object.keys(tools).join(", ");
74+
logAvailableTools(toolNames);
75+
76+
logAIResponse();
77+
78+
// Generate response with AI SDK - key configuration:
79+
// - tools: Makes MCP tools available to the model
80+
// - maxSteps: 1 ensures we handle one step at a time for better control
81+
const response = await generateText({
82+
model: openai(config.options.model as any),
83+
messages,
84+
tools,
85+
maxSteps: 1, // Handle one step at a time so we are able to reload the tools in between steps
86+
});
87+
88+
logResponse(response.text);
89+
90+
// Handle different completion reasons - this determines conversation flow
91+
switch (response.finishReason) {
92+
case "stop":
93+
case "content-filter":
94+
// Model completed its response naturally or was filtered
95+
ended = true;
96+
logConversationComplete();
97+
break;
98+
99+
case "error":
100+
// An error occurred during generation
101+
ended = true;
102+
console.error("❌ An error occurred during generation");
103+
break;
104+
105+
case "tool-calls":
106+
// Model wants to use tools
107+
// AI SDK automatically executes the tools and provides results
108+
logToolCalls();
109+
response.toolCalls.forEach((toolCall, index) => {
110+
console.log(` ${index + 1}. ${toolCall.toolName}`);
111+
console.log(
112+
` Args: ${JSON.stringify(toolCall.args, null, 2)}`
113+
);
114+
});
115+
116+
logToolResults();
117+
response.toolResults.forEach((result, index) => {
118+
console.log(` ${index + 1}. ${JSON.stringify(result, null, 2)}`);
119+
});
120+
121+
// Add the tool calls and results to conversation history
122+
messages.push(
123+
{
124+
role: "assistant",
125+
content: response.toolCalls,
126+
},
127+
{
128+
role: "tool",
129+
content: response.toolResults,
130+
}
131+
);
132+
break;
133+
134+
case "length":
135+
console.log("⚠️ Response truncated due to length limit");
136+
ended = true;
137+
break;
138+
139+
default:
140+
console.log(`🤔 Unknown finish reason: ${response.finishReason}`);
141+
ended = true;
142+
}
143+
144+
steps++;
145+
146+
if (!ended && steps < config.maxSteps) {
147+
logContinuing();
148+
}
149+
}
150+
151+
if (steps >= config.maxSteps) {
152+
logMaxStepsReached(config.maxSteps);
153+
}
154+
155+
logSessionComplete();
156+
} catch (error) {
157+
handleError(error, "AI SDK");
158+
} finally {
159+
if (mcpClient) {
160+
logClosingClient();
161+
await mcpClient.close();
162+
logClientClosed();
163+
}
164+
}
165+
});
166+
167+
setupGracefulShutdown();
168+
169+
program.parse();

mcp/ai-sdk/package.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"version": "1.0.0",
3+
"description": "AI SDK example using Model Context Protocol (MCP)",
4+
"type": "module",
5+
"scripts": {
6+
"start": "tsx index.ts"
7+
},
8+
"dependencies": {
9+
"@ai-sdk/openai": "^1.0.0",
10+
"@modelcontextprotocol/sdk": "^1.12.3",
11+
"ai": "^4.3.16",
12+
"commander": "^12.0.0",
13+
"dotenv": "^16.4.5",
14+
"openai": "^4.28.0",
15+
"tsx": "^4.7.1",
16+
"zod": "^3.23.0"
17+
},
18+
"devDependencies": {
19+
"@types/node": "^22.0.0",
20+
"typescript": "^5.0.0"
21+
},
22+
"keywords": [
23+
"ai",
24+
"mcp",
25+
"examples",
26+
"ai-sdk"
27+
],
28+
"author": "Pipedream",
29+
"license": "MIT"
30+
}

0 commit comments

Comments
 (0)