Preparing Your Wappler Project for AI: The Copilot Instructions Method

AI Prompts
1

In this tutorial, we’ll walk through creating two essential markdown files — PROJECT_OVERVIEW.md and .github/copilot-instructions.md — that give your AI agent the context it needs to generate maintainable, project‑aligned code. Whether you're working in Node.js, PHP, or ASP.NET, this method sets the foundation for reproducible, intelligent onboarding across server frameworks.

Here’s a single, streamlined prompt you can paste into Wappler’s AI Manager so it creates both PROJECT_OVERVIEW.md and .github/copilot-instructions.md in one go, with the second file referencing the first.

All of the prompts have been tested using GPT-4.1

Combined Creation Prompt

Create two Markdown files for this Node.js project:

1. `PROJECT_OVERVIEW.md` (in the project root)
   - Document:
     - Tech stack: Node.js backend, Bootstrap 5.3.3, Font Awesome 5.15.4
     - Folder structure: `views/`, `app/api/`, `custom/` — describe purpose of each
     - Naming conventions for pages, components, and server actions
     - Architectural patterns: slot-based custom elements, modular server actions, layout wrappers
     - Documentation practices: inline comments, changelogs for reusable components
   - Use clear section headings, bullet points, and concise descriptions.
   - Format for readability and maintainability.

2. `.github/copilot-instructions.md` (inside `.github` folder)
   - Begin with a "Project Context" section that references `PROJECT_OVERVIEW.md` for full details.
   - Provide folder-specific guidance for:
       - `views/` — page templates, partials, Bootstrap usage, naming conventions
       - `app/api/` — modular server actions, camelCase filenames, inline comments
       - `custom/` — slot-based custom elements, changelogs, kebab-case filenames
   - Restate key architectural patterns: slot-based custom elements, modular server actions, layout wrappers
   - Outline documentation practices: always reference `PROJECT_OVERVIEW.md`, maintain changelogs, add inline comments
   - End with "AI Output Expectations" — follow conventions, respect patterns, refer to overview when in doubt.
   - Use clear headings, bullet points, and formatting for easy scanning.

Ensure both files are consistent, professional, and maintainable.

Here’s the combined update prompt so you can refresh both PROJECT_OVERVIEW.md and .github/copilot-instructions.md in one run whenever your project evolves.
It’s designed for Wappler’s AI Manager, and keeps both files perfectly in sync.

Combined Update Prompt

Update both `PROJECT_OVERVIEW.md` (in the project root) and `.github/copilot-instructions.md` (in the `.github` folder) for this Node.js project.

1. First, read the current contents of both files.
2. Apply the following updates to reflect the latest project state:
   - [List your changes here — e.g., “Upgrade Bootstrap to 5.4.0, switch icons to Font Awesome 6.5.1, add new `services/` folder for external API integrations, update naming conventions for server actions to use PascalCase”]
3. Ensure `PROJECT_OVERVIEW.md` remains the single source of truth for:
   - Tech stack
   - Folder structure and purpose
   - Naming conventions
   - Architectural patterns
   - Documentation practices
4. Ensure `.github/copilot-instructions.md`:
   - References `PROJECT_OVERVIEW.md` for full context
   - Contains concise folder‑specific guidance
   - Restates key architectural patterns
   - Outlines documentation practices
   - Ends with “AI Output Expectations” that align with the updated overview
5. Keep both files consistent, professional, and maintainable.
6. Use clear headings, bullet points, and formatting for easy scanning.

How You’ll Use This in Practice

  • Run it whenever you change your tech stack, folder structure, or conventions.
  • Be explicit in step 2 — the more detail you give, the more accurate the update.
  • Commit both files together so your Git history always shows them evolving in lockstep.
  • Review before saving — make sure terminology and examples match across both files.

Here’s an ultra‑fast “quick‑edit” micro‑prompt so you can update both PROJECT_OVERVIEW.md and .github/copilot-instructions.md in one shot for small tweaks, without re‑explaining the whole structure every time.

Quick‑Edit Combined Update Prompt

Update `PROJECT_OVERVIEW.md` (root) and `.github/copilot-instructions.md` (.github folder) to reflect these changes:

[Briefly list changes here — e.g., “Bootstrap 5.4.0 instead of 5.3.3, new `services/` folder for API integrations, server action naming now PascalCase”]

Keep:
- `PROJECT_OVERVIEW.md` as the single source of truth for tech stack, folder structure, naming conventions, architectural patterns, and documentation practices.
- `.github/copilot-instructions.md` referencing `PROJECT_OVERVIEW.md` for full context, with concise folder‑specific guidance, restated patterns, documentation rules, and AI output expectations.

Ensure both files stay consistent, professional, and maintainable.

When to Use This

  • Minor version bumps (frameworks, libraries)
  • Adding or renaming a folder
  • Tweaking a naming convention
  • Small architectural refinements

This way, you don’t have to paste the full “big” prompt — you just drop in the changes and let GPT‑4.1 handle the sync.

4 Likes
2

I'd like to add to the above and also suggest a chat.md file where a summary of the chat is maintained for fallback purposes for picking up where you left off. Gives the LLM further context and an understanding of where you have got to...

1 Like