How to integrate Elevenlabs MCP with Vercel AI SDK

Framework Integration Gradient
Elevenlabs Logo
Vercel AI SDK Logo
divider

Introduction

This guide walks you through connecting Elevenlabs to Vercel AI SDK using the Composio tool router. By the end, you'll have a working Elevenlabs agent that can convert this chapter text to audio, create a custom project for my audiobook, add a new pronunciation rule for this word, clone my voice using uploaded audio samples through natural language commands.

This guide will help you understand how to give your Vercel AI SDK agent real control over a Elevenlabs account through Composio's Elevenlabs MCP server.

Before we dive in, let's take a quick look at the key ideas and tools involved.

TL;DR

Here's what you'll learn:
  • How to set up and configure a Vercel AI SDK agent with Elevenlabs integration
  • Using Composio's Tool Router to dynamically load and access Elevenlabs 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
  • Step Counting: Control multi-step tool execution
  • OpenAI Provider: Native integration with OpenAI models

What is the Elevenlabs MCP server, and what's possible with it?

The Elevenlabs MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Elevenlabs account. It provides structured and secure access to your voice synthesis projects and tools, so your agent can perform actions like generating audio from text, managing custom voices, organizing projects, and fine-tuning pronunciation on your behalf.

  • Project and chapter audio conversion: Instantly convert text content from chapters or entire projects into high-quality, natural-sounding audio files.
  • Custom voice creation and management: Guide your agent to add, finalize, or share custom voices—either by uploading new samples or assembling voices from existing data.
  • Pronunciation dictionary and rule management: Improve the accuracy of speech outputs by adding pronunciation dictionaries or custom pronunciation rules directly from files or specific aliases/phonemes.
  • Project organization and automation: Let your agent create new projects, add or remove chapters, and automate speech synthesis workflows for audiobooks, podcasts, or media production.
  • Embeddable audio player generation: Enable your agent to generate AudioNative projects, creating customizable and embeddable audio players from your content with just a prompt.

Supported Tools & Triggers

