Of course. Here is the complete design document condensed into a single, detailed prompt suitable for a large language model to generate a one-shot web application.

This prompt distills the core functionality, user experience, and technical stack into a precise set of instructions, focusing on an achievable MVP while retaining the spirit of the original design.

---

### **LLM Prompt: Generate a Full-Stack "Prompt Stash" Web Application**

**Your Role:** You are an expert full-stack developer specializing in creating modern, single-file web applications using the Next.js framework. Your task is to generate the complete code for a simple "Prompt Stash" application based on the detailed specifications below.

**Project Overview:**
The application, "Prompt Stash," is a personal tool for users to paste raw AI prompts, have them automatically analyzed and formatted by an AI, and save them into a searchable personal library. The user experience should be seamless: paste, process, and save.

**Core User Flow:**
1.  **Homepage:** The user lands on a page with a large text area.
2.  **Input:** The user pastes a raw text or markdown prompt into the text area.
3.  **Process:** The user clicks a "Stash" button.
4.  **AI Analysis (Backend):** The backend sends the text to the Google Gemini API for analysis. The AI will generate a title, relevant tags, a category, and a cleaned-up markdown version of the prompt.
5.  **Save & Notify:** The processed prompt and its AI-generated metadata are saved to a PostgreSQL database. The user sees a non-intrusive "Success!" notification.
6.  **Library View:** The user can navigate to a "Library" page to see all their stashed prompts displayed as cards in a grid. They can search, filter by tag, and click on a card to view the full prompt.

---

### **Technical & Functional Specifications:**

**1. Technology Stack:**
*   **Framework:** Next.js 14 with the App Router.
*   **Language:** TypeScript.
*   **Database:** PostgreSQL.
*   **ORM:** Prisma.
*   **Frontend UI:** Material-UI (MUI) v5 for components, combined with Tailwind CSS for utility-first styling.
*   **AI Integration:** Google Gemini API (assume the latest `gemini-pro` model).
*   **Styling:** Adhere to Material Design 3 principles.

**2. Database Schema (Prisma):**
Create a `schema.prisma` file with a single model for `Prompt`. Omit user authentication for this simple version.

```prisma
// schema.prisma
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Prompt {
  id                String    @id @default(cuid())
  createdAt         DateTime  @default(now())
  updatedAt         DateTime  @updatedAt

  title             String    // AI-generated title
  content           String    @db.Text // The original, raw user input
  processedMarkdown String    @db.Text // AI-cleaned and formatted markdown
  category          String    // AI-generated category (e.g., 'Creative', 'Technical')
  tags              String[]  // AI-generated tags
  
  // Store the full AI analysis for future use
  aiAnalysis        Json?
}
```

**3. Page & Component Structure:**
*   **`app/layout.tsx`**: The root layout. Include a simple Header with the app title "Prompt Stash" and navigation links for "Home" (`/`) and "Library" (`/library`).
*   **`app/page.tsx` (Home):**
    *   A central `PromptInput` component containing a large MUI `TextField` (multiline).
    *   A character counter below the text field.
    *   A Material-UI "Filled" button with the text "Stash Prompt".
    *   Use `react-hot-toast` or a similar library for success notifications.
*   **`app/library/page.tsx` (Library):**
    *   A search bar and a filter section for tags (use MUI Chips).
    *   A responsive grid (`<Grid container spacing={2}>`) displaying `PromptCard` components.
    *   Handle the case where there are no prompts to display.
*   **`components/PromptCard.tsx`:**
    *   An MUI `Card` with an "elevated" variant.
    *   Displays the prompt's `title`, `category`, and `tags` (as MUI Chips).
    *   Shows a truncated preview of the prompt content.
    *   The entire card should be a `<Link>` that navigates to `/prompt/[id]`.
*   **`app/prompt/[id]/page.tsx` (Individual Prompt View):**
    *   Displays the `title`, `category`, and `tags`.
    *   Renders the `processedMarkdown` using the `react-markdown` library. Apply basic typographic styling.
    *   Include two "Copy" buttons: "Copy Raw" (copies `content`) and "Copy Markdown" (copies `processedMarkdown`).

**4. API Endpoint & AI Logic:**
Create a single API route: **`app/api/prompts/route.ts`**.
*   **`POST` function:**
    1.  Receives the raw `content` from the frontend.
    2.  Constructs a prompt for the Google Gemini API. **Use this exact logic:**
        ```typescript
        const geminiPrompt = `
          Analyze the following prompt content and respond ONLY with a valid JSON object. Do not include any other text or markdown formatting in your response.

          The JSON object must have this exact structure:
          {
            "title": "A concise, descriptive title for the prompt (max 60 characters).",
            "category": "Choose the best single category from this list: 'Creative', 'Technical', 'Business', 'Productivity', 'Educational', 'Other'.",
            "tags": ["an", "array", "of", "3-5", "relevant", "lowercase", "tags"],
            "processedMarkdown": "The original content, cleaned up and formatted as clean, readable Markdown. If it's already markdown, improve it. If it's plain text, structure it with headings, lists, and code blocks where appropriate."
          }

          Prompt Content:
          ---
          ${content}
          ---
        `;
        ```
    3.  Calls the Gemini API with this prompt.
    4.  Parses the JSON response from Gemini.
    5.  Uses Prisma to `create` a new `Prompt` record in the database, saving the original `content` along with all the fields from the AI's response (`title`, `category`, `tags`, `processedMarkdown`). Store the full AI response object in the `aiAnalysis` JSON field.
    6.  Returns the newly created prompt object with a `201` status.
*   **`GET` function:**
    1.  Fetches all prompts from the database using Prisma.
    2.  Implements search functionality: if a `search` query param is present, filter prompts where the `title`, `content`, or `tags` match the query.
    3.  Returns the list of prompts.

**5. Styling Details (Material Design 3):**
*   **Primary Color:** Deep Purple (`#6750A4`). Configure this in an MUI theme provider.
*   **Typography:** Use the `Roboto` font family.
*   **Shape:** Use a default `borderRadius` of `12px` for components like Cards and Buttons.

**Final Deliverables:**
Please provide the complete, self-contained code for this Next.js application. Structure your response clearly with filenames. Include:
1.  `app/layout.tsx`
2.  `app/page.tsx`
3.  `app/library/page.tsx`
4.  `app/prompt/[id]/page.tsx`
5.  `components/PromptCard.tsx`
6.  `app/api/prompts/route.ts`
7.  `prisma/schema.prisma`
8.  A `theme.ts` file for MUI configuration.
9.  A `package.json` with all required dependencies (`next`, `react`, `react-dom`, `typescript`, `@mui/material`, `@emotion/react`, `@emotion/styled`, `tailwindcss`, `autoprefixer`, `postcss`, `prisma`, `@prisma/client`, `@google/generative-ai`, `react-markdown`, `react-hot-toast`).
10. A `README.md` file explaining how to set up the project: install dependencies, set up the `.env` file (`DATABASE_URL`, `GEMINI_API_KEY`), and run the Prisma migrations.