Build & Deploy Cutting-Edge AI Web Apps in Minutes!

AI development has never been easier! With Cursor AI IDE, GitHub, and Vercel AI, you can build and deploy AI-powered apps effortlessly. In this blog, we’ll walk through creating a web app that takes user input and generates an AI-generated image using OpenAI’s APIs.

Let’s dive in!

Step 1: Set Up Your Development Environment

Why Use Cursor AI?

Cursor AI is an AI-powered IDE that helps speed up coding with intelligent suggestions, inline explanations, and debugging features. It integrates seamlessly with GitHub, making collaboration smooth.

Installation & Setup

1. Download and install Cursor AI IDE from cursor.sh.
2. Set up a new project and initialize a GitHub repository using:

3.? git init

4.? git remote add origin <your-repo-url>

1. Install dependencies for a Next.js app:

6.? npx create-next-app@latest my-ai-app?

7.? cd my-ai-app?

8.? npm install openai?

Step 2: Build the AI-Powered Image Generator

1. Get Your OpenAI API Key

Sign up at OpenAI and generate an API key from the developer dashboard.

2. Create an API Route in Next.js

Inside pages/api, create generate-image.js:

import { OpenAI } from "openai";
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
export default async function handler(req, res) {

  if (req.method !== "POST") return res.status(405).json({ error: "Method not allowed" });
  const { prompt } = req.body;
  try {

    const response = await openai.images.generate({
      model: "dall-e-3",
      prompt,
      n: 1,
      size: "1024x1024",
    });
    res.status(200).json({ imageUrl: response.data[0].url });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}        

3. Build the Frontend for User Input

Modify pages/index.js to add an input field and display the generated image:

import { useState } from "react";
export default function Home() {
  const [prompt, setPrompt] = useState("");
  const [imageUrl, setImageUrl] = useState(null);
  const [loading, setLoading] = useState(false);
  const generateImage = async () => {
    setLoading(true);
    const res = await fetch("/api/generate-image", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    });
    const data = await res.json();
    setImageUrl(data.imageUrl);
    setLoading(false);
  };

  return (
    <div style={{ textAlign: "center", padding: "2rem" }}>
      <h1>AI Image Generator</h1>
      <input
        type="text"
        placeholder="Describe an image..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <button onClick={generateImage} disabled={loading}>
        {loading ? "Generating..." : "Generate Image"}
      </button>
      {imageUrl && <img src={imageUrl} alt="Generated" style={{ marginTop: "20px", width: "300px" }} />}
    </div>
  );
}        

Step 3: Deploy on GitHub and Vercel

1. Push Code to GitHub

1. Create a .env.local file and add your API key:

2.? OPENAI_API_KEY=your_openai_api_key

1. Commit and push:

4.? git add .?

5.? git commit -m "Initial commit"?

6.? git push origin main?

2. Deploy on Vercel AI

1. Install Vercel CLI:

2.? npm install -g vercel?

1. Run vercel in the terminal and follow the setup prompts.
2. Once deployed, Vercel provides a live URL for your AI-powered web app!

Conclusion

In just a few steps, we built and deployed a fully functional AI-powered web app that takes user input and generates images using OpenAI’s APIs. By leveraging Cursor AI’s smart coding assistance, GitHub’s version control, and Vercel AI’s seamless deployment, we streamlined the entire development workflow.

?