How to Use AI Prompt Templates

A beginner-friendly guide to building NaaP plugins using AI assistants — no coding experience required.

What Are These Prompt Templates?#

These prompt templates are pre-written instructions you copy and paste into an AI coding assistant. The AI will generate a complete, working NaaP plugin for you — including frontend UI, backend API, database schema, and configuration.

You don't need to know how to code. You just need to:

Pick a prompt that matches what you want to build
Copy it (use the Copy button on each code block)
Paste it into your AI assistant
Follow the AI's instructions to run the generated code

Which AI Tools Work?#

These prompts are designed to work with any AI coding assistant:

Tool	Best For	How to Use
Cursor	Full IDE with AI built-in	Paste prompt in Composer (Cmd+I)
GitHub Copilot	VS Code integration	Paste in Copilot Chat panel
ChatGPT (GPT-4o)	General purpose	Paste in chat, copy code to files
Claude	Detailed code generation	Paste in chat, copy code to files
Windsurf	AI-native IDE	Paste in Cascade
Bolt.new	Browser-based dev	Paste as project prompt

Recommended Workflow#

Option A: Using Cursor (Easiest)#

Cursor is an AI-powered code editor. It can create files, run commands, and test code for you.

Terminal

# 1. Install Cursor from https://cursor.com

# 2. Open your NaaP project folder in Cursor

# 3. Press Cmd+I (Mac) or Ctrl+I (Windows) to open Composer

# 4. Paste the prompt template

# 5. Cursor will generate all the files and guide you

Option B: Using ChatGPT / Claude#

If you prefer a browser-based AI, you can copy the generated code manually.

Terminal

# 1. Open ChatGPT or Claude in your browser

# 2. Paste the prompt template

# 3. The AI will generate code files — copy each one

# 4. Create the files in your project folder

# 5. Follow the AI's setup instructions

Option C: Using GitHub Copilot in VS Code#

Terminal

# 1. Open VS Code with the GitHub Copilot extension

# 2. Open the Copilot Chat sidebar (Ctrl+Shift+I)

# 3. Paste the prompt template

# 4. Copilot will suggest file edits — accept them

Before You Start#

Make sure you have the NaaP development environment ready:

Terminal

# Install Node.js 20+ from https://nodejs.org

$node --version

# Install the NaaP CLI

$npm install -g @naap/plugin-sdk

# Verify it works

$naap-plugin --version

If you haven't set up the NaaP platform yet, see the Quick Start guide first.

How the Prompts Are Structured#

Every prompt template follows the same pattern:

Context block — Tells the AI about NaaP's architecture, so it generates compatible code
Requirements — Describes exactly what you want the plugin to do
Technical specs — Specifies the frameworks, file structure, and patterns to use
Quality standards — Ensures the AI generates production-quality code

You can customize any prompt by editing the Requirements section before pasting it.

Tips for Best Results#

Be specific about what you want. If you have a specific feature idea, add it to the requirements section.
Iterate — if the first result isn't perfect, tell the AI "change the UI to use a dark theme" or "add a search feature."
Ask for explanations — if you don't understand something, ask the AI to explain what a piece of code does.
Test often — run naap-plugin dev after each change to see your plugin in the shell.
Start simple — use the Frontend-Only plugin template first. Add a backend later if needed.

Available Templates#

Template	Difficulty	Description
Create a Frontend Plugin	Beginner	UI-only plugin, no backend needed
Create a Full-Stack Plugin	Intermediate	Frontend + backend + database
Design Professional UI	Beginner	Beautiful, polished interfaces
Build a Backend API	Intermediate	REST API with database
Add Features to a Plugin	Beginner	Extend existing plugins
Debug and Fix Issues	Beginner	Troubleshoot problems
Write Tests	Intermediate	Automated testing
Publish Your Plugin	Beginner	Package and publish to marketplace

Start with Create a Frontend Plugin if this is your first time.

What Are These Prompt Templates?#

You don't need to know how to code. You just need to:

Pick a prompt that matches what you want to build
Copy it (use the Copy button on each code block)
Paste it into your AI assistant
Follow the AI's instructions to run the generated code

Which AI Tools Work?#

These prompts are designed to work with any AI coding assistant:

Tool	Best For	How to Use
Cursor	Full IDE with AI built-in	Paste prompt in Composer (Cmd+I)
GitHub Copilot	VS Code integration	Paste in Copilot Chat panel
ChatGPT (GPT-4o)	General purpose	Paste in chat, copy code to files
Claude	Detailed code generation	Paste in chat, copy code to files
Windsurf	AI-native IDE	Paste in Cascade
Bolt.new	Browser-based dev	Paste as project prompt

Recommended Workflow#

Option A: Using Cursor (Easiest)#

Cursor is an AI-powered code editor. It can create files, run commands, and test code for you.

Terminal

# 1. Install Cursor from https://cursor.com

# 2. Open your NaaP project folder in Cursor

# 3. Press Cmd+I (Mac) or Ctrl+I (Windows) to open Composer

# 4. Paste the prompt template

# 5. Cursor will generate all the files and guide you

Option B: Using ChatGPT / Claude#

If you prefer a browser-based AI, you can copy the generated code manually.

Terminal

# 1. Open ChatGPT or Claude in your browser

# 2. Paste the prompt template

# 3. The AI will generate code files — copy each one

# 4. Create the files in your project folder

# 5. Follow the AI's setup instructions

Option C: Using GitHub Copilot in VS Code#

Terminal

# 1. Open VS Code with the GitHub Copilot extension

# 2. Open the Copilot Chat sidebar (Ctrl+Shift+I)

# 3. Paste the prompt template

# 4. Copilot will suggest file edits — accept them

Before You Start#

Make sure you have the NaaP development environment ready:

Terminal

# Install Node.js 20+ from https://nodejs.org

$node --version

# Install the NaaP CLI

$npm install -g @naap/plugin-sdk

# Verify it works

$naap-plugin --version

If you haven't set up the NaaP platform yet, see the Quick Start guide first.

How the Prompts Are Structured#

Every prompt template follows the same pattern:

Context block — Tells the AI about NaaP's architecture, so it generates compatible code
Requirements — Describes exactly what you want the plugin to do
Technical specs — Specifies the frameworks, file structure, and patterns to use
Quality standards — Ensures the AI generates production-quality code

You can customize any prompt by editing the Requirements section before pasting it.

Tips for Best Results#

Be specific about what you want. If you have a specific feature idea, add it to the requirements section.
Iterate — if the first result isn't perfect, tell the AI "change the UI to use a dark theme" or "add a search feature."
Ask for explanations — if you don't understand something, ask the AI to explain what a piece of code does.
Test often — run naap-plugin dev after each change to see your plugin in the shell.
Start simple — use the Frontend-Only plugin template first. Add a backend later if needed.

Available Templates#

Template	Difficulty	Description
Create a Frontend Plugin	Beginner	UI-only plugin, no backend needed
Create a Full-Stack Plugin	Intermediate	Frontend + backend + database
Design Professional UI	Beginner	Beautiful, polished interfaces
Build a Backend API	Intermediate	REST API with database
Add Features to a Plugin	Beginner	Extend existing plugins
Debug and Fix Issues	Beginner	Troubleshoot problems
Write Tests	Intermediate	Automated testing
Publish Your Plugin	Beginner	Package and publish to marketplace

Start with Create a Frontend Plugin if this is your first time.