Add Features to a Plugin - NaaP Docs

AI prompts to extend and enhance your existing NaaP plugins with new capabilities.

When to Use This#

Use these prompts when you already have a working plugin and want to:

Add a new page, tab, or view
Add search, filtering, or sorting
Integrate with an external API
Add user preferences or settings
Improve the existing functionality

Prompt: Add a New Feature#

Markdown

1	# Task: Add a New Feature to My NaaP Plugin
2
3	## Context
4
5	I have an existing NaaP plugin with the following structure:
6
7	Plugin name: [YOUR_PLUGIN_NAME]
8	Plugin type: [frontend-only / full-stack]
9
10	Current features:
11	[LIST WHAT YOUR PLUGIN CURRENTLY DOES — for example:
12	- Displays a list of items in a card grid
13	- Has a form to create new items
14	- Supports filtering by category
15	]
16
17	Current file structure:
18	[PASTE YOUR FILE STRUCTURE — you can get this by running: find . -type f -name ".tsx" -o -name ".ts" \| head -30]
19
20	Technology stack:
21	- Frontend: React, TypeScript, Tailwind CSS, @naap/plugin-sdk
22	- Backend (if full-stack): Express, Prisma, PostgreSQL
23
24	SDK hooks being used:
25	- useAuth() for user info
26	- useNotify() for notifications
27	- usePluginApi() for API calls
28	[ADJUST BASED ON WHAT YOUR PLUGIN USES]
29
30	## New Feature to Add
31
32	[DESCRIBE THE FEATURE YOU WANT — for example:
33	- "Add a search bar that filters items by title and description in real-time"
34	- "Add a settings page where users can customize their dashboard layout"
35	- "Add keyboard shortcuts (Cmd+K for search, Cmd+N for new item)"
36	- "Add a sidebar with bookmarks and recent items"
37	- "Add CSV export for all data"
38	]
39
40	## Requirements
41
42	1. Modify only the files that need changing. Show the full updated file content.
43	2. If new files are needed, provide complete code for each one.
44	3. Keep the existing functionality working — don't break anything.
45	4. Match the existing code style and patterns.
46	5. Use the same Tailwind CSS approach as the existing code.
47	6. Add proper TypeScript types for any new data structures.
48	7. Include loading states, error handling, and edge cases.
49
50	## Quality Standards
51
52	- No `any` types
53	- Reusable components where possible
54	- Helpful comments on complex logic
55	- Proper cleanup in useEffect hooks
56	- Accessible UI (keyboard nav, aria labels)
57
58	Tell me exactly which files to modify and which to create.

Prompt: Add Search and Filtering#

A ready-to-use prompt for one of the most common features:

Markdown

