A Streamlined Prompt for a Complete OrgChart App

When working with AI‑generated project scaffolding, clarity matters. The difference between a bloated output and a clean, production‑ready project often comes down to one thing: the prompt.

In this project, we refined a prompt to produce a fully functional OrgChart JS application — keeping the frontend minimal and the backend flexible. The goal was simple: a working organizational chart powered by a lightweight Express server, without unnecessary markup or complexity.

The Prompt Behind the App

Build a simple organizational chart application using **OrgChart JS**, vanilla JavaScript, HTML, CSS, Node.js, and Express.

Use OrgChart JS from this CDN:

<script src="https://cdn.balkan.app/orgchart.js"></script>

The frontend must contain only the required chart container:

<div id="tree"></div>

Use employee data in this format:

[
  { "id": 1, "name": "Amber McKenzie", "title": "CEO" },
  { "id": 2, "pid": 1, "name": "Ava Field", "title": "Product Manager" },
  { "id": 3, "pid": 1, "name": "Peter Stevens", "title": "Developer" }
]

Create a clean and minimal frontend with:

- An interactive organizational chart
- Name and title displayed in each node
- Add, Edit, and Remove actions
- Simple loading and error states implemented dynamically with JavaScript (no static HTML markup)
- Simple success and error notifications

Do not generate any additional static HTML elements beyond the chart container.

The frontend must send straightforward payloads for add, update, and remove operations so the backend can process them easily without strict validation.

Use this OrgChart JS integration:

const chart = new OrgChart(document.getElementById("tree"), {
    nodeBinding: {
        field_0: "name",
        field_1: "title"
    },
    nodeMenu: {
        add: { text: "Add New" },
        edit: { text: "Edit" },
        remove: { text: "Remove" }
    }
});

chart.onAddNode(function (args) {
    fetch("/api/add", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(args.data)
    });
});

chart.onUpdateNode(function (args) {
    fetch("/api/update", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(args)
    });
});

chart.onRemoveNode(function (args) {
    fetch("/api/remove", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ args })
    });
});

fetch("/api/employees")
    .then(r => r.json())
    .then(data => chart.load(data));

Create a compatible Express backend that stores employee data in a local JSON file and exposes:

- GET /api/employees
- POST /api/add
- POST /api/update
- POST /api/remove

The backend should accept incoming data as-is, generate IDs when needed, and update the JSON file without strict validation so all chart operations work smoothly.

Generate all required project files: frontend, backend, JSON data file, package.json, and instructions for installing dependencies and starting the application.

This is the instruction set that guarantees a lightweight UI, a stable backend, and a predictable OrgChart JS integration.

The Result

With this prompt, you get:

• A clean simple organizational chart
• Zero unnecessary HTML elements
• Fully working chart actions
• A backend that accepts data gracefully
• A frontend that stays minimal and focused
• A repeatable, reliable AI‑generated project structure

It’s a clear example of how thoughtful prompt design can turn AI into a precise development tool — delivering exactly what you need, without the noise.