[add] demo

Author: 75ta

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/.env
+/dist

README.md

@@ -1 +1,82 @@
-# diagram-org-chart-builder-ai-demo
+# AI Org Chart Builder with DHTMLX Diagram
+
+A full-stack web application that integrates DHTMLX Diagram with AI for generating organizational charts and diagrams from natural language text descriptions.
+
+### **[✨ Try the Live Demo >>>](https://dhtmlx.com/docs/demo/diagram-org-chart-builder-ai-demo/)**
+
+## Features
+
+- **Natural Language to Diagram:** Describe your diagram in plain English (e.g., "An organizational chart with CEO and department heads") and watch it come to life.
+- **Live Preview:** See the generated DHTMLX Diagram instantly.
+- **Editable JSON:** View, edit, and fine-tune the generated JSON configuration in a built-in code editor.
+- **Instant Updates:** Modify the JSON and click "Update Preview" to see your changes immediately without calling the AI again.
+
+## AI Service
+
+- Configured to work with any OpenAI API-compatible service.
+- Tested with `gpt-5-nano` model.
+
+## Setup and Installation
+
+Follow these steps to get the project running on your local machine.
+
+```bash
+cd diagram-org-chart-builder-ai-demo
+npm install
+```
+
+### Set up environment variables:
+Create a new file named `.env` inside the `diagram-org-chart-builder-ai-demo` directory by copying from `env.sample`. This file holds your secret keys and configuration.
+
+📄 `diagram-org-chart-builder-ai-demo/.env`
+```ini
+# --- OpenAI API Configuration ---
+OPENAI_API_KEY=sk-YourSecretApiKeyGoesHere
+OPENAI_BASE_URL=https://api.openai.com/v1
+
+# --- Security Configuration ---
+CORS_ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500
+```
+
+-   **`OPENAI_API_KEY`**: (Required) Your secret API key for the AI service.
+-   **`OPENAI_BASE_URL`**: The API endpoint for the AI service. Can be changed to use a proxy or a different provider compatible with the OpenAI API.
+-   **`CORS_ALLOWED_ORIGINS`**: A crucial security setting. This is a comma-separated list of web addresses allowed to connect to your backend server. For production, you **must** change this to your public frontend's URL (e.g., `https://myapp.com`).
+
+### Run the Application
+
+In the same `diagram-org-chart-builder-ai-demo` directory, run the start command:
+```bash
+npm start
+```
+
+You should see the following output in your terminal:
+```
+Server started on port 3001
+```
+
+### 4. Open in Browser
+
+Open your favorite web browser and navigate to:
+[http://localhost:3001](http://localhost:3001)
+
+You should see the application, ready to generate diagrams!
+
+## How It Works: From Text to Diagram
+
+1.  **Describe your idea:** The user enters a text description of the diagram, for example, "director and three departments: sales, marketing and development".
+2.  **AI-Powered JSON Generation:** The text is sent to the server, where our AI generates a structured JSON configuration based on the request.
+3.  **Instant visualization:** The frontend receives the ready data and immediately renders an interactive DHTMLX diagram that can be seen on the screen right away.
+4.  **Full control:** Next to the diagram, the JSON code is displayed. You can edit it manually and update the visualization in real time to bring the result to perfection.
+
+## Deployment
+
+This application is ready to be deployed on any service that supports Node.js, such as Render, Heroku, or Vercel.
+
+**Key deployment steps:**
+- **Do not** upload your `.env` file. Use the hosting provider's "Environment Variables" section to set `OPENAI_API_KEY`, `OPENAI_BASE_URL`, and `CORS_ALLOWED_ORIGINS`.
+- The `Root Directory` should be left blank (or set to /).
+- The `Start Command` should be `npm start`.
+
+## License
+
+DHTMLX Diagram is a commercial library - use it under a [valid license](https://dhtmlx.com/docs/products/licenses.shtml) or [evaluation agreement](https://dhtmlx.com/docs/products/dhtmlxDiagram/download.shtml).

backend/ai-prompts.js

@@ -0,0 +1,49 @@
+export const schemaList = [
+    {
+        type: "function",
+        function: {
+            name: "create_org_chart_diagram",
+            description: "Creates an organizational chart diagram from an array of nodes.",
+            parameters: {
+                type: "object",
+                properties: {
+                    nodes: {
+                        type: "array",
+                        description: "An array of objects, where each object represents an employee.",
+                        items: {
+                            type: "object",
+                            properties: {
+                                id: {
+                                    type: "string",
+                                    description: "Unique employee identifier (name in lowercase)."
+                                },
+                                text: {
+                                    type: "string",
+                                    description: "Employee's position (e.g., 'CEO', 'Manager', 'Developer')."
+                                },
+                                parent: {
+                                    type: "string",
+                                    description: "ID of the direct manager."
+                                },
+                                title: {
+                                    type: "string",
+                                    description: "Employee name to display."
+                                },
+                                partner: {
+                                    type: "boolean",
+                                    description: "Indicates if the employee is a partner."
+                                },
+                                assistant: {
+                                    type: "boolean",
+                                    description: "Indicates if the employee is an assistant."
+                                }
+                            },
+                            required: ["id", "text"]
+                        }
+                    }
+                },
+                required: ["nodes"]
+            }
+        }
+    }
+];

backend/schema.js

@@ -0,0 +1,108 @@
+import 'dotenv/config';
+import express from 'express';
+import { createServer } from 'http';
+import { Server } from 'socket.io';
+import OpenAI from 'openai';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { rephrasePrompt, diagramPrompt } from './ai-prompts.js';
+import { schemaList } from './schema.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const http = createServer(app);
+
+const io = new Server(http, {
+    cors: {
+        origin: "*",
+        methods: ["GET", "POST"]
+    }
+});
+
+app.use(express.static(path.join(__dirname, '../frontend')));
+
+const openai = new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+    baseURL: process.env.OPENAI_BASE_URL
+});
+
+io.on('connection', socket => {
+    socket.on('rephrase_text', async (data, callback) => {
+        try {
+            const rephrasedText = await callOpenAIForRephrase(data.text);
+            callback({ status: 'success', payload: rephrasedText });
+        } catch(e) {
+            callback({ status: 'error', message: e.message });
+        }
+    });
+
+    socket.on('generate_diagram', async (data, callback) => {
+        try {
+            const assistantMessage = await callOpenAIForDiagram(data.text);
+            if (!assistantMessage?.tool_calls?.length) {
+                throw new Error("AI did not return a valid function call.");
+            }
+            const toolCall = assistantMessage.tool_calls[0];
+            const parsedResult = JSON.parse(toolCall.function.arguments);
+
+            parsedResult.nodes.forEach(node => {
+                if (!node.text) {
+                    node.text = "Unknown Position";
+                }
+            });
+
+            const fixedNodes = fixHierarchy(parsedResult.nodes);
+            callback({ status: 'success', payload: fixedNodes });
+        } catch (e) {
+            console.error('Error generating diagram:', e.message);
+            callback({ status: 'error', message: e.message });
+        }
+    });
+});
+
+function fixHierarchy(nodes) {
+    if (!nodes || nodes.length === 0) return [];
+    const existingIds = new Set(nodes.map(node => node.id));
+    nodes.forEach(node => {
+        if (node.parent && !existingIds.has(node.parent)) {
+            console.warn(`"Orphan" detected! Node "${node.text}" refers to a non-existent parent "${node.parent}". Connection removed.`);
+            delete node.parent;
+        }
+    });
+    return nodes;
+}
+
+async function callOpenAIForRephrase(userText) {
+    const messages = [{ role: 'system', content: rephrasePrompt }, { role: 'user', content: userText }];
+
+    try {
+        const res = await openai.chat.completions.create({
+            model: 'gpt-5-nano',
+            messages: messages,
+        });
+        return res.choices[0].message.content;
+    } catch (e) {
+        throw new Error(`Error from AI service: ${e.message}`);
+    }
+}
+
+async function callOpenAIForDiagram(userText) {
+    const messages = [{ role: 'system', content: diagramPrompt }, { role: 'user', content: userText }];
+
+    try {
+        const res = await openai.chat.completions.create({
+            model: 'gpt-5-nano',
+            messages: messages,
+            tools: schemaList,
+            tool_choice: { type: "function", function: { name: "create_org_chart_diagram" } },
+        });
+        return res.choices[0].message;
+    } catch (e) {
+        throw new Error(`Error from AI service: ${e.message}`);
+    }
+}
+
+const PORT = process.env.PORT || 3001;
+http.listen(PORT);

backend/server.js

@@ -0,0 +1,21 @@
+# Environment variables
+#
+# INSTRUCTIONS:
+# 1. Copy this file to a new file named .env
+# 2. Fill in the required values below.
+#
+# NOTE: The .env file contains secrets and must NOT be committed to Git.
+#
+# --- OpenAI API Configuration ---
+
+OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+OPENAI_BASE_URL=https://api.openai.com/v1
+
+
+# --- Security Configuration ---
+# A comma-separated list of domains allowed to connect to this server.
+# For local development, the default is usually sufficient.
+# For production, set this to your public frontend URL.
+# Example: https://my-app.com,https://staging.my-app.com
+
+CORS_ALLOWED_ORIGINS=http://localhost:3001,http://localhost:3002,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500