Design-Buddy/docs/business/starter-prompt.md

I'm working with an agentic coding boilerplate project that includes authentication, database integration, and AI capabilities. Here's what's already set up:

Current Agentic Coding Boilerplate Structure

• Authentication: Better Auth with Google OAuth integration
• Database: Drizzle ORM with PostgreSQL setup
• AI Integration: Vercel AI SDK with OpenAI integration
• UI: shadcn/ui components with Tailwind CSS
• Current Routes:
  • / - Home page with setup instructions and feature overview
  • /dashboard - Protected dashboard page (requires authentication)
  • /chat - AI chat interface (requires OpenAI API key)

Important Context

This is an agentic coding boilerplate/starter template - all existing pages and components are meant to be examples and should be completely replaced to build the actual AI-powered application.

CRITICAL: You MUST Override All Boilerplate Content

DO NOT keep any boilerplate components, text, or UI elements unless explicitly requested. This includes:

• Remove all placeholder/demo content (setup checklists, welcome messages, boilerplate text)
• Replace the entire navigation structure - don't keep the existing site header or nav items
• Override all page content completely - don't append to existing pages, replace them entirely
• Remove or replace all example components (setup-checklist, starter-prompt-modal, etc.)
• Replace placeholder routes and pages with the actual application functionality

Required Actions:

1. Start Fresh: Treat existing components as temporary scaffolding to be removed
2. Complete Replacement: Build the new application from scratch using the existing tech stack
3. No Hybrid Approach: Don't try to integrate new features alongside existing boilerplate content
4. Clean Slate: The final application should have NO trace of the original boilerplate UI or content

The only things to preserve are:

• All installed libraries and dependencies (DO NOT uninstall or remove any packages from package.json)
• Authentication system (but customize the UI/flow as needed)
• Database setup and schema (but modify schema as needed for your use case)
• Core configuration files (next.config.ts, tsconfig.json, tailwind.config.ts, etc.)
• Build and development scripts (keep all npm/pnpm scripts in package.json)

Tech Stack

• Next.js 15 with App Router
• TypeScript
• Tailwind CSS
• Better Auth for authentication
• Drizzle ORM + PostgreSQL
• Vercel AI SDK
• shadcn/ui components
• Lucide React icons

AI Model Configuration

IMPORTANT: When implementing any AI functionality, always use the OPENAI_MODEL environment variable for the model name instead of hardcoding it:

// ✓ Correct - Use environment variable
const model = process.env.OPENAI_MODEL || "gpt-5-mini";
model: openai(model)

// ✗ Incorrect - Don't hardcode model names
model: openai("gpt-5-mini")

This allows for easy model switching without code changes and ensures consistency across the application.

Component Development Guidelines

Always prioritize shadcn/ui components when building the application:

1. First Choice: Use existing shadcn/ui components from the project
2. Second Choice: Install additional shadcn/ui components using pnpm dlx shadcn@latest add <component-name>
3. Last Resort: Only create custom components or use other libraries if shadcn/ui doesn't provide a suitable option

The project already includes several shadcn/ui components (button, dialog, avatar, etc.) and follows their design system. Always check the shadcn/ui documentation for available components before implementing alternatives.

What I Want to Build

This app is called "Design Buddy". I would like to build an app that allows users to upload images of a room in their house, and the app will allow them to make changes to the design. It's kind of like an AI-based interior decorator. So what the flow is: there will be a landing page detailing the features of the application. The user will then have the option to sign in using Google. After signing in, the user will be able to upload or drag and drop an image of a room into the application. Below that, there will be a dropdown where they can select the room theme, like living room, kitchen, bedroom, bathrooms, etc. Below that, they should be able to select the room theme. These could include modern, summer, professional, tropical, coastal, vintage, industrial, neoclassic, and tribal. The user will then be able to click 'Render', and it will use the Google SDK to edit the original image and present it back to the user. The user should then be able to download the image or start with a new design. The application will use a credit system. When new users sign in, they will be allocated 30 free credits. If a user has used up all of the credits, they will need to purchase credits to generate more designs. At this stage, the designs do not need to be persisted in the database or on a file system. The user needs to download the image, otherwise it will be lost. Do not focus on the payment integration at this stage, simply assign free credits to the user after sign up, and that is it.

Request

Please help me transform this boilerplate into my actual application. You MUST completely replace all existing boilerplate code to match my project requirements. The current implementation is just temporary scaffolding that should be entirely removed and replaced.

Final Reminder: COMPLETE REPLACEMENT REQUIRED

⚠️ IMPORTANT: Do not preserve any of the existing boilerplate UI, components, or content. The user expects a completely fresh application that implements their requirements from scratch. Any remnants of the original boilerplate (like setup checklists, welcome screens, demo content, or placeholder navigation) indicate incomplete implementation.

Success Criteria: The final application should look and function as if it was built from scratch for the specific use case, with no evidence of the original boilerplate template.

Post-Implementation Documentation

After completing the implementation, you MUST document any new features or significant changes in the /docs/features/ directory:

1. Create Feature Documentation: For each major feature implemented, create a markdown file in /docs/features/ that explains:

   • What the feature does
   • How it works
   • Key components and files involved
   • Usage examples
   • Any configuration or setup required

2. Update Existing Documentation: If you modify existing functionality, update the relevant documentation files to reflect the changes.

3. Document Design Decisions: Include any important architectural or design decisions made during implementation.

This documentation helps maintain the project and assists future developers working with the codebase.

Think hard about the solution and implementing the user's requirements.