Skip to main content
UploadThing provides secure, server-authenticated file uploads directly from the browser. ForgeAI uses it to accept design screenshots that are then analysed by GPT-4o and forwarded to the coding agent.

​
Required environment variable

UPLOADTHING_TOKEN=your_uploadthing_token

​
File router

The upload endpoint is defined in app/api/uploadthing/core.ts. It accepts a single image up to 4 MB and requires an authenticated Clerk session.
app/api/uploadthing/core.ts
import { createUploadthing, type FileRouter } from "uploadthing/next";
import { auth } from "@clerk/nextjs/server";

const f = createUploadthing();

export const ourFileRouter = {
  designImageUploader: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 1,
    },
  })
    .middleware(async () => {
      const { userId } = await auth();
      if (!userId) throw new Error("Unauthorized");
      return { userId };
    })
    .onUploadComplete(async ({ metadata }) => {
      return { uploadedBy: metadata.userId };
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

​
React helpers

lib/uploadthing.ts exports pre-typed React components and hooks generated from OurFileRouter.
lib/uploadthing.ts
import {
  generateUploadButton,
  generateUploadDropzone,
} from "@uploadthing/react";
import { generateReactHelpers } from "@uploadthing/react";
import type { OurFileRouter } from "@/app/api/uploadthing/core";

export const UploadButton = generateUploadButton<OurFileRouter>();
export const UploadDropzone = generateUploadDropzone<OurFileRouter>();

export const { useUploadThing } = generateReactHelpers<OurFileRouter>();
Use UploadButton or UploadDropzone anywhere in the UI to trigger the designImageUploader route, or use the useUploadThing hook for a fully custom upload experience.

​
How uploaded images flow through the system

  1. The user uploads a screenshot via designImageUploader.
  2. UploadThing returns the hosted image URL to the client.
  3. The client sends the imageUrl as part of the message payload when triggering the Inngest function.
  4. The Inngest build-agent-input step calls extractDesignSpecFromImage with the URL.
  5. GPT-4o-2024-08-06 analyses the image and returns a structured DesignSpec.
  6. The spec is prepended to the coding agent’s input, and the imageUrl is stored on both the Message and CodeFragment records.
Image uploads are only available to Pro users. The upload UI is gated behind the screenshot_upload feature flag. Users on the free plan cannot attach design screenshots to their prompts.

Design to code

How uploaded screenshots are converted into a design spec and passed to the agent.

AI models

The GPT-4o model that processes the uploaded image.

Build docs developers (and LLMs) love

Get started for freeTalk to us