-
+
+ {/* AI Chat entry point section */}
+
-
+
);
}
diff --git a/app/api/generate-theme/route.ts b/app/api/generate-theme/route.ts
index 0c76736d..9ad0e4af 100644
--- a/app/api/generate-theme/route.ts
+++ b/app/api/generate-theme/route.ts
@@ -1,16 +1,22 @@
-import { createGroq } from "@ai-sdk/groq";
-import { createFallback } from "ai-fallback";
-import { generateObject } from "ai";
-import { z } from "zod";
-import { themeStylePropsSchema } from "@/types/theme";
-import { kv } from "@vercel/kv";
-import { Ratelimit } from "@upstash/ratelimit";
-import { NextRequest } from "next/server";
-import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { auth } from "@/lib/auth";
+import { AI_PROMPT_CHARACTER_LIMIT } from "@/lib/constants";
+import { themeStylePropsSchema } from "@/types/theme";
+import { createGoogleGenerativeAI } from "@ai-sdk/google";
+import { createGroq } from "@ai-sdk/groq";
+import { Ratelimit } from "@upstash/ratelimit";
+import { kv } from "@vercel/kv";
+import { generateObject } from "ai";
+import { createFallback } from "ai-fallback";
+import { NextRequest } from "next/server";
+import { z } from "zod";
const requestSchema = z.object({
- prompt: z.string().min(1),
+ prompt: z
+ .string()
+ .min(1)
+ .max(AI_PROMPT_CHARACTER_LIMIT + 4000, {
+ message: `Failed to generate theme. Input character limit exceeded.`,
+ }),
});
// Create a new schema based on themeStylePropsSchema excluding 'spacing'
@@ -19,9 +25,12 @@ const themeStylePropsWithoutSpacing = themeStylePropsSchema.omit({
});
// Define the main theme schema using the modified props schema
-const themeSchemaWithoutSpacing = z.object({
- light: themeStylePropsWithoutSpacing,
- dark: themeStylePropsWithoutSpacing,
+const responseSchema = z.object({
+ text: z.string().describe("A concise paragraph on the generated theme"),
+ theme: z.object({
+ light: themeStylePropsWithoutSpacing,
+ dark: themeStylePropsWithoutSpacing,
+ }),
});
// Create Rate limit - 5 requests per 60 seconds
@@ -65,10 +74,7 @@ export async function POST(req: NextRequest) {
});
const model = createFallback({
- models: [
- groq("llama-3.3-70b-versatile"),
- google("gemini-2.0-flash-lite"),
- ],
+ models: [groq("llama-3.3-70b-versatile"), google("gemini-2.0-flash-lite")],
onError: (error, modelId) => {
console.error(`Error with model ${modelId}:`, error);
},
@@ -77,12 +83,34 @@ export async function POST(req: NextRequest) {
const { object: theme } = await generateObject({
model,
- schema: themeSchemaWithoutSpacing,
- system: `You are an AI generating Shadcn UI color themes.
-Format: Use Hex values (#000000) ONLY for colors. Use shadow-opacity instead of using rgba for shadow-color.
-Requirement: Ensure light/dark mode cohesion. If asked to change the theme's main color (e.g., "make it green"), adjust related colors (--accent, --secondary, --ring, --border) along with --primary to create a cohesive new palette.
-Ensure sufficient contrast between foreground and background colors.`,
- prompt: `Generate Shadcn theme. Input: ${prompt}`,
+ schema: responseSchema,
+ system: `# Role
+ You are tweakcn, an expert shadcn/ui theme generator.
+
+ # Token Groups
+ - **Brand**: primary, secondary, accent, ring
+ - **Surfaces**: background, card, popover, muted, sidebar
+ - **Typography**: font-sans, font-serif, font-mono
+ - **Contrast pairs**: Some colors have a -foreground counterpart for text, (e.g., primary/primary-foreground, secondary/secondary-foreground)
+
+ # Rules **IMPORTANT**
+ - Output JSON matching schema exactly
+ - Colors: HEX only (#RRGGBB), do NOT output rgba()
+ - Shadows: Shadow Opacity is handled separately (e.g., via \`--shadow-opacity\`);
+ - Generate harmonious light/dark modes
+ - Ensure contrast for base/foreground pairs
+ - Don't change typography unless requested
+
+ # Color Change Logic
+ - "Make it [color]" → modify brand colors only
+ - "Background darker/lighter" → modify surface colors only
+ - Specific tokens requests → change those tokens + their direct foreground pairs
+ - "Change [colors] in light/dark mode" → change those colors only in the requested mode, leave the other mode unchanged. (e.g. "Make primary color in light mode a little darker" → only change primary in light mode, keep dark mode unchanged)
+ - Maintain color harmony across all related tokens
+
+ # Text Description
+ Fill the \`text\` field in a friendly way, for example: "I've generated..." or "Alright, I've whipped up..."`,
+ prompt: `Create shadcn/ui theme for: ${prompt}`,
});
return new Response(JSON.stringify(theme), {
@@ -90,6 +118,15 @@ Ensure sufficient contrast between foreground and background colors.`,
});
} catch (error) {
console.error(error);
+
+ // Handle Zod validation errors specifically
+ if (error instanceof z.ZodError) {
+ const firstError = error.errors[0];
+ return new Response(firstError.message, {
+ status: 400,
+ });
+ }
+
// Consider more specific error handling based on AI SDK errors if needed
return new Response("Error generating theme", { status: 500 });
}
diff --git a/app/editor/theme/[[...themeId]]/page.tsx b/app/editor/theme/[[...themeId]]/page.tsx
index 801a71ea..6b9ea2ef 100644
--- a/app/editor/theme/[[...themeId]]/page.tsx
+++ b/app/editor/theme/[[...themeId]]/page.tsx
@@ -1,12 +1,11 @@
-import { getEditorConfig } from "@/config/editors";
-import { cn } from "@/lib/utils";
-import Editor from "@/components/editor/editor";
-import { Metadata } from "next";
-import { Header } from "@/components/header";
import { getTheme } from "@/actions/themes";
-import { Suspense } from "react";
-import { Loading } from "@/components/loading";
import { AuthDialogWrapper } from "@/components/auth-dialog-wrapper";
+import Editor from "@/components/editor/editor";
+import { Header } from "@/components/header";
+import { Loading } from "@/components/loading";
+import { cn } from "@/lib/utils";
+import { Metadata } from "next";
+import { Suspense } from "react";
export const metadata: Metadata = {
title: "tweakcn — Theme Generator for shadcn/ui",
@@ -14,30 +13,22 @@ export const metadata: Metadata = {
"Easily customize and preview your shadcn/ui theme with tweakcn. Modify colors, fonts, and styles in real-time.",
};
-export default async function Component({
- params,
-}: {
- params: Promise<{ themeId: string[] }>;
-}) {
+export default async function Component({ params }: { params: Promise<{ themeId: string[] }> }) {
const { themeId } = await params;
- const themePromise =
- themeId?.length > 0 ? getTheme(themeId?.[0]) : Promise.resolve(null);
+ const themePromise = themeId?.length > 0 ? getTheme(themeId?.[0]) : Promise.resolve(null);
return (
<>
diff --git a/app/globals.css b/app/globals.css
index 18cf97ef..9cbc8591 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -117,7 +117,7 @@ body {
/* Mention styles */
.mention {
- @apply bg-primary/10 text-primary rounded-md px-1;
+ @apply bg-primary/10 rounded-md px-1 font-mono text-sm font-semibold;
}
@keyframes text {
@@ -133,7 +133,7 @@ body {
animation: text 3s linear infinite;
}
-.scrollbar-thin {
+@utility scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--color-border) transparent;
@@ -141,3 +141,11 @@ body {
width: 8px;
}
}
+
+@utility scrollbar-gutter-stable {
+ scrollbar-gutter: stable;
+}
+
+@utility scrollbar-gutter-both {
+ scrollbar-gutter: stable both-edges;
+}
diff --git a/components/copy-button.tsx b/components/copy-button.tsx
new file mode 100644
index 00000000..1039ffb1
--- /dev/null
+++ b/components/copy-button.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+import { cn } from "@/lib/utils";
+import { Copy, CopyCheck } from "lucide-react";
+import { ComponentProps } from "react";
+import { TooltipWrapper } from "./tooltip-wrapper";
+import { Button } from "./ui/button";
+
+interface CopyButtonProps extends ComponentProps
{
+ textToCopy: string;
+ successMessage?: {
+ title?: string;
+ description?: string;
+ };
+}
+
+export function CopyButton({ textToCopy, successMessage, className, ...props }: CopyButtonProps) {
+ const { copyToClipboard, hasCopied } = useCopyToClipboard();
+
+ return (
+
+
+
+ );
+}
diff --git a/components/editor/action-bar/action-bar.tsx b/components/editor/action-bar/action-bar.tsx
index 46d8f8fe..aa4168fc 100644
--- a/components/editor/action-bar/action-bar.tsx
+++ b/components/editor/action-bar/action-bar.tsx
@@ -1,6 +1,7 @@
"use client";
import { ActionBarButtons } from "@/components/editor/action-bar/components/action-bar-buttons";
+import { HorizontalScrollArea } from "@/components/horizontal-scroll-area";
import { DialogActionsProvider, useDialogActions } from "@/hooks/use-dialog-actions";
export function ActionBar() {
@@ -12,27 +13,20 @@ export function ActionBar() {
}
function ActionBarContent() {
- const {
- isCreatingTheme,
- handleSaveClick,
- handleAiGenerateClick,
- handleShareClick,
- setCssImportOpen,
- setCodePanelOpen,
- } = useDialogActions();
+ const { isCreatingTheme, handleSaveClick, handleShareClick, setCssImportOpen, setCodePanelOpen } =
+ useDialogActions();
return (
-
+
setCssImportOpen(true)}
onCodeClick={() => setCodePanelOpen(true)}
onSaveClick={() => handleSaveClick()}
- onAiGenerateClick={handleAiGenerateClick}
isSaving={isCreatingTheme}
onShareClick={handleShareClick}
/>
-
+
-
+
-
+
+
-
-
+
-
- {isSavedPreset &&
}
-
onShareClick(themeState.preset)} />
-
-
+ {isSavedPreset && (
+
+ )}
+ onShareClick(themeState.preset)} disabled={aiGenerationLoading} />
+
+
-
-
-
-
-
- Undo
-
-
-
-
-
-
-
- Redo
-
-
-
+
+
+
+
+
+
+
+
);
}
diff --git a/components/editor/ai/ai-chat-form.tsx b/components/editor/ai/ai-chat-form.tsx
new file mode 100644
index 00000000..08175c82
--- /dev/null
+++ b/components/editor/ai/ai-chat-form.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { Loading } from "@/components/loading";
+import { TooltipWrapper } from "@/components/tooltip-wrapper";
+import { Button } from "@/components/ui/button";
+import { useAIThemeGeneration } from "@/hooks/use-ai-theme-generation";
+import { AI_PROMPT_CHARACTER_LIMIT } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+import { useAIChatStore } from "@/store/ai-chat-store";
+import { AIPromptData } from "@/types/ai";
+import { ArrowUp, Loader, Plus, StopCircle } from "lucide-react";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+
+const CustomTextarea = dynamic(() => import("@/components/editor/custom-textarea"), {
+ ssr: false,
+ loading: () => ,
+});
+
+export function AIChatForm({
+ handleThemeGeneration,
+}: {
+ handleThemeGeneration: (promptData: AIPromptData | null) => void;
+}) {
+ const [promptData, setPromptData] = useState(null);
+ const { loading: aiGenerateLoading, cancelThemeGeneration } = useAIThemeGeneration();
+
+ const { messages, clearMessages } = useAIChatStore();
+
+ const handleContentChange = (newPromptData: AIPromptData) => {
+ setPromptData(newPromptData);
+ };
+
+ const handleGenerate = async () => {
+ if (!promptData?.content) return;
+
+ handleThemeGeneration(promptData);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {/* TODO: Add image upload */}
+ {aiGenerateLoading ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+ {hasMessages ? (
+
+ ) : (
+
+
+
+ )}
+
+
+
+
+
+
+ {messages.map((message, index) => (
+
+ ))}
+
+ {/* Loading message when AI is generating */}
+ {isAIGenerating && (
+
+
+
+
+
+
+ Generating
+ .
+ .
+ .
+
+
+ )}
+
+
+
+
+ {isAssistant && (
+
+
+
+ )}
+
+
+
+ {getDisplayContent()}
+
+
+ {isAssistant && message.themeStyles && (
+
+ )}
+
+
+ {isUser && onRetry && messageIndex !== undefined && (
+
+
+
+ )}
+
+
+
+ {isAssistant && message.themeStyles && (
+
+
+
+ )}
+
+
+
+
+
setIsExpanded(!isExpanded)}
+ >
+
+ Preview
+
+
+
+
+
+
+
+ {/* Fade out effect when scrolling */}
+
+
+
+
Suggestions
+
+
+
+
+ {Object.entries(PROMPTS).map(([key, { label, prompt }]) => (
+ handleSetPrompt(prompt)}
+ disabled={aiIsGenerating}
+ >
+ {label}
+
+ ))}
+
+
+
-
+
diff --git a/components/editor/ai/no-messages-placeholder.tsx b/components/editor/ai/no-messages-placeholder.tsx
new file mode 100644
index 00000000..59d6cdd1
--- /dev/null
+++ b/components/editor/ai/no-messages-placeholder.tsx
@@ -0,0 +1,210 @@
+import { HorizontalScrollArea } from "@/components/horizontal-scroll-area";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList } from "@/components/ui/tabs";
+import { useAIThemeGeneration } from "@/hooks/use-ai-theme-generation";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import { useThemePresetStore } from "@/store/theme-preset-store";
+import { AIPromptData } from "@/types/ai";
+import { createCurrentThemePrompt } from "@/utils/ai-prompt";
+import { PROMPTS } from "@/utils/prompts";
+import { Blend, PaintRoller, WandSparkles } from "lucide-react";
+import { ComponentProps, Fragment } from "react";
+import TabsTriggerPill from "../theme-preview/tabs-trigger-pill";
+
+interface RemixPrompt {
+ displayContent: string;
+ prompt: string;
+ basePreset: string;
+}
+
+interface Prompt {
+ displayContent: string;
+ prompt: string;
+}
+
+const CREATE_PROMPTS: Prompt[] = [
+ {
+ displayContent: "JavaScript/TypeScript Advent of Code playground",
+ prompt:
+ "Create a retro JavaScript Advent of Code theme. Use a grayish background with JavaScript yellow and TypeScript blue as primary/secondary colors. Change all fonts to monospace. Make borders sharp.",
+ },
+ {
+ displayContent: "Retro Terminal UI, green phosphor glow",
+ prompt:
+ "Create a retro terminal theme with black background (in dark mode), phosphorescent green primary and text, and all fonts monospace.",
+ },
+ {
+ displayContent: "Monochrome Manga-inspired theme",
+ prompt:
+ "Create a Manga-inspired theme. Monochromatic palette (black, off-white, grays), square corners, small contrast solid offset shadows, and high-contrast borders (black on light, off-white on dark). Use a playful font, like Architects daughter.",
+ },
+ {
+ displayContent: "I want a minimal Ghibli Studio vibe",
+ prompt:
+ "Generate a theme inspired by Studio Ghibli — soft pastels, natural greens, organic colors, and hand-drawn charm.",
+ },
+];
+
+const REMIX_PROMPTS: RemixPrompt[] = [
+ {
+ displayContent: "Make @Twitter but in a slick purple",
+ prompt: "Make @Twitter but in a slick purple",
+ basePreset: "twitter",
+ },
+ {
+ displayContent: "What if @Supabase was vibrant blue?",
+ prompt: "Make @Supabase but in vibrant blue",
+ basePreset: "supabase",
+ },
+ {
+ displayContent: "I want @Doom 64 with muted colors",
+ prompt: "I want @Doom 64 with alternate colors",
+ basePreset: "doom-64",
+ },
+];
+
+const VARIANT_PROMPTS: Prompt[] = [
+ {
+ displayContent: "Make my @Current Theme minimalistic",
+ prompt: PROMPTS.minimalStyle.prompt,
+ },
+ {
+ displayContent: "Flatten the colors of my @Current Theme",
+ prompt: PROMPTS.flatDesign.prompt,
+ },
+ {
+ displayContent: "Create a brutalist variant of my @Current Theme",
+ prompt: PROMPTS.brutalist.prompt,
+ },
+];
+
+// This can be moved to the ai-prompt utils
+const createPromptDataFromPreset = (prompt: string, presetName: string): AIPromptData => {
+ const preset = useThemePresetStore.getState().getPreset(presetName);
+
+ if (!preset) {
+ throw new Error(`Preset "${presetName}" not found`);
+ }
+
+ return {
+ content: prompt,
+ mentions: [
+ {
+ id: presetName,
+ label: preset.label ?? presetName,
+ themeData: {
+ light: preset.styles.light || {},
+ dark: preset.styles.dark || {},
+ },
+ },
+ ],
+ };
+};
+
+export function NoMessagesPlaceholder({
+ handleThemeGeneration,
+}: {
+ handleThemeGeneration: (promptData: AIPromptData | null) => void;
+}) {
+ const { data: session } = authClient.useSession();
+ const { loading: isGenerating } = useAIThemeGeneration();
+
+ const userName = session?.user.name?.split(" ")[0];
+ const heading = `What can I help you theme${userName ? `, ${userName}` : ""}?`;
+
+ return (
+
+
+ {heading}
+
+
+
+
+
+
+
+ Create
+
+
+
+ Remix
+
+
+
+ Tweak
+
+
+
+
+
+ {CREATE_PROMPTS.map((prompt, index) => (
+
+
+ handleThemeGeneration({
+ content: prompt.prompt,
+ mentions: [],
+ })
+ }
+ >
+ {prompt.displayContent}
+
+ {index < CREATE_PROMPTS.length - 1 && }
+
+ ))}
+
+
+
+ {REMIX_PROMPTS.map((prompt, index) => (
+
+
+ handleThemeGeneration(
+ createPromptDataFromPreset(prompt.prompt, prompt.basePreset)
+ )
+ }
+ >
+ {prompt.displayContent}
+
+ {index < REMIX_PROMPTS.length - 1 && }
+
+ ))}
+
+
+
+ {VARIANT_PROMPTS.map((prompt, index) => (
+
+
+ handleThemeGeneration(createCurrentThemePrompt({ prompt: prompt.prompt }))
+ }
+ >
+ {prompt.displayContent}
+
+ {index < VARIANT_PROMPTS.length - 1 && }
+
+ ))}
+
+
+
+ );
+}
+
+interface PromptButtonProps extends ComponentProps
{}
+
+function PromptButton({ className, children, ...props }: PromptButtonProps) {
+ return (
+
+ );
+}
diff --git a/components/editor/contrast-checker.tsx b/components/editor/contrast-checker.tsx
index 1cb512b9..c3c8758a 100644
--- a/components/editor/contrast-checker.tsx
+++ b/components/editor/contrast-checker.tsx
@@ -189,13 +189,13 @@ const ContrastChecker = ({ currentStyles }: ContrastCheckerProps) => {
return (