# How to integrate Fingertip MCP with Vercel AI SDK v6 ```json { "title": "How to integrate Fingertip MCP with Vercel AI SDK v6", "toolkit": "Fingertip", "toolkit_slug": "fingertip", "framework": "Vercel AI SDK", "framework_slug": "ai-sdk", "url": "https://composio.dev/toolkits/fingertip/framework/ai-sdk", "markdown_url": "https://composio.dev/toolkits/fingertip/framework/ai-sdk.md", "updated_at": "2026-05-12T10:11:33.661Z" } ``` ## Introduction This guide walks you through connecting Fingertip to Vercel AI SDK v6 using the Composio tool router. By the end, you'll have a working Fingertip agent that can show analytics for your main fingertip site, list all upcoming event types for your business, get summaries of recent blog posts through natural language commands. This guide will help you understand how to give your Vercel AI SDK agent real control over a Fingertip account through Composio's Fingertip MCP server. Before we dive in, let's take a quick look at the key ideas and tools involved. ## Also integrate Fingertip with - [OpenAI Agents SDK](https://composio.dev/toolkits/fingertip/framework/open-ai-agents-sdk) - [Claude Agent SDK](https://composio.dev/toolkits/fingertip/framework/claude-agents-sdk) - [Claude Code](https://composio.dev/toolkits/fingertip/framework/claude-code) - [Claude Cowork](https://composio.dev/toolkits/fingertip/framework/claude-cowork) - [Codex](https://composio.dev/toolkits/fingertip/framework/codex) - [OpenClaw](https://composio.dev/toolkits/fingertip/framework/openclaw) - [Hermes](https://composio.dev/toolkits/fingertip/framework/hermes-agent) - [CLI](https://composio.dev/toolkits/fingertip/framework/cli) - [Google ADK](https://composio.dev/toolkits/fingertip/framework/google-adk) - [LangChain](https://composio.dev/toolkits/fingertip/framework/langchain) - [Mastra AI](https://composio.dev/toolkits/fingertip/framework/mastra-ai) - [LlamaIndex](https://composio.dev/toolkits/fingertip/framework/llama-index) - [CrewAI](https://composio.dev/toolkits/fingertip/framework/crew-ai) ## TL;DR Here's what you'll learn: - How to set up and configure a Vercel AI SDK agent with Fingertip integration - Using Composio's Tool Router to dynamically load and access Fingertip tools - Creating an MCP client connection using HTTP transport - Building an interactive CLI chat interface with conversation history management - Handling tool calls and results within the Vercel AI SDK framework ## What is Vercel AI SDK? The Vercel AI SDK is a TypeScript library for building AI-powered applications. It provides tools for creating agents that can use external services and maintain conversation state. Key features include: - streamText: Core function for streaming responses with real-time tool support - MCP Client: Built-in support for Model Context Protocol via @ai-sdk/mcp - Step Counting: Control multi-step tool execution with stopWhen: stepCountIs() - OpenAI Provider: Native integration with OpenAI models ## What is the Fingertip MCP server, and what's possible with it? The Fingertip MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Fingertip account. It provides structured and secure access to your business management dashboard, so your agent can perform actions like creating and deleting sites, retrieving site analytics, managing memberships, and listing blog posts or event types on your behalf. - Instant site creation and removal: Let your agent create new Fingertip sites or delete existing ones as your business evolves. - Comprehensive site analytics retrieval: Ask your agent to fetch detailed analytics and performance metrics for specific sites, including store activity over selected time periods. - Membership and invitation management: Have your agent add, remove, or look up site memberships and cancel outstanding workspace invitations easily. - Blog and content organization: Direct your agent to list published blog posts, retrieve post summaries, and sort or paginate results for content management. - Event and form template listing: Enable your agent to fetch available event types and form templates to streamline client bookings or data collection. ## Supported Tools | Tool slug | Name | Description | |---|---|---| | `FINGERTIP_CREATE_INVOICE` | Create Store Invoice | Tool to create a store invoice in Fingertip. Use when you need to bill a customer for products or services with line items, pricing, and tax details. Returns the created invoice ID which can be used to retrieve or manage the invoice. | | `FINGERTIP_CREATE_INVOICE_ITEM` | Create Invoice Item | Creates a new invoice item for a Fingertip site. Requires siteId, title, and priceInCents. Returns the created invoice item with its unique ID and timestamps. | | `FINGERTIP_CREATE_PAGE` | Create Page | Tool to create a new page within a Fingertip site. Use when you need to add a new page to an existing site. Requires siteId, slug, and name. Returns the created page with its unique ID and timestamps. | | `FINGERTIP_CREATE_PAGE_BLOCK` | Create Page Block | Creates a new block within the specified page. Returns the created block with its unique ID and timestamps. Use when you need to add content blocks like headings, paragraphs, or images to a page. | | `FINGERTIP_CREATE_SITE` | Create Fingertip Site | Creates a new Fingertip site with the specified configuration. Requires name, slug (URL identifier), and businessType. Returns the created site with its unique ID and auto-generated home page. Use ENABLED status for live sites or UNPUBLISHED for drafts. | | `FINGERTIP_CREATE_SITE_CONTACT` | Create Site Contact | Tool to create a new contact associated with a site including marketing preferences. Use when you need to add contacts to a Fingertip site with their email, personal details, and marketing consent status. | | `FINGERTIP_CREATE_SITE_INVITATION` | Create Site Invitation | Tool to create a new invitation for a user to join a site. Use when you need to invite someone to access and collaborate on a specific site with a designated role. | | `FINGERTIP_CREATE_WEBHOOK` | Create Webhook Subscription | Tool to create a webhook subscription for receiving real-time event notifications from Fingertip. Use when you need to receive notifications for events like new contacts, form responses, bookings, or orders. Returns the webhook subscription ID. | | `FINGERTIP_DELETE_BLOCK` | Delete Block | Tool to permanently delete a block by its ID. Use when you need to remove a block after confirming it is no longer needed. | | `FINGERTIP_DELETE_DRAFT_INVOICE` | Delete Draft Invoice | Tool to delete a draft store invoice. Use when you need to remove a draft invoice that is no longer needed. | | `FINGERTIP_DELETE_INVOICE_ITEM` | Delete Invoice Item | Tool to delete a Fingertip invoice item. Use when you need to remove an invoice item by its UUID after confirming it is no longer needed. | | `FINGERTIP_DELETE_PAGE` | Delete Fingertip Page | Tool to permanently delete a page and all associated data. Use when you need to remove a page by its UUID after confirming it is no longer needed. | | `FINGERTIP_DELETE_SITE` | Delete Fingertip Site | Tool to delete a Fingertip site. Use when you need to permanently remove a site by its UUID after confirming it is no longer needed. | | `FINGERTIP_DELETE_SITE_INVITATION` | Delete Site Invitation | Tool to delete a site invitation by its ID. Use when you need to cancel or remove a pending site invitation. | | `FINGERTIP_DELETE_SITE_MEMBERSHIP` | Delete Site Membership | Tool to delete a specific site membership. Use when you need to remove a user from a site after confirming the membership ID. | | `FINGERTIP_DELETE_WEBHOOK` | Delete Webhook | Tool to remove an existing webhook subscription. Use when you need to permanently delete a webhook by its UUID. | | `FINGERTIP_DELETE_WORKSPACE_INVITATION` | Delete Workspace Invitation | Tool to delete a workspace invitation by its ID. Use after obtaining the invitation ID to cancel a pending workspace invitation. | | `FINGERTIP_GET_BLOCK` | Get Block | Tool to retrieve a specific block by its ID. Returns block details including content, metadata, and timestamps. Returns 404 if the block is not found. | | `FINGERTIP_GET_COMPREHENSIVE_SITE_ANALYTICS` | Get Comprehensive Site Analytics | Tool to retrieve comprehensive analytics for a specific site. Use when you have a site ID and need period-based breakdowns including optional store metrics. | | `FINGERTIP_GET_INVOICE_ITEM` | Get Invoice Item | Tool to retrieve details of a specific invoice item by its ID. Use when you need to fetch information about a specific invoice item including its title, description, price, and currency. | | `FINGERTIP_GET_PAGE` | Get Page | Tool to retrieve a specific Fingertip page by its ID. Returns complete page details including name, slug, description, timestamps, media configurations, and theme settings. Use when you need detailed information about a specific page. | | `FINGERTIP_GET_PAGE_THEME` | Get Page Theme | Retrieve the theme configuration for a specific page. Use when you need to get the theme details including ID, content, and timestamps for a page. | | `FINGERTIP_GET_SITE` | Get Fingertip Site | Tool to retrieve a specific Fingertip site by its UUID. Use when you need to fetch detailed information about a single site. | | `FINGERTIP_GET_WEBHOOK` | Get Webhook | Tool to retrieve a specific webhook by ID with its related triggers. Use when you need to fetch details of a single webhook including its configuration and event subscriptions. | | `FINGERTIP_HEALTH_CHECK` | Health Check | Tool to verify API connectivity. Use when checking API health before other operations. | | `FINGERTIP_LIST_BLOG_POSTS` | List Fingertip Blog Posts | Tool to list published blog posts for a specific site. Use when you have a site ID and need to paginate, sort, and retrieve post summaries. | | `FINGERTIP_LIST_BOOKINGS` | List Bookings | Tool to retrieve a paginated list of bookings for a site with optional status filtering. Use when you need to fetch bookings for a specific site, optionally filtered by booking status. | | `FINGERTIP_LIST_EVENT_TYPES` | List Event Types | Tool to list event types for a specific site. Use after confirming the siteId to retrieve a paginated list of published event types. | | `FINGERTIP_LIST_FORM_RESPONSES` | List Form Responses | Tool to retrieve form responses for a specific form template and site. Use when you need to fetch form submissions after obtaining the form template ID and site ID. | | `FINGERTIP_LIST_FORM_TEMPLATES` | List Form Templates | Tool to retrieve a paginated list of form templates. Use when you need to fetch multiple templates for a site after obtaining its ID. | | `FINGERTIP_LIST_INVOICE_ITEMS` | List Invoice Items | Tool to list invoice items for a specific Fingertip site. Use when you need to retrieve billable items with pagination and optional search filtering. | | `FINGERTIP_LIST_INVOICES` | List Fingertip Invoices | Tool to retrieve a paginated list of invoices for sites the user has access to. Use when you need to fetch invoices with optional filtering by status and sorting. | | `FINGERTIP_LIST_MESSAGES` | List Fingertip Messages | Tool to retrieve a paginated list of messages for a site. Use when you need to fetch messages for a specific site or contact. | | `FINGERTIP_LIST_ORDERS` | List Orders | Tool to retrieve orders with basic information for a specific site. Use when you need to fetch paginated order data by site slug. | | `FINGERTIP_LIST_PAGE_BLOCKS` | List Page Blocks | Tool to retrieve all blocks associated with a specific page. Use when you have a page ID and need to access the page's block structure and content. | | `FINGERTIP_LIST_PAGES` | List Pages | List all pages for a specific Fingertip site. Returns paginated results with page details including ID, slug, name, timestamps, and media configurations. Use cursor-based pagination to iterate through large result sets. | | `FINGERTIP_LIST_PAGE_THEMES` | List Page Themes | Tool to retrieve a paginated list of page themes. Use when you need to fetch available page themes, optionally scoped to a specific site, with pagination support. | | `FINGERTIP_LIST_QUOTES` | List Quotes | List all quotes for a specific Fingertip site. Returns paginated results with quote and contact details. Use cursor-based pagination to iterate through large result sets. Supports filtering by status and contact ID. | | `FINGERTIP_LIST_SAMPLE_BOOKINGS` | List Sample Bookings | Tool to retrieve sample bookings for testing and development purposes. Use when you need to access sample booking data without requiring a specific site ID. | | `FINGERTIP_LIST_SAMPLE_FORM_RESPONSES` | List Sample Form Responses | Tool to retrieve sample form responses for a specific form template. Use when you need to fetch example responses for a form by its slug. | | `FINGERTIP_LIST_SAMPLE_ORDERS` | List Sample Orders | Tool to retrieve sample orders for testing purposes. Use when you need to access sample order data for development or testing. | | `FINGERTIP_LIST_SAMPLE_SITE_CONTACTS` | List Sample Site Contacts | Tool to retrieve sample site contacts with basic information. Use when you need example contacts for testing or demonstration purposes. | | `FINGERTIP_LIST_SITE_CONTACTS` | List Site Contacts | Tool to retrieve site contacts with basic contact information and engagement metrics. Use when you need to list contacts for a specific site with optional filtering by marketing status, search terms, or contact attributes. | | `FINGERTIP_LIST_SITE_INVITATIONS` | List Site Invitations | Tool to retrieve a paginated list of invitations for a specific site. Use when you need to check pending or accepted invitations for a site. | | `FINGERTIP_LIST_SITE_MEMBERSHIPS` | List Site Memberships | Tool to retrieve a paginated list of site memberships. Use after confirming the site ID. | | `FINGERTIP_LIST_SITES` | List Sites | Tool to retrieve a paginated list of sites accessible by the API key. Use when you need to fetch sites page by page. | | `FINGERTIP_LIST_WEBHOOKS` | List Webhooks | Tool to retrieve a paginated list of webhooks with optional filtering and sorting. Use when you need to fetch webhooks page by page with customizable sort order. | | `FINGERTIP_LIST_WORKSPACES` | List Workspaces | Tool to retrieve a paginated list of workspaces accessible to the API key. Use when you need to navigate through multiple workspaces. | | `FINGERTIP_MARK_INVOICE_PAID` | Mark Invoice as Paid | Tool to mark a store invoice as paid in Fingertip. Use when recording payment completion for an invoice. Requires the invoice UUID and the timestamp when payment was completed. | | `FINGERTIP_PATCH_PAGE_THEME` | Patch Page Theme | Apply JSON Patch operations to page theme content following RFC 6902. Use to modify theme properties like colors, fonts, and spacing without replacing the entire theme. Operations are applied sequentially and support add, remove, replace, move, copy, and test operations. | | `FINGERTIP_SEARCH_HELP_ARTICLES` | Search Help Articles | Tool to search help documentation articles by query string. Use when you need to find relevant help articles matching specific keywords or topics. | | `FINGERTIP_SEND_INVOICE` | Send Store Invoice | Tool to send a store invoice to a customer. Use when you need to deliver an invoice notification after creating or updating it. | | `FINGERTIP_SEND_QUOTE` | Send Fingertip Quote | Tool to send a store quote by its UUID. Use when you need to deliver a quote to the customer after it has been prepared. | | `FINGERTIP_UPDATE_BLOCK` | Update Block | Updates an existing block with the provided data. Allows partial updates - only fields provided in the request will be updated. Returns 404 if the block is not found. | | `FINGERTIP_UPDATE_INVOICE_ITEM` | Update Invoice Item | Tool to update an invoice item in Fingertip. Use when you need to modify the title, price, or description of an existing invoice item. | | `FINGERTIP_UPDATE_PAGE` | Update Page | Tool to update an existing Fingertip page with new data. Use when you need to modify page properties like name, description, slug, position, or media configurations. Only fields included in the request will be updated. | | `FINGERTIP_UPDATE_PAGE_THEME` | Update Page Theme | Tool to update the theme configuration for a specific page. Use when you need to modify theme settings such as making it a reusable component, linking it to a parent component theme, or updating theme content. | | `FINGERTIP_UPDATE_QUOTE` | Update Fingertip Quote | Tool to update an existing Fingertip store quote. Use when you need to modify quote items, pricing, discounts, or metadata like memo and footer. Requires the quote ID and at least one quote item. | | `FINGERTIP_UPDATE_SITE` | Update Fingertip Site | Updates an existing Fingertip site with provided partial data. Use when modifying site properties like name, description, status, or configuration. Only include fields you want to change - all fields are optional except siteId. | | `FINGERTIP_UPDATE_WEBHOOK` | Update Webhook | Tool to update an existing Fingertip webhook subscription. Use when you need to modify the endpoint URL or change the event triggers for a webhook. Only fields included in the request will be updated. | ## Supported Triggers None listed. ## Creating MCP Server - Stand-alone vs Composio SDK The Fingertip MCP server is an implementation of the Model Context Protocol that connects your AI agent to Fingertip. It provides structured and secure access so your agent can perform Fingertip operations on your behalf through a secure, permission-based interface. With Composio's managed implementation, you don't have to create your own developer app. For production, if you're building an end product, we recommend using your own credentials. The managed server helps you prototype fast and go from 0-1 faster. ## Step-by-step Guide ### 1. Prerequisites Before you begin, make sure you have: - Node.js and npm installed - A Composio account with API key - An OpenAI API key ### 1. Getting API Keys for OpenAI and Composio OpenAI API Key - Go to the [OpenAI dashboard](https://platform.openai.com/settings/organization/api-keys) and create an API key. You'll need credits to use the models, or you can connect to another model provider. - Keep the API key safe. Composio API Key - Log in to the [Composio dashboard](https://dashboard.composio.dev?utm_source=toolkits&utm_medium=framework_docs). - Navigate to your API settings and generate a new API key. - Store this key securely as you'll need it for authentication. ### 2. Install required dependencies First, install the necessary packages for your project. What you're installing: - @ai-sdk/openai: Vercel AI SDK's OpenAI provider - @ai-sdk/mcp: MCP client for Vercel AI SDK - @composio/core: Composio SDK for tool integration - ai: Core Vercel AI SDK - dotenv: Environment variable management ```bash npm install @ai-sdk/openai @ai-sdk/mcp @composio/core ai dotenv ``` ### 3. Set up environment variables Create a .env file in your project root. What's needed: - OPENAI_API_KEY: Your OpenAI API key for GPT model access - COMPOSIO_API_KEY: Your Composio API key for tool access - COMPOSIO_USER_ID: A unique identifier for the user session ```bash OPENAI_API_KEY=your_openai_api_key_here COMPOSIO_API_KEY=your_composio_api_key_here COMPOSIO_USER_ID=your_user_id_here ``` ### 4. Import required modules and validate environment What's happening: - We're importing all necessary libraries including Vercel AI SDK's OpenAI provider and Composio - The dotenv/config import automatically loads environment variables - The MCP client import enables connection to Composio's tool server ```typescript import "dotenv/config"; import { openai } from "@ai-sdk/openai"; import { Composio } from "@composio/core"; import * as readline from "readline"; import { streamText, type ModelMessage, stepCountIs } from "ai"; import { createMCPClient } from "@ai-sdk/mcp"; const composioAPIKey = process.env.COMPOSIO_API_KEY; const composioUserID = process.env.COMPOSIO_USER_ID; if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set"); if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set"); if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set"); const composio = new Composio({ apiKey: composioAPIKey, }); ``` ### 5. Create Tool Router session and initialize MCP client What's happening: - We're creating a Tool Router session that gives your agent access to Fingertip tools - The create method takes the user ID and specifies which toolkits should be available - The returned mcp object contains the URL and authentication headers needed to connect to the MCP server - This session provides access to all Fingertip-related tools through the MCP protocol ```typescript async function main() { // Create a tool router session for the user const session = await composio.create(composioUserID!, { toolkits: ["fingertip"], }); const mcpUrl = session.mcp.url; ``` ### 6. Connect to MCP server and retrieve tools What's happening: - We're creating an MCP client that connects to our Composio Tool Router session via HTTP - The mcp.url provides the endpoint, and mcp.headers contains authentication credentials - The type: "http" is important - Composio requires HTTP transport - tools() retrieves all available Fingertip tools that the agent can use ```typescript const mcpClient = await createMCPClient({ transport: { type: "http", url: mcpUrl, headers: session.mcp.headers, // Authentication headers for the Composio MCP server }, }); const tools = await mcpClient.tools(); ``` ### 7. Initialize conversation and CLI interface What's happening: - We initialize an empty messages array to maintain conversation history - A readline interface is created to accept user input from the command line - Instructions are displayed to guide the user on how to interact with the agent ```typescript let messages: ModelMessage[] = []; console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n"); console.log( "Ask any questions related to fingertip, like summarize my last 5 emails, send an email, etc... :)))\n", ); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, prompt: "> ", }); rl.prompt(); ``` ### 8. Handle user input and stream responses with real-time tool feedback What's happening: - We use streamText instead of generateText to stream responses in real-time - toolChoice: "auto" allows the model to decide when to use Fingertip tools - stopWhen: stepCountIs(10) allows up to 10 steps for complex multi-tool operations - onStepFinish callback displays which tools are being used in real-time - We iterate through the text stream to create a typewriter effect as the agent responds - The complete response is added to conversation history to maintain context - Errors are caught and displayed with helpful retry suggestions ```typescript rl.on("line", async (userInput: string) => { const trimmedInput = userInput.trim(); if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) { console.log("\nGoodbye!"); rl.close(); process.exit(0); } if (!trimmedInput) { rl.prompt(); return; } messages.push({ role: "user", content: trimmedInput }); console.log("\nAgent is thinking...\n"); try { const stream = streamText({ model: openai("gpt-5"), messages, tools, toolChoice: "auto", stopWhen: stepCountIs(10), onStepFinish: (step) => { for (const toolCall of step.toolCalls) { console.log(`[Using tool: ${toolCall.toolName}]`); } if (step.toolCalls.length > 0) { console.log(""); // Add space after tool calls } }, }); for await (const chunk of stream.textStream) { process.stdout.write(chunk); } console.log("\n\n---\n"); // Get final result for message history const response = await stream.response; if (response?.messages?.length) { messages.push(...response.messages); } } catch (error) { console.error("\nAn error occurred while talking to the agent:"); console.error(error); console.log( "\nYou can try again or restart the app if it keeps happening.\n", ); } finally { rl.prompt(); } }); rl.on("close", async () => { await mcpClient.close(); console.log("\n👋 Session ended."); process.exit(0); }); } main().catch((err) => { console.error("Fatal error:", err); process.exit(1); }); ``` ## Complete Code ```typescript import "dotenv/config"; import { openai } from "@ai-sdk/openai"; import { Composio } from "@composio/core"; import * as readline from "readline"; import { streamText, type ModelMessage, stepCountIs } from "ai"; import { createMCPClient } from "@ai-sdk/mcp"; const composioAPIKey = process.env.COMPOSIO_API_KEY; const composioUserID = process.env.COMPOSIO_USER_ID; if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set"); if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set"); if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set"); const composio = new Composio({ apiKey: composioAPIKey, }); async function main() { // Create a tool router session for the user const session = await composio.create(composioUserID!, { toolkits: ["fingertip"], }); const mcpUrl = session.mcp.url; const mcpClient = await createMCPClient({ transport: { type: "http", url: mcpUrl, headers: session.mcp.headers, // Authentication headers for the Composio MCP server }, }); const tools = await mcpClient.tools(); let messages: ModelMessage[] = []; console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n"); console.log( "Ask any questions related to fingertip, like summarize my last 5 emails, send an email, etc... :)))\n", ); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, prompt: "> ", }); rl.prompt(); rl.on("line", async (userInput: string) => { const trimmedInput = userInput.trim(); if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) { console.log("\nGoodbye!"); rl.close(); process.exit(0); } if (!trimmedInput) { rl.prompt(); return; } messages.push({ role: "user", content: trimmedInput }); console.log("\nAgent is thinking...\n"); try { const stream = streamText({ model: openai("gpt-5"), messages, tools, toolChoice: "auto", stopWhen: stepCountIs(10), onStepFinish: (step) => { for (const toolCall of step.toolCalls) { console.log(`[Using tool: ${toolCall.toolName}]`); } if (step.toolCalls.length > 0) { console.log(""); // Add space after tool calls } }, }); for await (const chunk of stream.textStream) { process.stdout.write(chunk); } console.log("\n\n---\n"); // Get final result for message history const response = await stream.response; if (response?.messages?.length) { messages.push(...response.messages); } } catch (error) { console.error("\nAn error occurred while talking to the agent:"); console.error(error); console.log( "\nYou can try again or restart the app if it keeps happening.\n", ); } finally { rl.prompt(); } }); rl.on("close", async () => { await mcpClient.close(); console.log("\n👋 Session ended."); process.exit(0); }); } main().catch((err) => { console.error("Fatal error:", err); process.exit(1); }); ``` ## Conclusion You've successfully built a Fingertip agent using the Vercel AI SDK with streaming capabilities! This implementation provides a powerful foundation for building AI applications with natural language interfaces and real-time feedback. Key features of this implementation: - Real-time streaming responses for a better user experience with typewriter effect - Live tool execution feedback showing which tools are being used as the agent works - Dynamic tool loading through Composio's Tool Router with secure authentication - Multi-step tool execution with configurable step limits (up to 10 steps) - Comprehensive error handling for robust agent execution - Conversation history maintenance for context-aware responses You can extend this further by adding custom error handling, implementing specific business logic, or integrating additional Composio toolkits to create multi-app workflows. ## How to build Fingertip MCP Agent with another framework - [OpenAI Agents SDK](https://composio.dev/toolkits/fingertip/framework/open-ai-agents-sdk) - [Claude Agent SDK](https://composio.dev/toolkits/fingertip/framework/claude-agents-sdk) - [Claude Code](https://composio.dev/toolkits/fingertip/framework/claude-code) - [Claude Cowork](https://composio.dev/toolkits/fingertip/framework/claude-cowork) - [Codex](https://composio.dev/toolkits/fingertip/framework/codex) - [OpenClaw](https://composio.dev/toolkits/fingertip/framework/openclaw) - [Hermes](https://composio.dev/toolkits/fingertip/framework/hermes-agent) - [CLI](https://composio.dev/toolkits/fingertip/framework/cli) - [Google ADK](https://composio.dev/toolkits/fingertip/framework/google-adk) - [LangChain](https://composio.dev/toolkits/fingertip/framework/langchain) - [Mastra AI](https://composio.dev/toolkits/fingertip/framework/mastra-ai) - [LlamaIndex](https://composio.dev/toolkits/fingertip/framework/llama-index) - [CrewAI](https://composio.dev/toolkits/fingertip/framework/crew-ai) ## Related Toolkits - [Addresszen](https://composio.dev/toolkits/addresszen) - Addresszen is a real-time address autocomplete and verification service. It helps capture accurate, deliverable addresses with instant suggestions and validation. - [Asin data api](https://composio.dev/toolkits/asin_data_api) - Asin data api gives you detailed, real-time product data from Amazon, including price, rank, and reviews. Perfect for e-commerce pros and data-driven marketers who need instant marketplace insights. - [Baselinker](https://composio.dev/toolkits/baselinker) - BaseLinker is an all-in-one e-commerce management platform connecting stores, marketplaces, carriers, and more. It streamlines order processing, inventory control, and automates your sales operations. - [Bestbuy](https://composio.dev/toolkits/bestbuy) - Best Buy is a leading retailer offering APIs for product, store, and recommendation data. Instantly access up-to-date retail insights for smarter shopping and decision-making. - [Btcpay server](https://composio.dev/toolkits/btcpay_server) - BTCPay Server is a free, open-source, self-hosted Bitcoin payment processor. It lets merchants accept Bitcoin payments directly, cutting out middlemen and boosting privacy. - [Cdr platform](https://composio.dev/toolkits/cdr_platform) - Cdr platform is an API for purchasing carbon dioxide removal services. It enables businesses to offset emissions by accessing verified carbon removal projects. - [Cloudcart](https://composio.dev/toolkits/cloudcart) - CloudCart is an e-commerce platform for building and managing online stores. It helps businesses streamline product listings, orders, and customer engagement. - [Countdown api](https://composio.dev/toolkits/countdown_api) - Countdown API gives you real-time, structured eBay product data, reviews, and seller feedback. Perfect for powering price monitoring, product research, or marketplace analytics workflows. - [Dpd2](https://composio.dev/toolkits/dpd2) - Dpd2 is a robust email management platform for handling, sorting, and automating email workflows. Streamline your communications and boost productivity with advanced sorting, labeling, and response tools. - [Finerworks](https://composio.dev/toolkits/finerworks) - FinerWorks is an online platform for fine art and photo printing services. Artists and photographers use it to order custom prints and manage print inventory efficiently. - [Fraudlabs pro](https://composio.dev/toolkits/fraudlabs_pro) - FraudLabs Pro is an online payment fraud detection service for e-commerce and merchants. It helps minimize chargebacks and revenue loss by detecting and preventing fraudulent transactions. - [Gift up](https://composio.dev/toolkits/gift_up) - Gift Up! is a digital platform for selling, managing, and redeeming gift cards online. It streamlines promotions and gift card transactions for businesses and their customers. - [Goody](https://composio.dev/toolkits/goody) - Goody is a gifting platform that lets users send gifts and physical products without handling logistics. It streamlines gifting by managing delivery, fulfillment, and recipient experience. - [Gumroad](https://composio.dev/toolkits/gumroad) - Gumroad is a platform for selling digital products, physical goods, and memberships with a simple checkout and marketing tools. It streamlines creator payouts and helps you grow your audience effortlessly. - [Instacart](https://composio.dev/toolkits/instacart) - Instacart is an online grocery delivery and pickup service platform. It lets you discover local retailers and create shoppable lists and recipes with ease. - [Junglescout](https://composio.dev/toolkits/junglescout) - Junglescout is an Amazon product research and analytics platform for sellers. It delivers sales estimates, competitive insights, and optimization tools to boost your Amazon business. - [Ko fi](https://composio.dev/toolkits/ko_fi) - Ko-fi is a platform that lets creators receive donations, memberships, and sales from fans. It helps creators monetize their work and grow their audience with minimal friction. - [Lemon squeezy](https://composio.dev/toolkits/lemon_squeezy) - Lemon Squeezy is a payments and subscription platform built for software companies. It makes managing payments, taxes, and customer subscriptions effortless. - [Loyverse](https://composio.dev/toolkits/loyverse) - Loyverse is a point-of-sale (POS) platform for small businesses, offering tools for sales, inventory, and customer loyalty. It helps streamline retail operations and boost customer engagement. - [Memberstack](https://composio.dev/toolkits/memberstack) - Memberstack lets you add user authentication, payments, and member management to your website—no backend code required. Easily manage your site's members and subscriptions from a single platform. ## Frequently Asked Questions ### What are the differences in Tool Router MCP and Fingertip MCP? With a standalone Fingertip MCP server, the agents and LLMs can only access a fixed set of Fingertip tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Fingertip and many other apps based on the task at hand, all through a single MCP endpoint. ### Can I use Tool Router MCP with Vercel AI SDK v6? Yes, you can. Vercel AI SDK v6 fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Fingertip tools. ### Can I manage the permissions and scopes for Fingertip while using Tool Router? Yes, absolutely. You can configure which Fingertip scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do. ### How safe is my data with Composio Tool Router? All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Fingertip data and credentials are handled as safely as possible. --- [See all toolkits](https://composio.dev/toolkits) · [Composio docs](https://docs.composio.dev/llms.txt)