Local setup

Follow this guide to set up VisionaryAI for local development, including both the Next.js frontend and Azure Functions backend.

Prerequisites

Before starting, ensure you have the following installed:

Required software

Node.js: Version 18.x or higher
npm: Version 8.x or higher (or yarn/pnpm)
Azure Functions Core Tools: Version 4.x
Visual Studio Code: Recommended IDE
Git: For version control

Required accounts

OpenAI account: For DALL-E 3 and GPT API access
Azure account: For Blob Storage and Functions deployment

Installation

Clone the repository

git clone https://github.com/Srijan-D/DALLE3.git
cd DALLE3

Install dependencies

Install frontend dependencies

npm install

This installs Next.js, React, Tailwind CSS, and other frontend dependencies.

Install backend dependencies

cd azure
npm install
cd ..

This installs Azure Functions SDK, OpenAI client, and Azure Storage SDK.

You can use yarn or pnpm instead of npm if preferred. The project supports all major package managers.

Configuration

OpenAI API setup

Get OpenAI API key

Visit OpenAI API Keys
Click “Create new secret key”
Copy the generated API key (starts with sk-)
Note your organization ID from Settings

Create environment file

Create a .env.local file in the azure directory:

cd azure
touch .env.local

Add OpenAI credentials

Add the following to azure/.env.local:

OPEN_AI_KEY=sk-your-api-key-here
OPEN_AI_ORGANIZATION=org-your-org-id-here

Never commit .env.local files to version control. They should be listed in .gitignore.

Azure Blob Storage setup

Create Azure Storage Account

Log in to Azure Portal
Create a new Storage Account
Choose a unique name for your storage account
Select a region close to your users
Use Standard performance tier for development

Create images container

Navigate to your Storage Account
Go to “Containers” under Data Storage
Click ”+ Container”
Name it images
Set public access level to “Private”

Get storage credentials

In your Storage Account, go to “Access keys”
Copy the storage account name
Copy one of the access keys (key1 or key2)

Add to environment file

Add to azure/.env.local:

accountName=your-storage-account-name
accountKey=your-storage-account-key

Azure provides a free tier with 5 GB storage and 20,000 read operations. This is sufficient for development.

Running the application

Start the backend

Navigate to Azure directory

cd azure

Start Azure Functions

npm run start

Or using Azure Functions Core Tools directly:

func start

Verify functions are running

You should see output like:

Functions:

generateImage: [POST] http://localhost:7071/api/generateImage

getChatGPTSuggestion: [GET] http://localhost:7071/api/getChatGPTSuggestion

getImages: [GET] http://localhost:7071/api/getImages

Keep this terminal window open. The functions run on port 7071 by default.

Update frontend API endpoints

For local development, update the API routes to point to your local Azure Functions:

app/api/generateImage/route.ts

const response = await fetch(
  "http://localhost:7071/api/generateImage",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ prompt }),
  }
);

app/api/getImages/route.ts

const response = await fetch(
  "http://localhost:7071/api/getImages",
  {
    cache: "no-store",
  }
);

app/api/suggestion/route.ts

const response = await fetch(
  "http://localhost:7071/api/getChatGPTSuggestion",
  {
    cache: "no-store",
  }
);

Start the frontend

Open new terminal

Navigate to the project root directory.

Start Next.js development server

npm run dev

Open in browser

Visit http://localhost:3000

The Next.js development server includes hot module replacement (HMR), so changes to frontend code will automatically refresh the browser.

Development workflow

Project structure

Here’s the complete project structure:

visionaryai/
├── app/                        # Next.js 13 App Router
│   ├── api/                    # API route handlers
│   ├── layout.tsx              # Root layout
│   └── page.tsx                # Home page
├── azure/                      # Azure Functions backend
│   ├── src/functions/          # Function implementations
│   ├── lib/                    # Shared utilities
│   └── .env.local              # Local environment variables
├── components/                 # React components
├── lib/                        # Frontend utilities
├── public/                     # Static assets
├── styles/                     # Global styles
└── package.json                # Frontend dependencies

Making changes

Frontend changes
Backend changes
Styling changes

Edit files in app/, components/, or lib/
Save the file
Browser automatically refreshes with changes
Check console for any errors

Edit files in azure/src/functions/ or azure/lib/
Save the file
Azure Functions automatically reloads
Test the endpoint with updated logic

