How to Build with ElevenLabs and Cursor at a Hackathon

Why Voice AI Wins Hackathon Demos

Walk into any hackathon expo and you will see two hundred dashboards and chatbots. The one project that makes judges actually stop and lean in is the one that talks back. Voice is the demo element nobody else thought to add, and the moment your app answers out loud in a real human voice, you stop being another browser tab in the lineup.

Step 0: Write the PRD First

AI agents will happily write all the code you need. They will not guess what you actually want. Before Cursor opens a single file, write down what you are building, who it is for, and what success looks like. Save it as PRD.md and AGENTS.md at the repo root, so every future prompt has the same source of truth to read.

The Modern Hackathon Workflow: Agents Write the Code

In 2026, nobody on a winning hackathon team is typing out CRUD endpoints by hand. Cursor types them. Claude Code types them. The human job is the part the agent cannot do for you: pick the problem, define the interface, decide if the output is good, and pitch the result on stage.

This matters most at hackathons because time is the only thing you do not have. A team that hands implementation to an agent and spends those saved hours on UX, demo polish, and the pitch will beat a team that types every line by hand. Every single time.

Step 1: Check if the Tool Has an MCP

An MCP (Model Context Protocol) server is a small program that hands your AI agent a real menu of typed, callable tools for a specific service. Instead of pasting docs and hoping, the agent sees actual actions like 'generate speech', 'clone a voice', or 'transcribe this file', and gets back structured data it can reason about.

ElevenLabs ships an official one at github.com/elevenlabs/elevenlabs-mcp. Drop the config below into Cursor and your agent gets direct access to text-to-speech, voice cloning, sound effects, transcription, and the ElevenAgents platform. No copy-pasting docs into prompts required.

{
  "mcpServers": {
    "ElevenLabs": {
      "command": "uvx",
      "args": ["elevenlabs-mcp"],
      "env": {
        "ELEVENLABS_API_KEY": "<your-api-key-here>"
      }
    }
  }
}

Step 2: No MCP? Paste the Docs

Some tools do not have an MCP server yet. The fallback is to give Cursor a direct link to the official docs in the prompt itself. Cursor fetches the page, reads it, and uses the live API surface instead of whatever stale version the model remembers from training.

Here is the exact shape of a Cursor prompt I would use to build a streaming text-to-speech endpoint when no MCP is available. Notice it has a file anchor, a behavior spec, a constraint list, and a 'Done when' section. Cursor stops when the conditions are met instead of wandering off.

Read https://elevenlabs.io/docs/overview/intro and PRD.md > Backend Routes.

Create app/api/speak/route.ts in Next.js 15 (App Router, TypeScript).

Behavior:
- POST handler, accepts { text: string } JSON body
- Calls ElevenLabs text-to-speech with model_id "eleven_flash_v2_5"
- Voice ID and API key come from process.env (already in .env.local)
- Returns audio as a streaming audio/mpeg response

Constraints:
- Use the official @elevenlabs/elevenlabs-js SDK (install if needed)
- No retries, no caching, no logging
- Do not touch any other route or component

Done when:
- curl -X POST localhost:3000/api/speak -d '{"text":"hello"}' returns audio bytes
- The response Content-Type is audio/mpeg
- npm run build passes with no new TS errors

Step 3: Paste the API Key, Then Let the Agent Build and Test

Drop your API key into .env.local at the project root. Both the MCP server and your application code read from this same file, so you never have to think about it again.

ELEVENLABS_API_KEY=sk_your_key_here
ELEVENLABS_VOICE_ID=JBFqnCBsd6RMkjVDRZzb
ELEVENLABS_MODEL_ID=eleven_flash_v2_5

Now hand the agent a clean task: read the PRD, build the next unfinished feature, run the test, stop only when the test passes. A good agent will read the docs on its own, scaffold the files, install the dependencies, hit the live API, and verify the response. Your job is to watch the loop and step in when it goes sideways.

Test-Driven Development with AI Agents

The single highest-leverage trick I have found when building with an agent is to flip the order. Make the agent write the test first, then make it build the feature that satisfies the test. It is classic test-driven development (en.wikipedia.org/wiki/Test-driven_development) applied to a coding partner that happens to be an LLM.

“Never write a new piece of functionality without a failing test.”

Watch Your Spend and Ship It

AI agents in a tight loop can rack up real money fast. Both your Cursor subscription and your ElevenLabs credits are on the line if you walk away from a misbehaving agent at hour 18 of a hackathon. Do not.