Create a Full-Stack Plugin

When to Use This#

Use this prompt when you need a plugin with:

• Its own backend API server (Express.js)
• A PostgreSQL database (with Prisma ORM)
• Full CRUD operations (create, read, update, delete)
• Server-side logic, scheduled tasks, or external API integrations

The Prompt#

Copy the entire block below and paste it into your AI assistant:

IMPORTANT — Database Architecture: NaaP uses a single PostgreSQL database (naap) with multi-schema isolation. All models are defined in packages/database/prisma/schema.prisma, NOT in plugin directories. Every model MUST have @@schema("plugin_<name>") and a prefix (e.g., MyPluginTask). See Database Architecture.

Backend db client (backend/src/db/client.ts):

import { prisma } from '@naap/database';
export const db = prisma;

Backend server pattern (backend/src/server.ts):

Requirements#

Create a full-stack NaaP plugin called "[YOUR_PLUGIN_NAME]" that does:

[DESCRIBE WHAT YOUR PLUGIN SHOULD DO HERE — for example:

• "A project management tool with tasks, assignees, and due dates"
• "An inventory tracker for warehouse items with categories and stock levels"
• "A customer feedback board where users can submit and vote on ideas"
• "A time tracking app that logs hours per project" ]

Technical Specifications#

1. Generate plugin.json manifest:

   JSON

   Copy

   1	{
   2	"name": "[plugin-name]",
   3	"displayName": "[Plugin Display Name]",
   4	"version": "1.0.0",
   5	"description": "[description]",
   6	"category": "[pick: analytics|communication|developer-tools|finance|infrastructure|monitoring|other]",
   7	"author": { "name": "[Your Name]" },
   8	"frontend": {
   9	"entry": "production/[plugin-name].js",
   10	"routes": [{ "path": "/[plugin-name]", "component": "App" }],
   11	"navigation": { "label": "[Display Name]", "icon": "[lucide-icon]", "order": 50 }
   12	},
   13	"backend": {
   14	"entry": "dist/server.js",
   15	"devPort": 4XX,
   16	"apiPrefix": "/api/v1/[plugin-name]",
   17	"healthCheck": "/health"
   18	},
   19	"database": {
   20	"type": "postgresql",
   21	"schema": "backend/prisma/schema.prisma"
   22	},
   23	"permissions": ["read:profile", "read:team"]
   24	}

2. Generate full file structure:

   Copy

   1	[plugin-name]/
   2	├── plugin.json
   3	├── frontend/
   4	│ ├── package.json
   5	│ ├── tsconfig.json
   6	│ ├── vite.config.ts # UMD build config (createPluginConfig)
   7	│ ├── src/
   8	│ │ ├── App.tsx
   9	│ │ ├── mount.tsx
   10	│ │ ├── components/
   11	│ │ └── hooks/ (custom hooks if needed)
   12	│ └── index.html
   13	├── backend/
   14	│ ├── package.json (depends on @naap/database, NOT @prisma/client)
   15	│ ├── tsconfig.json
   16	│ ├── .env (DATABASE_URL=...localhost:5432/naap)
   17	│ └── src/
   18	│ ├── server.ts (Express app)
   19	│ ├── routes/ (route handlers)
   20	│ └── db/
   21	│ └── client.ts (re-exports prisma from @naap/database)

   NOTE: NO prisma/ directory in the plugin. Models are added to packages/database/prisma/schema.prisma with @@schema("plugin_<name>"). NOTE: NO postcss.config.js — PostCSS is in the shared Vite config.

3. Database model requirements (models go in packages/database/prisma/schema.prisma):

   • Every model MUST have @@schema("plugin_[name]") annotation
   • Every model MUST be prefixed (e.g., FeedbackItem, not Item)
   • Every enum MUST also have @@schema("plugin_[name]")
   • Define all models with proper relations, indexes, and timestamps
   • Use meaningful field names and types
   • Add createdAt and updatedAt to every model

4. Backend API requirements:

   • RESTful routes under /api/v1/[plugin-name]/
   • Proper error handling with try/catch and status codes
   • Input validation on POST/PUT routes
   • GET routes support pagination (page, limit query params)
   • Health check endpoint at /health

5. Frontend requirements:

   • Use Tailwind CSS for professional styling
   • Use usePluginApi() for all API calls in React components
   • For non-React API URLs, use getPluginBackendUrl() — NEVER hardcode localhost:port
   • Use useAuth() for user context
   • Use useNotify() for success/error feedback
   • Include loading skeletons, error states, and empty states
   • Responsive design (mobile + desktop)
   • Include a form for creating/editing records
   • Include a list/table view with sorting and filtering

Quality Standards#

• Full TypeScript — no any types
• Prisma singleton pattern for database client
• Modular components and route handlers
• Helpful code comments explaining logic
• Proper error handling everywhere
• Handle edge cases (empty data, network errors, validation errors)

Generate ALL files with complete, working code. No placeholders.

Key: Models live in packages/database/, not in the plugin. See Database Architecture.

Example: Feedback Board#

Here's a filled-in requirements section:

Follow-Up Prompts#