-
Notifications
You must be signed in to change notification settings - Fork 133
feat: add vercel ai sdk apify mcp integration #2021
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
0bb262d
feat: add vercel ai sdk apify mcp integration
MQ37 81e5fdb
Update sources/platform/integrations/ai/vercel-ai-sdk.md
MQ37 bb6c810
Update sources/platform/integrations/ai/vercel-ai-sdk.md
MQ37 1ecaacb
Update sources/platform/integrations/ai/vercel-ai-sdk.md
MQ37 f1ffc8d
Update sources/platform/integrations/ai/vercel-ai-sdk.md
MQ37 85100e2
Update sources/platform/integrations/ai/vercel-ai-sdk.md
MQ37 a3adf2a
add mcp.apify.com and openrouter
MQ37 7731b75
Merge branch 'master' into feat/vercel-ai-sdk-integration
MQ37 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Some comments aren't visible on the classic Files Changed page.
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| --- | ||
| title: 🔺 Vercel AI SDK integration | ||
| sidebar_label: Vercel AI SDK | ||
| description: Learn how to integrate Apify Actors as tools for AI with Vercel AI SDK 🔺. | ||
| sidebar_position: 2 | ||
| slug: /integrations/vercel-ai-sdk | ||
| --- | ||
|
|
||
| **Learn how to integrate Apify Actors as tools for AI with Vercel AI SDK.** | ||
|
|
||
| --- | ||
|
|
||
| ## What is the Vercel AI SDK | ||
|
|
||
| [Vercel AI SDK](https://ai-sdk.dev/) is the TypeScript toolkit designed to help developers build AI-powered applications and agents with React, Next.js, Vue, Svelte, Node.js, and more. | ||
|
|
||
| :::note Explore Vercel AI SDK | ||
|
|
||
| For more in-depth details, check out [Vercel AI SDK documentation](https://ai-sdk.dev/docs/introduction). | ||
|
|
||
| ::: | ||
|
|
||
| ## How to use Apify with Vercel AI SDK | ||
|
|
||
| Apify is a marketplace of ready-to-use web scraping and automation tools, AI agents, and MCP servers that you can equip your own AI with. This guide demonstrates how to use Apify tools with a simple AI agent built with Vercel AI SDK. | ||
|
|
||
|
|
||
| ### Prerequisites | ||
|
|
||
| - _Apify API token_: To use Apify Actors in Vercel AI SDK, you need an Apify API token. To obtain your token check [Apify documentation](https://docs.apify.com/platform/integrations/api). | ||
| - _Node.js packages_: Install the following Node.js packages: | ||
|
|
||
| ```bash | ||
| npm install @modelcontextprotocol/sdk @openrouter/ai-sdk-provider ai | ||
| ``` | ||
|
|
||
| ### Building a simple pub search AI agent using Apify Google Maps scraper | ||
|
|
||
| First, import all required packages: | ||
|
|
||
| ```typescript | ||
| import { experimental_createMCPClient as createMCPClient, generateText, stepCountIs } from 'ai'; | ||
| import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js'; | ||
| import { createOpenRouter } from '@openrouter/ai-sdk-provider'; | ||
| ``` | ||
|
|
||
| Connect to the Apify MCP server and get all available tools for the AI agent: | ||
|
|
||
| :::warning Required setup | ||
|
|
||
| Make sure to set the `APIFY_TOKEN` environment variable with your Apify API token before running the code. | ||
|
|
||
| ::: | ||
|
|
||
| ```typescript | ||
| // Connect to the Apify MCP server and get the available tools | ||
| const url = new URL('https://mcp.apify.com'); | ||
| const mcpClient = await createMCPClient({ | ||
| transport: new StreamableHTTPClientTransport(url, { | ||
| requestInit: { | ||
| headers: { | ||
| "Authorization": `Bearer ${process.env.APIFY_TOKEN}` | ||
| } | ||
| } | ||
| }), | ||
| }); | ||
| const tools = await mcpClient.tools(); | ||
| console.log('Tools available:', Object.keys(tools).join(', ')); | ||
| ``` | ||
|
|
||
| Create Apify OpenRouter LLM provider so we can run the AI agent: | ||
|
|
||
| :::tip Single token | ||
|
|
||
| By using the [Apify OpenRouter](https://apify.com/apify/openrouter) you don't need to provide a separate API key for OpenRouter or any other LLM provider. Only your Apify token is needed. All token costs go to your Apify account. | ||
|
|
||
| ::: | ||
|
|
||
| ```typescript | ||
| // Configure the Apify OpenRouter LLM provider | ||
| const openrouter = createOpenRouter({ | ||
| baseURL: 'https://openrouter.apify.actor/api/v1', | ||
| apiKey: 'api-key-not-required', | ||
| headers: { | ||
| "Authorization": `Bearer ${process.env.APIFY_TOKEN}` | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
| Run the AI agent with the Apify Google Maps scraper tool to find a pub near the Ferry Building in San Francisco: | ||
|
|
||
| ```typescript | ||
| // Run the AI agent and generate a response | ||
| const response = await generateText({ | ||
| model: openrouter('x-ai/grok-4-fast'), | ||
| tools, | ||
| stopWhen: stepCountIs(5), | ||
| messages: [ | ||
| { | ||
| role: 'user', | ||
| content: [{ type: 'text', text: 'Find a pub near the Ferry Building in San Francisco using the Google Maps scraper.' }], | ||
| }, | ||
| ], | ||
| }); | ||
| console.log('Response:', response.text); | ||
| console.log('\nDone!'); | ||
| await mcpClient.close(); | ||
| ``` | ||
|
|
||
| ## Resources | ||
|
|
||
| - [Apify Actors](https://docs.apify.com/platform/actors) | ||
| - [Vercel AI SDK documentation](https://ai-sdk.dev/docs/introduction) | ||
| - [What are AI agents?](https://blog.apify.com/what-are-ai-agents/) | ||
| - [Apify MCP Server](https://mcp.apify.com) | ||
| - [Apify MCP Server documentation](https://docs.apify.com/platform/integrations/mcp) | ||
| - [Apify OpenRouter proxy](https://apify.com/apify/openrouter) | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I know I changed requested this change, but I'm not sure 100% about that last sentence.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it does the job, we can improve that later on 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, that is true, well then, merge away it;s all good from my side