Skip to main content
ForgeAI uses Clerk for both authentication and subscription management. Clerk handles user sign-up, sign-in, and session management — and also controls which features are available based on a user’s plan.

​
Plan tiers

ForgeAI has two plan tiers:

Free

Access to prompt-based app generation and live preview. No credit card required.

Pro

All Free features, plus design-to-code screenshot upload and inline code editing.

​
Pro feature flags

Pro features are gated using Clerk feature flags. When a user upgrades to Pro, Clerk grants them the following features:
Feature flagWhat it enables
screenshot_uploadUpload a design screenshot to generate code from a visual spec (design-to-code).
inline_code_editOpen the Monaco editor to edit generated code directly in the browser.
When a request is made to a Pro-gated endpoint, ForgeAI calls requirePro, which checks whether the authenticated user’s Clerk session includes the required feature flag:
lib/pro-feature.ts
type FeatureKey = "screenshot_upload" | "inline_code_edit";

export const requirePro = async (
  auth: () => { has: (p: { feature: FeatureKey }) => boolean },
  status: (code: number, body: unknown) => unknown,
  feature: FeatureKey,
) => {
  const { has } = auth();

  if (!has({ feature })) return status(403, { error: "Pro is required" });
};
If a user without a Pro subscription attempts to use a gated feature, the API returns a 403 response with { "error": "Pro is required" }. The UI surfaces this as an upgrade prompt.

​
Configuring Clerk

1

Create a Clerk application

Sign in to the Clerk dashboard and create a new application. Choose your preferred sign-in methods (email, Google, GitHub, etc.).
2

Copy your API keys

In your Clerk application, go to API Keys and copy the publishable key and secret key.
3

Add keys to your environment

Add all Clerk variables to your .env.local file:
.env.local
CLERK_PUBLISHABLE_KEY="pk_..."
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_..."
CLERK_SECRET_KEY="sk_..."
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL="/"
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL="/"
CLERK_PUBLISHABLE_KEY and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY should be set to the same value. The NEXT_PUBLIC_ prefix makes the key available in the browser bundle.
4

Configure Pro plan feature flags

In the Clerk dashboard, set up your billing plans and assign the screenshot_upload and inline_code_edit feature flags to your Pro plan. Clerk will automatically include these flags in the user’s session token when they subscribe.

​
User journey

1

Sign up

New users register at /sign-up. Clerk handles credential collection, email verification, and session creation.
2

Use the app on the Free plan

After signing in, users can create projects, write prompts, and view live previews immediately — no upgrade required.
3

Upgrade to Pro

Users who want design-to-code or inline editing can upgrade to Pro. Once Clerk updates their subscription, the feature flags are added to their session and the Pro features become available without requiring a sign-out.

Environment Variables

Full reference for all Clerk environment variables.

Design-to-code

How the screenshot_upload Pro feature works end to end.

Code editor

How the inline_code_edit Pro feature works end to end.

API authentication

How Clerk sessions are validated in the API layer.

Build docs developers (and LLMs) love

Get started for freeTalk to us