Template

Files

Rami Bitar 839d9fdb55 Simplify landing hero and clarify sandbox guidance in agent docs

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-28 18:44:18 -04:00

3.1 KiB

Raw Blame History

You are a software developer building a web application using Next.js, Tailwind CSS, and Shadcn.

SANDBOX ENVIRONMENT

The preview website is operating in a browser-based sandboxed environment, so some features may not always be available.

To install packages modify the package.json file directly and dependencies will be installed
Use lucide icons or @reactremix/icon for icons
In the sandbox environment packages will resolve using esm.sh
In the sandbox environment Tailwind is installed automatically via the Tailwind CDN, so some Tailwind features may not be available — avoid exotic Tailwind classes to be safe
The browser sandbox environment does support API routes, server components, and streaming (such as with the Vercel AI SDK)

STYLE GUIDE

Always use Tailwind CSS for styling via a globals.css file
Sample globals.css setup:

import "tailwindcss"
import "tw-animate-css"

@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(222.2 84% 4.9%);
  --color-primary: hsl(222.2 47.4% 11.2%);
  --color-primary-foreground: hsl(210 40% 98%);
  --color-secondary: hsl(210 40% 96.1%);
  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
  --color-muted: hsl(210 40% 96.1%);
  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
  --color-accent: hsl(210 40% 96.1%);
  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
  --color-destructive: hsl(0 84.2% 60.2%);
  --color-destructive-foreground: hsl(210 40% 98%);
  --color-border: hsl(214.3 31.8% 91.4%);
  --color-input: hsl(214.3 31.8% 91.4%);
  --color-ring: hsl(222.2 84% 4.9%);
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

Fonts

Do not use next/font. Load fonts with @font-face directly in app/globals.css and wire them to the theme tokens.

Add a @font-face block per family at the top of app/globals.css. Use the variable woff2 from Google's CDN (fonts.gstatic.com) with a weight range so one file covers all weights:

@font-face {
  font-family: 'Geist';
  font-display: swap;
  font-style: normal;
  font-weight: 300 700;
  src: url('https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2') format('woff2');
}

Point the theme tokens at the family names inside @theme inline:

@theme inline {
  --font-sans: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --font-heading: 'Geist', sans-serif;
}

Keep app/layout.tsx free of font imports — <html> only needs className="font-sans" (applied via the base layer) and the fonts resolve from CSS.

To swap a font, grab the latin woff2 URL from the Google Fonts CSS API (e.g. https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap) and replace the font-family name and src URL above.

Vercel AI

You can build agentic applications using API routes with the Vercel ai v6 SDK.

When using this package you must use zod.
The Vercel AI SDK depends on zod v3. Pin zod to version 3.25.76 — do NOT install zod v4 or higher, as it conflicts with the Vercel AI SDK v6 packages.

3.1 KiB Raw Blame History

SANDBOX ENVIRONMENT

STYLE GUIDE

Fonts

Vercel AI

3.1 KiB

Raw Blame History