create-agentic-app 1.1.56 → 1.1.57

package/template/src/components/starter-prompt-modal.tsx

@@ -1,202 +1,202 @@
-"use client";
-
-import { useState } from "react";
-import { Copy, Check } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-
-const STARTER_PROMPT = `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 16 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:
-
-\`\`\`typescript
-// ✓ 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](https://ui.shadcn.com/docs/components) for available components before implementing alternatives.
-
-## What I Want to Build
-[PROJECT_DESCRIPTION]
-
-## 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.`;
-
-export function StarterPromptModal() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [projectDescription, setProjectDescription] = useState("");
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = async () => {
-    const finalPrompt = projectDescription.trim()
-      ? STARTER_PROMPT.replace(
-          "[PROJECT_DESCRIPTION]",
-          projectDescription.trim()
-        )
-      : STARTER_PROMPT.replace("\n[PROJECT_DESCRIPTION]\n", "");
-
-    try {
-      await navigator.clipboard.writeText(finalPrompt);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy text: ", err);
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" className="w-full">
-          <Copy className="w-4 h-4 mr-2" />
-          Get AI Starter Prompt
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>Generate AI Starter Prompt</DialogTitle>
-          <DialogDescription>
-            Create a comprehensive prompt to help AI agents create your project
-            for you.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4">
-          <div>
-            <label
-              htmlFor="project-description"
-              className="text-sm font-medium mb-2 block"
-            >
-              Describe your project (optional)
-            </label>
-            <textarea
-              id="project-description"
-              placeholder="e.g., A task management app for teams with real-time collaboration, project timelines, and AI-powered task prioritization..."
-              value={projectDescription}
-              onChange={(e) => setProjectDescription(e.target.value)}
-              className="w-full h-24 px-3 py-2 border rounded-md resize-none text-sm"
-            />
-            <p className="text-xs text-muted-foreground mt-1">
-              Optional: Add details about your project to get a more tailored
-              prompt
-            </p>
-          </div>
-
-          <div className="flex gap-2">
-            <Button onClick={handleCopy} className="flex-1">
-              {copied ? (
-                <>
-                  <Check className="w-4 h-4 mr-2" />
-                  Copied!
-                </>
-              ) : (
-                <>
-                  <Copy className="w-4 h-4 mr-2" />
-                  Copy Starter Prompt
-                </>
-              )}
-            </Button>
-            <Button variant="outline" onClick={() => setIsOpen(false)}>
-              Cancel
-            </Button>
-          </div>
-
-          <div className="text-xs text-muted-foreground border-t pt-3">
-            <strong>How to use:</strong> Copy this prompt and paste it into
-            Claude Code, Cursor, or any AI coding assistant to get started with
-            your project.
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+
+const STARTER_PROMPT = `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 16 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:
+
+\`\`\`typescript
+// ✓ 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](https://ui.shadcn.com/docs/components) for available components before implementing alternatives.
+
+## What I Want to Build
+[PROJECT_DESCRIPTION]
+
+## 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.`;
+
+export function StarterPromptModal() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [projectDescription, setProjectDescription] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    const finalPrompt = projectDescription.trim()
+      ? STARTER_PROMPT.replace(
+          "[PROJECT_DESCRIPTION]",
+          projectDescription.trim()
+        )
+      : STARTER_PROMPT.replace("\n[PROJECT_DESCRIPTION]\n", "");
+
+    try {
+      await navigator.clipboard.writeText(finalPrompt);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" className="w-full">
+          <Copy className="w-4 h-4 mr-2" />
+          Get AI Starter Prompt
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Generate AI Starter Prompt</DialogTitle>
+          <DialogDescription>
+            Create a comprehensive prompt to help AI agents create your project
+            for you.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <label
+              htmlFor="project-description"
+              className="text-sm font-medium mb-2 block"
+            >
+              Describe your project (optional)
+            </label>
+            <textarea
+              id="project-description"
+              placeholder="e.g., A task management app for teams with real-time collaboration, project timelines, and AI-powered task prioritization..."
+              value={projectDescription}
+              onChange={(e) => setProjectDescription(e.target.value)}
+              className="w-full h-24 px-3 py-2 border rounded-md resize-none text-sm"
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Optional: Add details about your project to get a more tailored
+              prompt
+            </p>
+          </div>
+
+          <div className="flex gap-2">
+            <Button onClick={handleCopy} className="flex-1">
+              {copied ? (
+                <>
+                  <Check className="w-4 h-4 mr-2" />
+                  Copied!
+                </>
+              ) : (
+                <>
+                  <Copy className="w-4 h-4 mr-2" />
+                  Copy Starter Prompt
+                </>
+              )}
+            </Button>
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+          </div>
+
+          <div className="text-xs text-muted-foreground border-t pt-3">
+            <strong>How to use:</strong> Copy this prompt and paste it into
+            Claude Code, Cursor, or any AI coding assistant to get started with
+            your project.
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}