Prompting Is All You Need V0 Template: Fork It & Ship Your AI Demo

In the PromptMetadataBar model selector, replace the current default model value with 'gpt-4o' and update the API call in the server action to use that model ID. Make sure the Select component in PromptMetadataBar shows 'GPT-4o' as the selected option on first render. Keep the 'gpt-4o-mini' option available for users who want lower cost.

Add a theme toggle button to the top navbar that switches between dark and light mode using the shadcn/ui ThemeProvider already available in the project. Persist the chosen theme in localStorage under the key 'pian-theme' so it survives page refreshes. Make the toggle icon switch between a sun and a moon icon using shadcn/ui icons.

In the PromptInputPanel, add a 'Load Example' dropdown that is populated from the same data source as PromptExampleCarousel. Each dropdown option should be labeled with the technique name (chain-of-thought, few-shot, role, zero-shot). On selection, populate the PromptInputPanel textarea with the full example prompt text including any system message and user turn. Update the active TechniqueTag to match the loaded example's category.

After each successful AI response in the ResponseOutputArea, push an object { prompt, response, model, timestamp } to a localStorage array named 'pian-prompt-history'. Create a HistoryDrawer component — a shadcn/ui Sheet that opens from the left side — that lists all past runs in reverse chronological order. Each history item should have a 'Reload' button that populates the PromptInputPanel with that prompt so the user can re-run or edit it. All localStorage access must be inside useEffect to avoid SSR errors.

Replace the current response fetch in ResponseOutputArea with the useChat hook from @ai-sdk/react so that tokens stream progressively. After the last token, hide the cursor — show it as a pulsing block character (▊) only when isLoading is true. Add maxTokens: 300 to the useChat options to keep preview responses short and avoid sandbox timeouts. Wire the submit trigger to the handleSubmit function from useChat instead of the current fetch call.

Add Supabase integration: create a table named 'prompt_logs' with columns id (uuid, primary key), user_id (text), prompt (text), response (text), model (text), temperature (float), created_at (timestamptz). After each AI response, insert a row via a server action that reads SUPABASE_SERVICE_ROLE_KEY from env vars. Add Clerk auth: ClerkProvider in root layout, clerkMiddleware in middleware.ts. In the server action, read userId from auth() and include it in the insert. Add an RLS policy on prompt_logs: 'users can only SELECT rows where user_id = auth.uid()'. Add SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY to the Vars panel.