Build Your First AI App with Cursor in 15 Minutes
Cursor is one of the hottest coding tools — learn how to use it and finally build that buzzy idea you’ve been noodling on!
Welcome to NEW ECONOMIES, where we decode the technology trends reshaping industries and creating new markets. Whether you’re a founder building the future, an operator scaling innovation, or an investor spotting opportunities, we deliver the insights that matter before they become obvious. Subscribe to stay ahead of what’s next alongside 75,000+ others.
P.S. When you become an annual paid subscriber, you automatically access these best-in-class AI tools for free — for 12 months. Save thousands of dollars now!!
This week’s guest post
Xinran Ma is the founder and author of Design with AI, a newsletter exploring the practical application of AI in product design, with over 16k subscribers from companies like Google, Amazon, and McKinsey.
Xinran also teaches AI for Product Designers, a top-rated design course on Maven. As a NEW ECONOMIES subscriber, you’ll get an exclusive 15% off — check it out here.
Thinking about creating your first AI app but don’t know where to begin?
You don’t need extensive tech background to get started. At its core, an AI app is just a regular application that taps into an AI model through an API — a small connection that makes your project a lot smarter.
For newcomers, the setup process can look complicated. APIs, IDEs, and model integrations can sound like a lot. But it’s simpler than it seems.
In this newsletter, you’ll learn how to:
Set up a basic project in Cursor - one of the most popular vibe coding tools
Link it to the OpenAI API
That’s all it takes to move from idea to a simple working prototype in under 15 minutes. Once you’ve made that first connection, you’ll see how easy it is to expand. You can then experiment with other tools like Lovable or Windsurf, try out models such as Gemini or Claude, and start layering in custom features.
Let’s get your first AI app running 🚀
Step 1: Start A New Project in Cursor
If this is your first time using Cursor, think of it as a coding app that combines AI with a code editor. You can write in plain language, and Cursor will help you turn your ideas into code.
Starting a new project might feel a bit confusing at first since there isn’t a “Create project” button. Instead, click “Open project” to open or create a folder where your project files will be stored.
On the right side, you’ll find the chat panel with two available modes:
Agent Mode: This is the default mode. The agent can write and read code, edit files, run commands, and even fix errors.
Ask Mode: This mode is for asking questions about your code without making any changes to it. I only use it occasionally when I just need an explanation or quick clarification.
Step 2: Provide the Prompt in Cursor
I’m keeping the app as simple as possible for this demo. Here’s what I entered in the prompt box:
Make one simple page that has:
- a big box where I can type anything
- a button that says “Ask AI”
- a space below to show the AI’s answer
When I type something and click the button, the app should send it to OpenAI and get a reply, then show the reply on the page.Simple, but sufficient to enable the AI feature. Once the prompt was entered, Cursor’s agent began running:
Cursor automatically created a to-do list and started working through it. In summary, it explained that it would:
Build a server to connect with OpenAI
Set up the necessary files for the app
Assemble the main page
Show where to add the AI key
Run a few commands to launch the app
If any of these steps or technical terms are unclear, you can always ask the AI to explain them.
At one point, Cursor displayed the following:
This means I need to follow the instructions and add the API key correctly.
Step 3: Get An OpenAI API Key
If you don’t already have an API key or haven’t created one before, don’t worry. I’ll walk you through the process using the OpenAI API as an example.
Start by visiting platform.openai.com.
Keep in mind that the ChatGPT website (chat.openai.com) and the OpenAI API platform are separate. If you haven’t created an account on the API platform yet, you’ll need to sign up for one before continuing.
You’ll then see your API key. Copy it, save it somewhere safe for now, and click Continue.
Next, you’ll need to add some credits. A $5 balance is usually enough to get started and will last quite a while unless you’re using the more advanced models heavily.
(If you want free AI API alternatives, you can check out Gemini API “free tier”.)
That’s it. You can always find your API key again under the “API Keys” section in your dashboard.
Step 4: Store Your OpenAI API Key
Once you have your API key, the next step is to store it properly.
The best practice is to create an .env file in your project’s root folder and save the key there. This keeps your key secure while still making it easy to access when needed.
After that, I let Cursor know that I’d updated the API key. It then checked to make sure the API connection was working correctly.
Step 5: Test the App
Once Cursor tests the API endpoint and confirms it’s working, you’re all set.
The next step is to open the local server. In my case, I just opened a browser and went to http://localhost:3000.
There, I saw a simple user interface generated from my prompt.
I typed a question to test it out. It worked.
By the way, if you’re curious, Cursor automatically set the model to gpt-4o-mini, which you can see in the server.js file.
You can switch to a different model anytime if you prefer. Besides, you can find more about OpenAI models and pricing on its website.
Big thanks to Xinran for sharing his awesome insights! Don’t forget to subscribe to his newsletter for practical design and products tips on AI!
Xinran also hosts an awesome AI for Product Designers course.
Why is now a good time to take the course? Learning AI isn’t just a choice; it is a critical strategy to stay ahead and gain a competitive edge in your career, sooner rather than later. Throughout Xinran’s course, you will learn:
From Concept to Creation with AI
Real-World Applications and Case Studies
Practical, Hands-On Workshops
Latest Industry Insights
Exclusive Resources and AI Toolkits
Continuous Support and Community
NEW ECONOMIES readers can enjoy an exclusive 15% code on the program’s 2025 pricing ($999).
If you enjoyed this edition, help sustain our work by clicking ❤️ and 🔄 at the top of this post.
 | A guest post by
|
Xinran is one of my favorites! Great piece.
You have made it super simple