Modify Tailwind classes in components
Or edit styles/globals.css
Changes reflect immediately with HMR

Testing image generation

Open the application

Navigate to http://localhost:3000

Get a suggestion

Click “New suggestion” to get an AI-generated prompt idea.

Generate an image

Either:

Click “Use suggestion” to generate with the AI prompt
Enter your own prompt and click “Generate”

Monitor progress

Watch the toast notification for generation status
Check Azure Functions terminal for logs
Images appear in the gallery once uploaded

DALL-E 3 image generation typically takes 10-30 seconds. Be patient while the AI creates your image.

Troubleshooting

Azure Functions not starting

Problem: Functions fail to start or show errors.Solutions:

Verify Azure Functions Core Tools is installed: func --version
Check that .env.local exists and has correct credentials
Ensure Node.js version is 18.x or higher: node --version
Try deleting node_modules and running npm install again

OpenAI API errors

Problem: “Invalid API key” or “Rate limit exceeded” errors.Solutions:

Verify API key starts with sk- and is complete
Check OpenAI account has available credits
Ensure you have access to DALL-E 3 API (may require paid plan)
Review OpenAI rate limits

Azure Blob Storage errors

Problem: “Storage account not found” or “Authentication failed”.Solutions:

Verify storage account name is correct (no typos)
Ensure access key is the full key (very long string)
Check that the images container exists
Confirm storage account is not behind a firewall

Images not appearing

Problem: Generation succeeds but images don’t show in gallery.Solutions:

Click “Refresh Images” button
Check Azure Portal to verify blobs were uploaded
Verify SAS token generation is working (check backend logs)
Check browser console for CORS or network errors

CORS errors

Problem: Browser shows CORS policy errors.Solutions:

Ensure Azure Functions is running on port 7071
Verify API routes are pointing to localhost:7071
Configure CORS in Azure Portal for production deployments
Check that requests include proper headers

VS Code setup

Recommended VS Code extensions:

Essential extensions

Azure Functions: Manage and debug Azure Functions
Tailwind CSS IntelliSense: Autocomplete for Tailwind classes
ES7+ React/Redux/React-Native snippets: React code snippets
Prettier: Code formatting
ESLint: JavaScript linting

Launch configuration

Create .vscode/launch.json for debugging:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Attach to Azure Functions",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "preLaunchTask": "func: host start"
    }
  ]
}

Environment variables reference

Complete list of required environment variables:

Backend (azure/.env.local)
Frontend (.env.local)

# OpenAI Configuration
OPEN_AI_KEY=sk-...
OPEN_AI_ORGANIZATION=org-...

# Azure Storage Configuration
accountName=your-storage-account
accountKey=your-storage-key

Optional frontend environment variables:

# Vercel Analytics (optional)
NEXT_PUBLIC_ANALYTICS_ID=your-analytics-id

Next steps

Architecture overview

Learn how the system components work together

Frontend development

Explore React components and UI patterns

Backend development

Deep dive into Azure Functions and AI integration

API Reference

Explore the complete API documentation

Getting Started

Core Features

Azure Deployment

Development

Prerequisites

Installation

Clone the repository

Install dependencies

Configuration

OpenAI API setup

Azure Blob Storage setup

Running the application

Start the backend

Update frontend API endpoints

Start the frontend

Development workflow

Project structure

Making changes

Testing image generation

Troubleshooting

VS Code setup

Launch configuration

Environment variables reference

Next steps

Architecture overview

Frontend development

Backend development

API Reference

​Prerequisites

​Installation

​Clone the repository

​Install dependencies

​Configuration

​OpenAI API setup

​Azure Blob Storage setup

​Running the application

​Start the backend

​Update frontend API endpoints

​Start the frontend

​Development workflow

​Project structure

​Making changes

​Testing image generation

​Troubleshooting

​VS Code setup

​Launch configuration

​Environment variables reference

​Next steps

Architecture overview

Frontend development

Backend development

API Reference

Prerequisites

Installation

Clone the repository

Install dependencies

Configuration

OpenAI API setup

Azure Blob Storage setup

Running the application

Start the backend

Update frontend API endpoints

Start the frontend

Development workflow

Project structure

Making changes

Testing image generation

Troubleshooting

VS Code setup

Launch configuration

Environment variables reference

Next steps