Tools
Add a pronunciation dictionary from fileAdds a new pronunciation dictionary from a lexicon file to improve speech synthesis accuracy.
Add new project with attributesUse to create a new elevenlabs project for text-to-speech synthesis (e.
Add rules to the pronunciation dictionaryAdds one or more custom pronunciation rules (alias or phoneme) to an existing pronunciation dictionary.
Add sharing voiceAdds an existing, shareable voice to a specified user's elevenlabs account library under a new custom name, requiring the user's public id and the voice id.
Add a voiceAdds a custom voice, requiring a `name` and a `files` list with at least one audio sample, to initiate cloning; returns `voice id` but voice is not immediately usable for synthesis.
Convert chapter to audioConverts the textual content of a chapter, identified by `chapter id` within a `project id`, into audio format.
Convert a projectConverts an existing elevenlabs studio project, including all its chapters and using its configured settings and voices, into speech.
Create a previously generated voiceFinalizes the creation of a voice using its `generated voice id` from a previous generation step by assigning a name, description, and optional labels.
Create an AudioNative enabled projectCreates an elevenlabs audionative project, generating an embeddable audio player from a provided content file using text-to-speech, allowing customization of player appearance, audio settings, and conversion options.
Delete chapter from projectIrreversibly deletes a specific, existing chapter from an existing project, typically to remove unwanted or obsolete content.
Delete a dubbing projectPermanently deletes a dubbing project by its id; this action is irreversible and the project cannot be recovered.
Delete history itemPermanently deletes a specific history item (including its audio file and metadata) using its `history item id`; this operation is irreversible and should be used with caution.
Delete project by idUse to irreversibly delete a specific project by its `project id`; the project must exist and be accessible, and this action cannot be undone.
Delete voice samplePermanently deletes a specific voice sample for a given voice id; this action is irreversible.
Delete voice by idPermanently and irreversibly deletes a specific custom voice using its `voice id`; the voice must exist and the authenticated user must have permission to delete it.
Download history itemsDownloads audio clips from history by id(s), returning a single file or a zip archive, with an optional output format (e.
Dub a video or an audio fileDub a video or audio file into a specified target language, requiring 'file' or 'source url', 'target lang', and 'csv file' if 'mode' is 'manual'.
Edit voiceUpdates the name, audio files, description, or labels for an existing voice model specified by `voice id`.
Edit voice settingsEdits key voice settings (e.
Text to speechConverts text to speech using a specified elevenlabs voice and model, returning a downloadable audio file.
Text to speech streamConverts text to a spoken audio stream, allowing latency optimization, specific output formats (some tier-dependent), and custom pronunciations; ensure the chosen model supports text-to-speech and text is preferably under 5000 characters.
Generate a random voiceGenerates a unique, random elevenlabs text-to-speech voice based on input text and specified voice characteristics.
Get user profile by handleRetrieves the public profile information for an existing elevenlabs user based on their unique handle.
Get audio from history itemRetrieves the audio content for a specific history item from elevenlabs, using a `history item id` that must correspond to a previously generated audio.
Get sample audioRetrieves the audio for a given `sample id` that must belong to the specified `voice id`.
Get chapter by IDFetches comprehensive details for a specific chapter within a given project, including its metadata (name, id), conversion status, progress, download availability, and content statistics.
Get chapters by project idRetrieves a list of all chapters, their details, and conversion status for a project, useful for managing content or tracking progress.
Get chapter snapshotsRetrieves all saved version snapshots for a specific chapter within a given project, enabling review of its history or reversion to prior states.
Get default voice settingsRetrieves the elevenlabs text-to-speech service's default voice settings (stability, similarity boost, style, speaker boost) that are applied when no voice-specific or request-specific settings are provided.
Get dubbed audio for a languageRetrieves an existing dubbed audio file for a specific `dubbing id` and `language code`.
Get dubbing project metadataRetrieves metadata and status for a specific dubbing project by its id.
Get generated itemsRetrieves metadata for a list of generated audio items from history, supporting pagination and optional filtering by voice id.
Get history item by idRetrieves detailed information (excluding the audio file) for a specific audio generation history item from elevenlabs, using its unique id.
Get pronunciation dictionary metadataRetrieves metadata for a specific, existing pronunciation dictionary from elevenlabs using its id.
Get modelsRetrieves a detailed list of all available elevenlabs text-to-speech (tts) models and their capabilities.
Get project by IDUse to retrieve all details for a specific project, including its chapters and their conversion statuses, by providing the project's unique id.
Get projectsFetches a list of all projects and their details associated with the user's elevenlabs account; this is a read-only operation.
Get project snapshotsRetrieves all available snapshots (saved states or versions) for an existing project, enabling history tracking, version comparison, or accessing specific states for playback/processing, particularly in text-to-speech workflows.
Get pronunciation dictionariesRetrieves a paginated list of pronunciation dictionaries, used to customize how specific words or phrases are pronounced by the text-to-speech (tts) engine.
Get pronunciation dictionary versionDownloads the pronunciation lexicon specification (pls) file for an existing version of a pronunciation dictionary from elevenlabs, used to customize tts pronunciation.
Get shared voicesRetrieves a paginated and filterable list of shared voices from the elevenlabs voice library.
Get sso provider adminRetrieves the sso provider configuration for a specified workspace, typically for review purposes, and will indicate if no configuration exists.
Get dubbing transcript by languageRetrieves the textual transcript for a specified dubbing project and language, if one exists for that language in the project.
Get user infoRetrieves detailed information about the authenticated elevenlabs user's account, including subscription, usage, api key, and status.
Get user subscription infoRetrieves detailed subscription information for the currently authenticated elevenlabs user.
Get voiceRetrieves comprehensive details for a specific, existing voice by its `voice id`, optionally including its settings.
Get voices listRetrieves a list of all available voices along with their detailed attributes and settings.
Get voice settingsRetrieves the stability, similarity, style, and speaker boost settings for a specific, existing elevenlabs voice using its `voice id`.
Get API documentationRetrieves the content of the official elevenlabs api documentation page hosted on mintlify.
Remove rules from pronunciation dictionaryPermanently removes exact-match pronunciation rules from a specified elevenlabs pronunciation dictionary using a list of rule strings; non-matching rule strings are ignored and this action cannot add or modify rules.
Speech to speechConverts an input audio file to speech using a specified voice; if a `model id` is provided, it must support speech-to-speech conversion.
Speech to speech streamingConverts an input audio stream to a different voice output stream in real-time, using a specified speech-to-speech model.
Stream chapter audioStreams the audio for a specified chapter snapshot from an elevenlabs project, optionally converting the output to mpeg format.
Stream project audioStreams audio from a specific project snapshot, optionally converting it to mpeg format.
Archive project snapshotArchives an existing project snapshot by its id, creating a permanent, immutable, and typically irreversible copy of its state.
Update project pronunciation dictionariesUpdates a project's pronunciation dictionaries on elevenlabs to improve text-to-speech accuracy for specialized terms; note that while multiple dictionaries can be applied, the ui only displays the first.
Voice generation parameters retrievalFetches configurable parameters for elevenlabs voice generation, used to determine available settings (e.

What is the Composio tool router, and how does it fit here?

What is Tool Router?

Composio's Tool Router helps agents find the right tools for a task at runtime. You can plug in multiple toolkits (like Gmail, HubSpot, and GitHub), and the agent will identify the relevant app and action to complete multi-step workflows. This can reduce token usage and improve the reliability of tool calls. Read more here: Getting started with Tool Router

The tool router generates a secure MCP URL that your agents can access to perform actions.

How the Tool Router works

The Tool Router follows a three-phase workflow:

  1. Discovery: Searches for tools matching your task and returns relevant toolkits with their details.
  2. Authentication: Checks for active connections. If missing, creates an auth config and returns a connection URL via Auth Link.
  3. Execution: Executes the action using the authenticated connection.

Step-by-step Guide

Prerequisites

Before you begin, make sure you have:
  • Node.js and npm installed
  • A Composio account with API key
  • An OpenAI API key

Getting API Keys for OpenAI and Composio

OpenAI API Key
  • Go to the OpenAI dashboard 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.
  • Navigate to your API settings and generate a new API key.
  • Store this key securely as you'll need it for authentication.

Install required dependencies

bash
npm install @ai-sdk/openai @ai-sdk/mcp @composio/core ai dotenv

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

Set up environment variables

bash
OPENAI_API_KEY=your_openai_api_key_here
COMPOSIO_API_KEY=your_composio_api_key_here
COMPOSIO_USER_ID=your_user_id_here

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

Import required modules and validate environment

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 { experimental_createMCPClient as 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,
});
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

Create Tool Router session and initialize MCP client

typescript
async function main() {
  // Create a tool router session for the user
  const { session } = await composio.create(composioUserID!, {
    toolkits: ["elevenlabs"],
  });

  const mcpUrl = session.mcp.url;
What's happening:
  • We're creating a Tool Router session that gives your agent access to Elevenlabs 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 Elevenlabs-related tools through the MCP protocol

Connect to MCP server and retrieve tools

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();
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 Elevenlabs tools that the agent can use

Initialize conversation and CLI interface

typescript
let messages: ModelMessage[] = [];

console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
console.log(
  "Ask any questions related to elevenlabs, like summarize my last 5 emails, send an email, etc... :)))\n",
);

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  prompt: "> ",
});

rl.prompt();
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

Handle user input and stream responses with real-time tool feedback

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);
});
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 Elevenlabs 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

Complete Code

Here's the complete code to get you started with Elevenlabs and Vercel AI SDK:

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 { experimental_createMCPClient as 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: ["elevenlabs"],
  });

  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 elevenlabs, 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 Elevenlabs 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 Elevenlabs MCP Agent with another framework

FAQ

What are the differences in Tool Router MCP and Elevenlabs MCP?

With a standalone Elevenlabs MCP server, the agents and LLMs can only access a fixed set of Elevenlabs tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Elevenlabs 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?

Yes, you can. Vercel AI SDK 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 Elevenlabs tools.

Can I manage the permissions and scopes for Elevenlabs while using Tool Router?

Yes, absolutely. You can configure which Elevenlabs 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 Elevenlabs data and credentials are handled as safely as possible.

Used by agents from

Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai

Never worry about agent reliability

We handle tool reliability, observability, and security so you never have to second-guess an agent action.