ELEVEN LABS

Ever wanted to build a Mac app but don't know how to code? With Cursor Composer and Claude, you can create a fully functional Mac app in just one day! This guide walks you through the process of building the ElevenLabs Helper app—a tool that lets you generate speech directly from your menu bar and drag it into your video editor for seamless AI voiceovers.

What You'll Need

  • Cursor: Download Cursor and get a Pro account to access Composer, which allows you to create and edit apps through natural language chat.
  • Xcode: Required to build and run Mac or iOS apps. Download it from the Mac App Store.
  • ElevenLabs API: Create an account on ElevenLabs, grab your API key, and save it for later.
  • Figma (Optional): Useful for creating mockups to guide Composer, but not essential.

Step 1: Start with an Idea

Before coding, have a clear idea. I wanted to create an ElevenLabs app for Mac, and using Figma, I made a mockup to guide the process. Save a screenshot of your mockup for later use.

Step 2: Set Up Your Composer Project

  1. Create a New Folder: Open Composer, create a new folder for your app, and add an Instructions.txt file to outline your plan.
  2. Add Your Mockup: Drag your mockup screenshot into this folder to reference it in your instructions.

Step 3: Prompt Effectively

  1. Break Down the Steps: Don't try to build the whole app at once. Start with the interface. This approach ensures a solid foundation before diving into API integration.
  2. Focus on the UI First: Ask Composer to create the app's UI based on your mockup without implementing any functionality yet.

Step 4: Run Your First Version

  1. Use Xcode: Copy the code generated by Composer into Xcode. If Composer creates multiple files, replicate them in Xcode.
  2. Test and Iterate: Run the app in Xcode, and if there are errors, take screenshots and feed them back into Composer for corrections.

Step 5: Connect to the ElevenLabs API

  1. Fetch Voices: Start by connecting the ElevenLabs API to fetch voices. Provide Composer with API snippets directly from the ElevenLabs documentation.
  2. Generate Speech: Once the dropdowns and text fields are set up, prompt Composer to implement speech generation using the API.

Step 6: Iterating and Adding Features

  1. Add More Functionality: Extend the app by adding features like retaining the last five speech items, enabling drag-and-drop for speech files, or improving UI elements.
  2. Prepare for Sharing: Modify the app to ask for a user's API key on first launch, allowing you to share the app without exposing your own API key.

Tips and Pitfalls

  • Use Figma's Developer Mode: Get exact code specs from your mockups to refine your UI.
  • Handle Composer Bugs: If Composer stops responding or misses updates, reset or restart the tool.
  • Leverage Documentation: Use Composer's @ command to reference specific files or developer docs.