1	# Task: Add Search and Filtering to My NaaP Plugin
2
3	## Context
4
5	My NaaP plugin "[PLUGIN_NAME]" displays a list/grid of items.
6	I want to add powerful search and filtering capabilities.
7
8	Current data structure:
9	[DESCRIBE OR PASTE YOUR DATA TYPE — for example:
10	```typescript
11	interface Item {
12	id: string;
13	title: string;
14	description: string;
15	category: string;
16	status: 'active' \| 'archived';
17	createdAt: string;
18	}

]

Feature Requirements#

Search bar
- Full-text search across title and description
- Debounced input (300ms delay before filtering)
- Clear button to reset search
- Show result count ("12 results" or "No results found")
- Keyboard shortcut: Cmd+K or Ctrl+K to focus search
Filter chips
- Filter by category (show all categories as toggleable chips)
- Filter by status (active, archived, all)
- Combine search + filters (AND logic)
- Show active filter count
- "Clear all filters" button
Sort options
- Sort by: newest, oldest, alphabetical, most popular
- Dropdown or segmented control for sort selection
- Remember last selected sort in localStorage
Results display
- Highlight matching text in search results
- Show empty state when no results match
- Animate items in/out when filters change
- Show filter summary: "Showing 12 of 48 items"

Match the existing plugin's Tailwind CSS styling. Generate all modified and new files with complete code.

1
2	## Prompt: Add User Settings / Preferences
3
4	```markdown
5	# Task: Add a Settings/Preferences Panel to My NaaP Plugin
6
7	## Context
8
9	My NaaP plugin "[PLUGIN_NAME]" needs a settings panel where users can
10	customize their experience. The plugin runs inside the NaaP shell.
11
12	## Settings to Include
13
14	[CHOOSE AND CUSTOMIZE FROM THESE OPTIONS:]
15
16	1. Display preferences
17	- View mode: grid vs list vs table
18	- Items per page: 10, 25, 50, 100
19	- Default sort order
20	- Compact vs comfortable spacing
21
22	2. Notification preferences
23	- Enable/disable specific notification types
24	- Notification frequency (instant, daily digest, weekly)
25
26	3. Data preferences
27	- Default category filter
28	- Date format (US, EU, ISO)
29	- Number format (1,000 vs 1.000)
30
31	## Technical Requirements
32
33	1. Store settings in localStorage using a key like "[plugin-name]:settings"
34	2. Create a useSettings() custom hook that:
35	- Returns current settings
36	- Provides an updateSetting(key, value) function
37	- Auto-saves to localStorage on change
38	- Provides defaults for first-time users
39	3. Settings panel design:
40	- Slide-over panel or modal (not a separate page)
41	- Grouped sections with clear labels
42	- Toggle switches for boolean settings
43	- Dropdown selects for choice settings
44	- "Reset to defaults" button
45	- Changes apply immediately (no save button needed)
46	4. Use the shell theme for styling (Tailwind CSS, CSS variables)
47
48	Generate the useSettings hook, Settings panel component, and show how to
49	integrate them into the existing plugin code.

Prompt: Add External API Integration#

Markdown

1	# Task: Integrate an External API into My NaaP Plugin
2
3	## Context
4
5	My NaaP plugin needs to fetch data from an external API and display it.
6	The plugin uses @naap/plugin-sdk's usePluginApi() hook which proxies
7	requests through the shell's API gateway.
8
9	## API to Integrate
10
11	API: [NAME OR URL — for example: "OpenWeatherMap API", "GitHub API", "a REST API at https://api.example.com"]
12
13	Endpoints I need:
14	[LIST THE ENDPOINTS — for example:
15	- GET /weather?city={city} → returns { temp, humidity, description }
16	- GET /forecast?city={city}&days=5 → returns array of daily forecasts
17	]
18
19	Authentication: [None / API key in header / Bearer token]
20
21	## Requirements
22
23	1. Create a custom hook for the API (e.g., useWeatherApi):
24	- Handles loading, error, and data states
25	- Caches responses to avoid redundant requests
26	- Auto-refreshes on a configurable interval (if applicable)
27	- Provides retry functionality on error
28
29	2. Display the data in a beautiful UI:
30	- Cards or dashboard layout
31	- Loading skeletons while fetching
32	- Error state with retry button
33	- Empty state with helpful message
34	- Auto-refresh indicator if applicable
35
36	3. If the API requires a key, add a setup screen:
37	- Prompt user for their API key on first use
38	- Store securely in localStorage
39	- "Change API key" option in settings
40	- Validate the key with a test request
41
42	Use Tailwind CSS, match the shell theme, include TypeScript types.
43	Generate all files with complete code.

Tips for Writing Feature Prompts#

When asking the AI to add features, always include:

What the plugin currently does — so the AI knows the context
The current file structure — paste output of find . -name "*.tsx" -o -name "*.ts"
The existing code style — paste a small section of existing code as reference
What you want added — be as specific as possible
What NOT to break — mention features that must keep working

When to Use This#

Use these prompts when you already have a working plugin and want to:

Add a new page, tab, or view
Add search, filtering, or sorting
Integrate with an external API
Add user preferences or settings
Improve the existing functionality

Prompt: Add a New Feature#

Markdown

1	# Task: Add a New Feature to My NaaP Plugin
2
3	## Context
4
5	I have an existing NaaP plugin with the following structure:
6
7	Plugin name: [YOUR_PLUGIN_NAME]
8	Plugin type: [frontend-only / full-stack]
9
10	Current features:
11	[LIST WHAT YOUR PLUGIN CURRENTLY DOES — for example:
12	- Displays a list of items in a card grid
13	- Has a form to create new items
14	- Supports filtering by category
15	]
16
17	Current file structure:
18	[PASTE YOUR FILE STRUCTURE — you can get this by running: find . -type f -name ".tsx" -o -name ".ts" \| head -30]
19
20	Technology stack:
21	- Frontend: React, TypeScript, Tailwind CSS, @naap/plugin-sdk
22	- Backend (if full-stack): Express, Prisma, PostgreSQL
23
24	SDK hooks being used:
25	- useAuth() for user info
26	- useNotify() for notifications
27	- usePluginApi() for API calls
28	[ADJUST BASED ON WHAT YOUR PLUGIN USES]
29
30	## New Feature to Add
31
32	[DESCRIBE THE FEATURE YOU WANT — for example:
33	- "Add a search bar that filters items by title and description in real-time"
34	- "Add a settings page where users can customize their dashboard layout"
35	- "Add keyboard shortcuts (Cmd+K for search, Cmd+N for new item)"
36	- "Add a sidebar with bookmarks and recent items"
37	- "Add CSV export for all data"
38	]
39
40	## Requirements
41
42	1. Modify only the files that need changing. Show the full updated file content.
43	2. If new files are needed, provide complete code for each one.
44	3. Keep the existing functionality working — don't break anything.
45	4. Match the existing code style and patterns.
46	5. Use the same Tailwind CSS approach as the existing code.
47	6. Add proper TypeScript types for any new data structures.
48	7. Include loading states, error handling, and edge cases.
49
50	## Quality Standards
51
52	- No `any` types
53	- Reusable components where possible
54	- Helpful comments on complex logic
55	- Proper cleanup in useEffect hooks
56	- Accessible UI (keyboard nav, aria labels)
57
58	Tell me exactly which files to modify and which to create.

Prompt: Add Search and Filtering#

A ready-to-use prompt for one of the most common features:

Markdown

1	# Task: Add Search and Filtering to My NaaP Plugin
2
3	## Context
4
5	My NaaP plugin "[PLUGIN_NAME]" displays a list/grid of items.
6	I want to add powerful search and filtering capabilities.
7
8	Current data structure:
9	[DESCRIBE OR PASTE YOUR DATA TYPE — for example:
10	```typescript
11	interface Item {
12	id: string;
13	title: string;
14	description: string;
15	category: string;
16	status: 'active' \| 'archived';
17	createdAt: string;
18	}

]

Feature Requirements#

Search bar
- Full-text search across title and description
- Debounced input (300ms delay before filtering)
- Clear button to reset search
- Show result count ("12 results" or "No results found")
- Keyboard shortcut: Cmd+K or Ctrl+K to focus search
Filter chips
- Filter by category (show all categories as toggleable chips)
- Filter by status (active, archived, all)
- Combine search + filters (AND logic)
- Show active filter count
- "Clear all filters" button
Sort options
- Sort by: newest, oldest, alphabetical, most popular
- Dropdown or segmented control for sort selection
- Remember last selected sort in localStorage
Results display
- Highlight matching text in search results
- Show empty state when no results match
- Animate items in/out when filters change
- Show filter summary: "Showing 12 of 48 items"

Match the existing plugin's Tailwind CSS styling. Generate all modified and new files with complete code.

1
2	## Prompt: Add User Settings / Preferences
3
4	```markdown
5	# Task: Add a Settings/Preferences Panel to My NaaP Plugin
6
7	## Context
8
9	My NaaP plugin "[PLUGIN_NAME]" needs a settings panel where users can
10	customize their experience. The plugin runs inside the NaaP shell.
11
12	## Settings to Include
13
14	[CHOOSE AND CUSTOMIZE FROM THESE OPTIONS:]
15
16	1. Display preferences
17	- View mode: grid vs list vs table
18	- Items per page: 10, 25, 50, 100
19	- Default sort order
20	- Compact vs comfortable spacing
21
22	2. Notification preferences
23	- Enable/disable specific notification types
24	- Notification frequency (instant, daily digest, weekly)
25
26	3. Data preferences
27	- Default category filter
28	- Date format (US, EU, ISO)
29	- Number format (1,000 vs 1.000)
30
31	## Technical Requirements
32
33	1. Store settings in localStorage using a key like "[plugin-name]:settings"
34	2. Create a useSettings() custom hook that:
35	- Returns current settings
36	- Provides an updateSetting(key, value) function
37	- Auto-saves to localStorage on change
38	- Provides defaults for first-time users
39	3. Settings panel design:
40	- Slide-over panel or modal (not a separate page)
41	- Grouped sections with clear labels
42	- Toggle switches for boolean settings
43	- Dropdown selects for choice settings
44	- "Reset to defaults" button
45	- Changes apply immediately (no save button needed)
46	4. Use the shell theme for styling (Tailwind CSS, CSS variables)
47
48	Generate the useSettings hook, Settings panel component, and show how to
49	integrate them into the existing plugin code.

Prompt: Add External API Integration#

Markdown

1	# Task: Integrate an External API into My NaaP Plugin
2
3	## Context
4
5	My NaaP plugin needs to fetch data from an external API and display it.
6	The plugin uses @naap/plugin-sdk's usePluginApi() hook which proxies
7	requests through the shell's API gateway.
8
9	## API to Integrate
10
11	API: [NAME OR URL — for example: "OpenWeatherMap API", "GitHub API", "a REST API at https://api.example.com"]
12
13	Endpoints I need:
14	[LIST THE ENDPOINTS — for example:
15	- GET /weather?city={city} → returns { temp, humidity, description }
16	- GET /forecast?city={city}&days=5 → returns array of daily forecasts
17	]
18
19	Authentication: [None / API key in header / Bearer token]
20
21	## Requirements
22
23	1. Create a custom hook for the API (e.g., useWeatherApi):
24	- Handles loading, error, and data states
25	- Caches responses to avoid redundant requests
26	- Auto-refreshes on a configurable interval (if applicable)
27	- Provides retry functionality on error
28
29	2. Display the data in a beautiful UI:
30	- Cards or dashboard layout
31	- Loading skeletons while fetching
32	- Error state with retry button
33	- Empty state with helpful message
34	- Auto-refresh indicator if applicable
35
36	3. If the API requires a key, add a setup screen:
37	- Prompt user for their API key on first use
38	- Store securely in localStorage
39	- "Change API key" option in settings
40	- Validate the key with a test request
41
42	Use Tailwind CSS, match the shell theme, include TypeScript types.
43	Generate all files with complete code.

Tips for Writing Feature Prompts#

When asking the AI to add features, always include:

What the plugin currently does — so the AI knows the context
The current file structure — paste output of find . -name "*.tsx" -o -name "*.ts"
The existing code style — paste a small section of existing code as reference
What you want added — be as specific as possible
What NOT to break — mention features that must keep working