Build Your AI App in 10 Minutes with Expo and Cursor

Demo Time

Here you can see what we will build:

1. Start with Expo

Expo is like a toolbox that helps you build apps for Android, iOS, and the web. Think of it as a bridge between coding and making your app work on real devices.

Install Expo

Install Node.js
Node.js is required to use Expo.
Windows: - install node js from offical website - use windows terminal
Mac OS - "brew install node"
Install expo

Open Cursor and start your app!

Cursor is a code editor with AI coding capabilities.
Open the integrated terminal in Cursor
Type "npm run web"
Your app runs already

(Check out my Cursor step by step to get the hang of things first.)

Use Cursorrules

You can install my Cursorrules Manager Extension to find and load them quickly. This helps the AI follow your rules and guidelines.

Or, alternatively you can learn how to create your own Cursorrules.

Open v0 dev

Insert your design and build your frontend design. Refine until you're happy.

Back to Cursor

Add docs Before we use our v0 design in Cursor add expo docs (Note: The React Native documentation is preloaded)

Add your own documentation in Cursor:

First check whether your desired framework is not already included in the standard docs. You can do this when Composer/Chat is open with @<framework>, for example.
Or also check the Docs repository: https://github.com/getcursor/crawler
You can add your own docs in Cursor Settings in Settings -> Features -> Docs (scroll down)

The little "book" icon beneath the custom docs shows you which pages were indexed. Always check this to see if cursor succeeded with indexing.

I've written a complete guide on how you can How to add Documentation to Cursor.

2. What to do when indexing fails?

To be honest, I can't give any tips here, because the indexing often seems very arbitrary to me. If necessary, simply throw parts of the documentation into the chat/composer context. It is better to index less than the complete documentation. This generally works better.

Cursor is not always the only way.

For example I struggled to index the threejs docs. And I already had my hours with Threejs and for complex processing I can recommend using ChatGPT with o1-preview and without cursor. Furthermore, http://v0.dev also has good Threejs support. So for a new project, for example, I would use v0 to create the Threejs app and then continue editing in Cursor

3. Combine everything and build the App

Open Cursor Composer.
Insert Full Prompt (see 10.)
Add docs for expo and react native
add api key from fal ai
stop and restart server with npm run web

4. Prompt

You are building the following react native app with expo

Use expo-image cross platform component
avoid using react-native-dotenv and use Expo's inbuilt .env file support.

<task> - you create a beautiful but minimal ai chat interface - it will be a chat application where a user can input a text which will act as prompt and will be sent an api. generateImage() - this api handles image generation with fal ai service which i have written above. - after the image is finished it will be shown above the chat as response. </task> Code Snippet for the Frontend in React Take this Code as baseline and rewrite it to 100% working react native. </task>

Insert Code from v0 here
Insert Fal Api Documentation Code here.

5. Conclusion

As always, these videos are very nice to watch, but remember that you still need to know what you're doing. You will get off to a good start.

But from there you are more or less "on your own". This means that you have to take Cursor as your coding assistant and go on a journey of refining, debugging and testing.

All these settings will make things run smoother and faster, but in the end you will still have to learn coding and tooling.

A few extra article guides that might help you:

Happy coding!🚀

Table of Contents

Demo Time
1. Start with Expo
2. What to do when indexing fails?
3. Combine everything and build the App
4. Prompt
5. Conclusion