Full Stack App I — Build and Ship a Chat App

# CT390 chat appI'm a student in CT390, learning to build with an agent. Explain what you do in plain language. When I need to do something myself, tell me exactly what to do and why.## Check my setup firstBefore you build, check these. If one is missing, stop and tell me what's missing and exactly how to fix it. Do not fix it for me.- AI_GATEWAY_API_KEY is set in .env.local. Only say whether it's there. Never print its value. If it's missing, tell me to create a key in Vercel under AI Gateway → API Keys, add the line AI_GATEWAY_API_KEY=my-key to .env.local beside package.json, and restart npm run dev.- I have a system prompt. If `lib/system-prompt.ts` already exists with my prompt in it, use it and don't ask for it again. Otherwise, it should be in my message, not the <paste your system prompt> placeholder. Only ask me to paste it if neither has one.- Storybook is set up: `.storybook/` exists and package.json has a storybook script. If not, tell me to run npm create storybook@latest in a terminal in this folder. Do not install it yourself.## Read first- Read this file and the supplied chat wireframe before changing the UI.- Read the wireframe's prototype interactions, not just its screens. Start with the "Chat demo" (desktop) and "Mobile chat" flows. They show which control leads to which screen. If your Figma tool returns only layers and screenshots, read the prototype interactions separately or ask me.- Inspect the installed versions and project structure. Follow the documentation for those versions instead of assuming an older API.- Build the wireframe as supplied first. Do not change its layout, controls, or states. Visual changes can come after the site works.## Set up the app- Use the Next.js, TypeScript, and Tailwind CSS setup created with recommended defaults.- Set up shadcn/ui in this existing project. Add only the components needed for the supplied wireframe, such as Button, Textarea, and Scroll Area. Follow the current shadcn/ui instructions for this project's installed versions.- Install the Vercel AI SDK packages needed for a streaming chat app, including `ai` and `@ai-sdk/react`. Follow their current documentation.- Tell me which packages and shadcn/ui components you added.## Layout- Match the supplied wireframe before changing colors or type.- Change the app name, welcome heading and input placeholder to fit my topic. Keep the wireframe's layout and states.- Keep the chat page usable at desktop width and 375px. Use semantic controls and visible keyboard focus.- On desktop, show the conversation sidebar with New chat. At phone width, replace the sidebar with the header's ☰ menu, which opens the conversation list, and a ＋ button for New chat.- Build reusable pieces for the sidebar, header, messages, input area, thinking indicator, Stop button, and error message in Storybook first, then put them together on the page.- If I ask for a feature the wireframe doesn't show, design it to fit the wireframe's style and add a story for each new state.## Storybook- `.storybook/main.ts` finds stories anywhere in the project, not only in `stories/`.- `.storybook/preview.tsx` imports `app/globals.css`, so Storybook shows the same styles as the site.- Delete the example stories Storybook creates in `stories/`. They are not part of this app.- Give each component a story for every wireframe state it appears in, such as empty, draft, thinking, streaming, stopped, refusal, long answer, and error.- Stories use fixed sample messages. They never call /api/chat or AI Gateway.- Do not deploy Storybook to Vercel. Publish it somewhere else only when I ask. Keep `storybook-static/` out of Git.## Chat behavior- Use the Vercel AI SDK to show answers as they arrive. Create a server Route Handler at /api/chat.- Send the conversation from the page to that route. Put the model call in the route. Use AI Gateway for the model request.- Save the system prompt I give you in `lib/system-prompt.ts`, exactly as written. Import it only in /api/chat, never in a client component. Do not edit it unless I ask.- Show off-topic answers and refusals as normal assistant messages, not as errors.- Use only the model ID I give you. I chose a low-cost model to avoid charges. Do not switch models, add fallback models, or move to a larger model for better answers.- Never call the gateway directly from a client component. Never put a key or token in a NEXT_PUBLIC_ variable or in source code.- Match every wireframe state: new chat (empty and with a draft), thinking, streaming, stopped, complete, follow-up, refusal, long answer, and the phone menu.- The prototype moves from Thinking to Streaming to Complete on timers. In the app, change state when the response actually starts, streams, and finishes. Follow-up messages go through Thinking and Streaming too, even though the prototype skips straight to the answer.- Disable sending blank or whitespace-only messages. While waiting or streaming, Send becomes Stop. After Stop, keep the partial answer, show that it was stopped, and let me send another message.- Keep the input in place and the conversation readable as the answer grows. Let me scroll up while it streams.- The wireframe does not draw an error or rate-limit state. Design one that fits the wireframe, with useful copy and a retry path where possible. Do not leave a fake error in the finished UI.- New chat clears the current conversation. The conversation list only needs to show the current chat. Do not add a database, login, file upload, or AI tools unless I ask. The chat can reset when the page is refreshed.## Guardrails- Limit each message to 2,000 characters. Show a character count near the input and disable Send over the limit. Also check the length in /api/chat and return a clear error, because the page's check can be skipped.- /api/chat accepts only user and assistant messages from the page. Ignore any system message the page sends. The route always adds the system prompt from `lib/system-prompt.ts` itself.- Keep tool calls and their results in the conversation history. Allow at most 5 tool steps per message.## Secrets and deployment- Read every key and token, including AI_GATEWAY_API_KEY, only on the server. Use .env.local for local work and Vercel project environment variables for deployment.- Keep .env.local out of Git. Never print, paste, log, or commit a real key or token.- Before every commit or push, check what is about to be committed. If any key or token is in a file, stop and tell me instead of committing. This includes a key file with the wrong name that .gitignore doesn't cover, like env.local without the dot, and a key pasted into code.- This is a server-backed app on Vercel. Do not set output: 'export' or deploy it to GitHub Pages.- Before finishing, check .gitignore exists and keeps .env.local out of Git. Run the project's lint command and npm run build. If you changed a component or story, also run `npx storybook build` and fix any errors. Test one complete chat on my computer.## When you report back- Say what changed, what you tested, and which wireframe states you checked. Explain any state you could not test.- Include the GitHub repository URL and the live Vercel URL when they exist.