diff --git a/src/components/site-ai-theme-box.tsx b/src/components/site-ai-theme-box.tsx
new file mode 100644
index 000000000..f9918142f
--- /dev/null
+++ b/src/components/site-ai-theme-box.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { track } from "@/lib/track";
+import type { ThemeColors, ThemeFonts } from "@/lib/theme-css-tokens";
+
+const MAX_HISTORY = 8;
+
+type HistoryEntry = {
+ prompt: string;
+ at: number;
+ notes: string | null;
+};
+
+function historyKey(siteId: string) {
+ return `tg.ai-theme.history.${siteId}`;
+}
+
+function loadHistory(siteId: string): HistoryEntry[] {
+ if (typeof window === "undefined") return [];
+ try {
+ const raw = window.localStorage.getItem(historyKey(siteId));
+ if (!raw) return [];
+ const parsed = JSON.parse(raw) as unknown;
+ if (!Array.isArray(parsed)) return [];
+ return parsed
+ .filter(
+ (entry): entry is HistoryEntry =>
+ !!entry &&
+ typeof entry === "object" &&
+ typeof (entry as { prompt?: unknown }).prompt === "string" &&
+ typeof (entry as { at?: unknown }).at === "number"
+ )
+ .slice(0, MAX_HISTORY);
+ } catch {
+ return [];
+ }
+}
+
+function saveHistory(siteId: string, entries: HistoryEntry[]): void {
+ if (typeof window === "undefined") return;
+ try {
+ window.localStorage.setItem(
+ historyKey(siteId),
+ JSON.stringify(entries.slice(0, MAX_HISTORY))
+ );
+ } catch {
+ /* ignore quota / disabled storage */
+ }
+}
+
+type ApplyState =
+ | { kind: "idle" }
+ | { kind: "running" }
+ | { kind: "applied"; at: number; notes: string | null }
+ | { kind: "error"; message: string };
+
+/**
+ * Prompt-driven AI theme editor. Calls `POST /api/sites/[id]/theme/ai`
+ * with `apply: true`, which writes the generated tokens to the site and
+ * queues a rebuild server-side. Prompt history is per-browser (localStorage)
+ * to avoid a schema change for v1.
+ */
+export function SiteAiThemeBox({
+ siteId,
+ canCustomize,
+ onApplied,
+}: {
+ siteId: string;
+ canCustomize: boolean;
+ /** Invoked after the server confirms the theme was written — caller refetches tokens. */
+ onApplied?: (result: { colors: ThemeColors; fonts: ThemeFonts; notes: string | null }) => void;
+}) {
+ const [prompt, setPrompt] = useState("");
+ const [state, setState] = useState
({ kind: "idle" });
+ const [history, setHistory] = useState([]);
+
+ useEffect(() => {
+ setHistory(loadHistory(siteId));
+ }, [siteId]);
+
+ const pushHistory = useCallback(
+ (entry: HistoryEntry) => {
+ setHistory((prev) => {
+ const next = [entry, ...prev.filter((p) => p.prompt !== entry.prompt)].slice(
+ 0,
+ MAX_HISTORY
+ );
+ saveHistory(siteId, next);
+ return next;
+ });
+ },
+ [siteId]
+ );
+
+ const runPrompt = async () => {
+ if (!prompt.trim() || state.kind === "running") return;
+ setState({ kind: "running" });
+ try {
+ const res = await fetch(`/api/sites/${siteId}/theme/ai`, {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ prompt: prompt.trim(), apply: true }),
+ });
+ if (!res.ok) {
+ const data = (await res.json().catch(() => ({}))) as { error?: string };
+ throw new Error(data.error || `AI request failed (${res.status})`);
+ }
+ const data = (await res.json()) as {
+ colors: ThemeColors;
+ fonts: ThemeFonts;
+ customCss: string | null;
+ notes: string | null;
+ applied: boolean;
+ };
+ pushHistory({ prompt: prompt.trim(), at: Date.now(), notes: data.notes });
+ setState({ kind: "applied", at: Date.now(), notes: data.notes });
+ track("ai-theme-applied", { siteId });
+ onApplied?.({ colors: data.colors, fonts: data.fonts, notes: data.notes });
+ } catch (err) {
+ setState({
+ kind: "error",
+ message: err instanceof Error ? err.message : "AI request failed",
+ });
+ }
+ };
+
+ if (!canCustomize) {
+ return (
+
+ The AI theme editor is available on Pro and Studio plans.
+
+ );
+ }
+
+ return (
+
+
+
+ AI theme editor
+
+
+ edits write tokens + rebuild
+
+
+
+
+ Describe the look. The model returns a cohesive theme — colors and fonts —
+ and applies it to your site immediately. You can keep tweaking the values
+ below in theme.css after.
+
+
+