From 28cf9699d36ed8608d8cde17e96f3d7aba91eef6 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Thu, 20 Nov 2025 16:18:52 +0300 Subject: [PATCH 1/3] [add] a draft of page on ai integration --- docs/guides/integrations/ai_integration.md | 91 ++++++++++++++++++++++ sidebars.js | 5 +- 2 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 docs/guides/integrations/ai_integration.md diff --git a/docs/guides/integrations/ai_integration.md b/docs/guides/integrations/ai_integration.md new file mode 100644 index 00000000..5111c709 --- /dev/null +++ b/docs/guides/integrations/ai_integration.md @@ -0,0 +1,91 @@ +--- +sidebar_label: Integrating Diagram with AI +title: Integrating Diagram with AI +description: You can learn about the Integrating Diagram with AI in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram. +--- + +# Integrating Diagram with AI + +DHTMLX Diagram can be integrated with AI for creating AI-powered diagramming applications. We have prepared an example on how to use DHTMLX Diagram with AI to build an application for creating an org chart out of a request provided in natural language. + +The demo app includes such features as text-to-diagram conversion, AI-driven JSON generation, an instant live preview of a ready diagram and an inbuilt code editor for viewing and adjusting the generated JSON data to update the diagram preview on the fly. For more information, refer to the corresponding [Example on GitHub](https://github.com/DHTMLX/diagram-org-chart-builder-ai-demo). + +## Project setup + +To download the project, clone the repository by using the following command: + +~~~jsx +git clone diagram-org-chart-builder-ai-demo +~~~ + +and then go the project repository via the command below: + +~~~jsx +cd diagram-org-chart-builder-ai-demo +~~~ + +### Installing dependencies + +To install dependencies and run the app, you need to make use of a package manager. To install the demo app described in this guide, you should use [npm](https://www.npmjs.com/) by calling the following command: + +~~~jsx +npm install +~~~ + +### Adjusting environment variables + +Then you need to configure the environment variables. For this, create a new file named `.env` inside the **diagram-org-chart-builder-ai-demo** directory by copying the content of the `env.sample` file. +The newly created `.env` file will store your keys and configuration. Fill in the required values provided below: + +~~~jsx title="diagram-org-chart-builder-ai-demo/.env" +# --- 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 + +# --- Server Configuration (optional) --- +PORT=3001 +~~~ + +:::info +Do NOT upload your `.env` file, since it contains sensitive information! +::: + +Check descriptions of the `.env` file variables below: + +- `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). +- `PORT`: (Optional) The port number on which the server will run. Defaults to 3001 if not set. + +### Running the application + +To start the application, use the following command in the app directory: + +~~~jsx +npm start // this is the required start command +~~~ + +You should see the output below in your terminal: + +~~~jsx +Server started on port 3001. +~~~ + +Then open the web browser and navigate to: `http://localhost:3001` to see the application ready to generate diagrams. + +## How the demo app works + +These are the basic steps for transforming a text request into a diagram: + +- First, the user enters a text description of the diagram in plain terms, for example: "A diagram with a top manager and five departments each having two employees". +- Then the prompt is sent to the backend, where the AI service generates a structured JSON configuration based on the request. +- After that the frontend gets the resulting data and renders an interactive DHTMLX diagram instantly. +- At the following stage, the corresponding JSON code is displayed in the code editor below the diagram. The user can fine-tune the code and edit the resulting diagram in real time. +- Finally, the user can save the generated data in a JSON file or export the diagram to a PDF or PNG file. + +## Step-by-step tutorial on building the application + +If you want to study the process of creating the application described above, learn more about its structural parts and how they work together, follow the detailed guide [How to Build an AI-Powered Org Chart Builder with DHTMLX](). diff --git a/sidebars.js b/sidebars.js index 1ed9e304..0c7b5248 100644 --- a/sidebars.js +++ b/sidebars.js @@ -863,7 +863,7 @@ module.exports = { link: { type: 'generated-index', title: "Integrations", - keywords: ['angular', 'react', 'vue'], + keywords: ['angular', 'react', 'vue', 'svelte'], image: '/img/docusaurus.png', }, items: [ @@ -873,8 +873,9 @@ module.exports = { "guides/integrations/svelte_integration" ], }, + "guides/integrations/ai_integration", "guides/touch_support", - "guides/using_typescript", + "guides/using_typescript" ] }, ] From 2209c692d0b48ce8ecb2f972b991367aa0583040 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Thu, 20 Nov 2025 17:02:33 +0300 Subject: [PATCH 2/3] [update] page draft on ai integration --- docs/guides/integrations/ai_integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/integrations/ai_integration.md b/docs/guides/integrations/ai_integration.md index 5111c709..ef1fa331 100644 --- a/docs/guides/integrations/ai_integration.md +++ b/docs/guides/integrations/ai_integration.md @@ -8,7 +8,7 @@ description: You can learn about the Integrating Diagram with AI in the document DHTMLX Diagram can be integrated with AI for creating AI-powered diagramming applications. We have prepared an example on how to use DHTMLX Diagram with AI to build an application for creating an org chart out of a request provided in natural language. -The demo app includes such features as text-to-diagram conversion, AI-driven JSON generation, an instant live preview of a ready diagram and an inbuilt code editor for viewing and adjusting the generated JSON data to update the diagram preview on the fly. For more information, refer to the corresponding [Example on GitHub](https://github.com/DHTMLX/diagram-org-chart-builder-ai-demo). +The [demo app](https://dhtmlx.com/docs/demo/ai-org-chart-builder/) includes such features as text-to-diagram conversion, AI-driven JSON generation, an instant live preview of a ready diagram and an inbuilt code editor for viewing and adjusting the generated JSON data to update the diagram preview on the fly. For more information, refer to the corresponding [GitHub repository](https://github.com/DHTMLX/diagram-org-chart-builder-ai-demo). ## Project setup From b1b4ef13874189a7a5e65872e96c81627d021d3e Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 21 Nov 2025 11:54:52 +0300 Subject: [PATCH 3/3] [update] the ai integration guide --- docs/guides/integrations/ai_integration.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/guides/integrations/ai_integration.md b/docs/guides/integrations/ai_integration.md index ef1fa331..66067e4e 100644 --- a/docs/guides/integrations/ai_integration.md +++ b/docs/guides/integrations/ai_integration.md @@ -57,7 +57,7 @@ Check descriptions of the `.env` file variables below: - `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). +- `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`). - `PORT`: (Optional) The port number on which the server will run. Defaults to 3001 if not set. ### Running the application @@ -86,6 +86,4 @@ These are the basic steps for transforming a text request into a diagram: - At the following stage, the corresponding JSON code is displayed in the code editor below the diagram. The user can fine-tune the code and edit the resulting diagram in real time. - Finally, the user can save the generated data in a JSON file or export the diagram to a PDF or PNG file. -## Step-by-step tutorial on building the application -If you want to study the process of creating the application described above, learn more about its structural parts and how they work together, follow the detailed guide [How to Build an AI-Powered Org Chart Builder with DHTMLX]().