ElevenLabs Text-to-Speech MCP server

This MCP server integrates ElevenLabs Text-to-Speech capabilities with Cursor through the Model Context Protocol. It provides a FastAPI backend service and a React frontend, allowing you to transform text into natural-sounding speech directly within the Cursor environment.

Requirements

• Python 3.11+
• Poetry (for backend dependency management)
• Node.js 18+ (for frontend)
• Cursor (for MCP integration)

Installation

Backend Setup

# Clone the repository
git clone https://github.com/georgi-io/jessica.git
cd jessica

# Create Python virtual environment
python -m venv .venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate

# Install backend dependencies
poetry install

# Configure environment
cp .env.example .env
# Edit .env with your ElevenLabs API key

Frontend Setup

# Navigate to frontend directory
cd src/frontend

# Install dependencies
npm install

Running the Server

Starting the Backend

# Activate virtual environment if not active
source .venv/bin/activate  # On Windows: .venv\Scripts\activate

# Start the backend
python -m src.backend

The backend will be available at:

• REST API: http://localhost:9020
• WebSocket: ws://localhost:9020/ws
• MCP Server: http://localhost:9020/sse

Starting the Frontend

# In src/frontend directory
npm run dev

The frontend development server will be available at http://localhost:5173

Configuration

Backend Environment Settings (.env)

# ElevenLabs API
ELEVENLABS_API_KEY=your-api-key

# Server Configuration
HOST=127.0.0.1
PORT=9020

# Development Settings
DEBUG=false
RELOAD=true

Frontend Environment Settings (.env)

VITE_API_URL=http://localhost:9020
VITE_WS_URL=ws://localhost:9020/ws

Integrating with Cursor

1. Ensure the backend server is running
2. Open Cursor settings
3. Add a new MCP server with these settings:
   • Name: Jessica TTS
   • Type: SSE
   • URL: http://localhost:9020/sse

Troubleshooting

Common Issues

1. API Key Issues

   • Error: "Invalid API key"
   • Solution: Check your .env file to ensure you've entered a valid ElevenLabs API key

2. Connection Problems

   • Error: "Cannot connect to MCP server"
   • Solution: Verify the backend is running and ports are configured correctly

3. Port Conflicts

   • Error: "Address already in use"
   • Solution: Change the ports in your .env file to use available ports

4. WebSocket Connection Failed

   • Error: "WebSocket connection failed"
   • Solution: Ensure the backend is running and the WebSocket URL is correct in your frontend configuration

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.