Skip to main content
VisionaryAI is built on a modern, serverless architecture that combines Next.js 13 with Azure Functions to deliver AI-powered image generation capabilities.

​
System architecture

The application follows a three-tier architecture:
Next.js 13 application with React Server Components and client-side interactivity for user interface and state management.
Next.js API Routes that act as a proxy between the frontend and Azure Functions backend.
Azure Functions providing serverless compute for OpenAI API integration and Azure Blob Storage management.

​
Communication flow

The following diagram illustrates how the frontend and backend communicate:

​
Image generation flow

1

User submits prompt

User enters a text prompt in the PromptInput component and clicks “Generate”.
2

Frontend API call

The component calls /api/generateImage endpoint with the prompt:
const res = await fetch("/api/generateImage", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ prompt: p }),
});
3

API route proxy

Next.js API route forwards the request to Azure Functions:
const response = await fetch(
  "https://ai-imagegenerator.azurewebsites.net/api/generateImage?",
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ prompt }),
  }
);
4

Azure Function processes request

The generateImage function calls DALL-E 3 API, downloads the generated image, and uploads it to Azure Blob Storage.
5

Response returned

Success message flows back through the API route to the frontend, triggering a toast notification.

​
Image retrieval flow

1

Component mounts

The Images component uses SWR to fetch images on mount.
2

API route called

Request goes to /api/getImages which proxies to Azure Functions.
3

Azure Function retrieves images

The getImages function lists all blobs from Azure Storage, generates SAS tokens for secure access, and returns sorted image URLs.
4

Images displayed

Frontend receives the image URLs and renders them in a responsive grid layout.

​
Key architectural decisions

Why Azure Functions? Serverless functions provide automatic scaling, reduced operational overhead, and cost-effective compute for AI workloads with variable demand.
Why proxy through Next.js API Routes? This pattern keeps Azure Function URLs and configuration private, enables request transformation, and provides a consistent API interface for the frontend.
SAS Token security: Azure Blob Storage uses Shared Access Signature (SAS) tokens with 30-minute expiration to provide temporary, secure access to generated images without exposing storage account keys.

​
Technology stack

  • Framework: Next.js 13.2.4 with App Router
  • UI Library: React 18.2.0
  • Styling: Tailwind CSS 3.3.2
  • State Management: SWR 2.1.1 for data fetching
  • Notifications: react-hot-toast 2.4.0
  • Analytics: Vercel Analytics

​
Data flow

​
State management with SWR

VisionaryAI uses SWR (Stale-While-Revalidate) for efficient data fetching and caching: 
const {
  data: images,
  isLoading,
  mutate: refreshImages,
  isValidating,
} = useSWR("images", fetchImages, {
  revalidateOnFocus: false,
});
SWR provides automatic revalidation, optimistic updates, and caching, reducing unnecessary API calls and improving user experience.

​
Azure Blob Storage integration

Generated images are stored in Azure Blob Storage with a naming convention that includes the prompt and timestamp: 
const timestamp = new Date().getTime();
const file_name = `${prompt}_${timestamp}.png`;
This allows for chronological sorting and retrieval of images based on generation time.

​
Scalability considerations

  • Serverless compute: Azure Functions automatically scale based on demand
  • CDN-ready: Blob Storage URLs can be fronted with Azure CDN for global distribution
  • Stateless design: No session state maintained on backend, enabling horizontal scaling
  • Caching strategy: SWR implements client-side caching to reduce API calls

​
Next steps

Frontend development

Explore React components and client-side architecture

Backend development

Deep dive into Azure Functions and OpenAI integration

Build docs developers (and LLMs) love

Get started for freeTalk to us