Tubegraph

Utilizing AI models and APIs for image generation

7 min read

From: gregisenberg

This article details the process of building applications using AI, specifically focusing on creating an AI image generator from scratch and deploying it. The workflow heavily relies on Cursor, an AI-first code editor, and various external APIs and services [00:00:06].

Core Tools and Workflow

The primary tool for development is Cursor, which is used for building apps with AI [00:00:06]. Other notable AI tools in the coding space include V0, Windsurf, Replit, and Lovable [00:00:30].

The traditional workflow involved starting with frontend design on VZ, then importing it into Cursor, and using Replit for live web view and deployment [00:01:08]. Replit is praised for its ease of use with templates and deployment [00:01:41]. However, a new feature in Cursor, Agent, has significantly simplified the process [00:02:08]. With Agent, the need for Replit’s live web view has diminished, now primarily using GitHub for templates and running locally [00:02:44].

Building an AI Image Generator with Cursor Agent

Initial Setup and Local Execution

The first step is to open Cursor and create a new project by opening a blank folder on your computer [00:03:57]. From within Cursor, you can access the Composer feature [00:04:30].

To get started, you can use a pre-made Next.js template hosted on GitHub [00:02:44]. A simple prompt like “clone the repo and run it locally in one command” with the GitHub link allows Cursor Agent to set up the project locally [00:05:06]. Cursor Agent can automatically handle cloning the repository and installing dependencies for Next.js projects [00:05:47].

Cursor offers a “YOLO mode” which automatically confirms commands without requiring repeated “yes” clicks, though users are advised to trust the source of any cloned repository [00:06:49]. Once set up, the app runs on a local host (e.g., localhost:3001), allowing for live changes [00:07:10].

Integrating APIs for Image Generation

To add AI content generation features, such as image generation, you need to integrate external APIs. The process involves:

  1. Finding Code Examples: Use tools like Perplexity to search for Next.js code examples for specific AI image models (e.g., Flux on Replicate) [00:11:09]. These examples act like “instruction manuals” for Cursor, as it doesn’t inherently understand API rules [00:12:08].
  2. Providing API Tokens: Most APIs require an API token or key, as using them incurs costs [00:13:29]. You obtain these from the API provider’s dashboard (e.g., Replicate.com) [00:14:03]. You then instruct Cursor to place this token in the correct .env file [00:15:07].
  3. Prompting Cursor: The general pattern for API integration is: Instructions (what you want to build), Examples (code snippets from docs or playgrounds), and API Token [00:15:29].
I want to create a simple AI image generator. I want to use Replicate and I want to use Flux.
[Paste code examples from Perplexity]
This is my API token: [Your API Token]. Please put it in the correct place.

This comprehensive prompt allows Cursor to generate the necessary code [00:15:54].

Troubleshooting and Iteration

It’s common to encounter errors during development [00:17:37]. When an error occurs, paste the error message back into Cursor. To help Cursor, provide additional information:

  • API Documentation (Docs): Find the official documentation for the API (e.g., Replicate docs) [00:18:15].
  • Playground Examples: Many AI services offer “playgrounds” where you can test models and get working code examples [00:19:12]. Copy these examples and provide them to Cursor [00:19:42].
  • Detailed Observations: Explain exactly what happened (e.g., “it failed immediately,” “it loaded for a bit then failed”) because Cursor doesn’t see your web view [00:21:20].

This iterative process of providing more context and examples helps Cursor debug and fix the code [00:21:52]. This highlights that automating software creation with AI is often an iterative process, not a one-shot solution [00:23:13].

Enhancing Features and Design

Once the basic image generation works, you can add more features:

  • Model Selection: Implement a toggle or dropdown to switch between different AI image models (e.g., initial model, Flux Pro, Ideogram) [00:32:48]. Ideogram is noted for its ability to add text within images [00:33:32].
  • Generation Details Pop-up: Create a user interface element (e.g., an info icon bubble) that displays the model used and all parameters for the generated image upon click [00:27:11]. This aids in testing and understanding model performance [00:27:53].
  • Design Improvements: After core functionality, focus on redesigning the interface to look more modern, ensuring no functionality is broken [00:38:03]. You can specify elements like a title in the top bar [00:38:29]. This is an example of asset generation with AI for app design.

Integrating a Database (Firebase)

To save generated images and user data, a database is essential. The template used was preconfigured with Google Firebase authentication and storage [00:42:54].

The steps to set up Firebase manually after prompting Cursor to implement it are:

  1. Create Firebase Project: Go to the Firebase console and create a new project (e.g., “Mount Cursor”) [00:43:50]. Do not enable Google Analytics to simplify initial setup [00:44:44].
  2. Add Web App: Register a web app within your Firebase project to get its API tokens [00:45:11]. Provide these API tokens to Cursor to place in the .env file [00:45:35].
  3. Firestore Database: In the “Build” section, enable Firestore Database, starting in test mode for easier development [00:46:35].
  4. Storage: Enable Storage to save images. It’s recommended to set a spending limit (e.g., $20) to prevent unexpected bills [00:47:12].
  5. Authentication: Enable Google Authentication. Localhost is automatically authorized [00:48:25].

After setup, users can sign in with Google, and generated images will automatically save to their storage. A “My Images” tab can be added to the top bar to display all saved images [00:37:37].

Deployment (Vercel)

The final step is to deploy the app to the internet. Vercel is used for deployment [00:55:46].

  1. GitHub Repository: Create a new public repository on GitHub for your project [00:55:10].
  2. Deploy with Cursor Agent: Instruct Cursor Agent to “deploy this app to Vercel and commit it to GitHub” with the GitHub repo link [00:56:01]. Cursor can often create the GitHub repo automatically [00:57:08].
  3. Vercel Setup: If not already logged in, Cursor Agent will prompt you to sign in to Vercel [00:58:16]. You select personal or business, choose not to link to an existing project (if new), name the project, and confirm directory settings [00:58:51].
  4. Environment Variables: A common deployment failure is missing API keys. Navigate to your Vercel project settings, then “Environment Variables,” and add all necessary API keys (e.g., REPLICATE_API_TOKEN) [01:03:01]. After adding, redeploy the project [01:07:04].
  5. Firebase Authorized Domains: For authentication to work on the deployed site, you must add the Vercel domain to the “Authorized Domains” list in your Firebase Authentication settings [01:09:43].

Once deployed, the app will be live on a Vercel domain [00:59:38]. This process showcases how AI for app development can lead to a fully functional, deployed application in a relatively short time [01:11:51].

Conclusion and Tips

The entire process, from setting up a blank project to deploying a full-stack AI image generator with user authentication and image saving, can be completed efficiently using Cursor Agent [01:10:31].

  • Learning Mindset: Approach AI development with the expectation that it will be challenging and iterative, rather than a single prompt solution [00:35:47]. Learning comes most from struggling through problems [00:35:39].
  • Templates: Using pre-configured templates (e.g., with Firebase) significantly speeds up development [00:39:58].
  • Iterative Building: It’s more enjoyable and effective to iteratively build and test features rather than trying to create a complete app from scratch in one go [00:23:13].
  • Cursor History: Cursor’s new feature allows viewing and rolling back project history, effectively replacing the need for manual Git saves [01:12:30].
  • Prototyping: Building “absurd” tools or simple prototypes can be a great way to learn and “sketch” ideas without immediate commercial pressure [00:34:42]. This is part of the broader field of using AI in content creation.

This detailed walk-through demonstrates the power of productized services using AI and how developers can leverage these tools to build complex applications relatively quickly.

Graph View