diff --git a/i18n/de/docusaurus-plugin-content-docs/current/.sync b/i18n/de/docusaurus-plugin-content-docs/current/.sync index 8aac28e..e714429 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/de/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -405a08daeac3963e8235e7fb505368c0cbd880db +a66b660fd836ea9463cf50670fe46a57aab3dd68 diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/mcp-server.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/mcp-server.md new file mode 100644 index 0000000..9eafa65 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,254 @@ +--- +sidebar_label: DHTMLX MCP-Server +title: DHTMLX Kanban MCP-Integration für Boards und REST-Synchronisierung +description: Der MCP-Server gibt KI-Tools Zugriff auf die aktuelle DHTMLX Kanban-Dokumentation — zu Karten, Spalten, Zeilen, Editor-Feldern und der REST-Datensynchronisierung. +--- + +# DHTMLX Kanban MCP-Server: Karten, Editor und REST-Synchronisierung + +Ein funktionierendes [DHTMLX Kanban](/)-Board setzt voraus, dass mehrere Teile korrekt zusammenspielen: Karten- und Editor-Felder müssen sich [denselben Key teilen](guides/configuration.md#bind-editor-fields-to-card-fields), die [Toolbar](guides/customization.md#custom-toolbar) läuft als eigenes Widget, das an das Board gebunden ist, und die [Server-Synchronisierung](guides/working_with_server.md) stützt sich auf einen bestimmten Satz von Action-Handlern. Generierter Code hält stand, wenn Karten- und Editor-Felder denselben Key verwenden, die Toolbar separat eingebunden ist und die Server-Synchronisierung auf den heutigen Action-Handlern beruht — nicht auf einem Stand aus den Trainingsdaten. + +Der DHTMLX MCP-Server sorgt dafür, dass der Assistent mit der aktuellen Kanban-Dokumentation arbeitet statt zu raten. Fragen Sie nach dem [Binden von Editor-Feldern an Karten-Felder](guides/configuration.md#bind-editor-fields-to-card-fields), nach dem [Anpassen der Toolbar](guides/customization.md#custom-toolbar) oder nach dem [Anbinden eines RestDataProvider-Backends](guides/working_with_server.md), und der Assistent ruft die aktuelle Referenz ab, bevor er Code schreibt. + +### MCP-Endpoint + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +Der DHTMLX MCP-Server deckt alle wichtigen DHTMLX-Produkte ab, nicht nur DHTMLX Kanban. Derselbe Endpoint und dieselben Konfigurationsanweisungen gelten unabhängig davon, mit welcher DHTMLX-Komponente Sie arbeiten. +::: + +## Kanban-Dokumentation über den MCP-Server + +Intern hält der Server einen vollständigen Index der DHTMLX Kanban-Dokumentation bereit und beantwortet damit Anfragen wie diese: + +- Nachschlagen der aktuellen Kanban-API zu [Methoden](api/overview/methods_overview.md), [Events](api/overview/events_overview.md) und [Eigenschaften](api/overview/properties_overview.md), einschließlich Signaturen und Standardwerten. +- Erzeugen von sofort lauffähigem [Initialisierungscode](guides/initialization.md) sowohl für das Kanban-Board als auch für den separaten Toolbar-Konstruktor. +- Konfigurieren von [Karten- und Editor-Feldern](guides/configuration.md#cards) (`cardShape`, `editorShape`) und deren Bindung über den Key, einschließlich der Feldtypen combo, multiselect, color, date und files. +- [Anpassen](guides/customization.md) von Kartenvorlagen, Kontextmenüs und Spaltenköpfen mit den dokumentierten Template-Callbacks. +- [Gestalten](guides/stylization.md) von Spalten, Zeilen und Karten über CSS-Variablen und bedingte CSS-Klassen. +- [Lokalisieren](guides/localization.md) der Kanban- und Toolbar-Oberfläche mit integrierten oder eigenen Locale-Objekten. +- [Laden, Exportieren und Ändern](guides/working_with_data.md) von Karten, Spalten, Zeilen, Links und Kommentaren über die Daten-API. +- Anbinden eines [REST-Backends](guides/working_with_server.md) über `RestDataProvider` oder Einrichten eines Mehrbenutzer-Boards, das Änderungen über WebSocket synchronisiert. +- [Integrieren](guides/integration.md) von Kanban mit anderen DHTMLX-Widgets wie Gantt und Scheduler oder mit [React](guides/integration_with_react.md), [Vue](guides/integration_with_vue.md), [Angular](guides/integration_with_angular.md) und [Svelte](guides/integration_with_svelte.md). + +## Was eine Kanban-Anfrage im MCP auslöst + +Der DHTMLX MCP-Server beantwortet Kanban-Fragen über eine Retrieval-Augmented-Generation-Pipeline (RAG), die auf dem Model Context Protocol (MCP) aufsetzt, und verteilt jede Anfrage auf zwei Abläufe: *Search* liefert die passenden Referenzseiten, auf die sich der Assistent stützt, und *Inference* liest diese Seiten selbst und gibt eine fertige Antwort zurück. Zuvor grenzt der Assistent ein, welcher Teil der Anfrage tatsächlich einen Blick in die Dokumentation erfordert, und beantwortet den Rest aus eigenem Wissen. + +Nehmen Sie die Anfrage *"Wie binde ich DHTMLX Kanban so an, dass eine neu hinzugefügte Karte automatisch mit meiner Backend-Datenbank synchronisiert wird?"* als Beispiel: + +1. Der Assistent bestimmt den Teil, für den Dokumentation nötig ist: wie `RestDataProvider` eine neue Karte mit einem Server synchronisiert. +2. Der Server ordnet dies der Dokumentation zur Server-Integration zu. +3. Da die Antwort Code erzeugen muss, übernimmt *Search* die Anfrage (eine Frage mit genau einer richtigen Antwort ginge stattdessen an *Inference*). +4. *Search* holt die passenden Seiten aus einem Vektorindex, der auf der aktuellen Kanban-Dokumentation aufgebaut ist. +5. Der Assistent erhält diese Seiten als Kontext zurück. +6. Aus diesem Kontext richtet der Assistent `RestDataProvider` für die Operation `add-card` ein und ergänzt die backend-spezifischen Details der Anfrage aus eigenem Wissen, statt bei der Kanban-API zu raten. + +So bleiben Kanban-Codevorschläge auf dem Stand der API, wie sie heute funktioniert. + +## Den MCP-Server pro Tool registrieren + +Ob über das Terminal oder über eine Konfigurationsdatei — in beiden Fällen verweisen Sie Ihr Tool auf die untenstehende URL. Nach der Registrierung erreicht jedes Kanban-Board, das Sie in diesem Tool bauen, den Server. + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Nachfolgend finden Sie die Einrichtungsschritte für die gängigsten Tools. + +### Claude Code + +:::info +Alle unterstützten Wege, einen MCP-Server zu registrieren, beschreibt die [Dokumentation](https://code.claude.com/docs/en/mcp) von Claude Code selbst. +::: + +Um den Server über die Kommandozeile zu registrieren, führen Sie Folgendes aus: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Sie richten es lieber von Hand ein? Fügen Sie diesen Eintrag in Ihre `.mcp.json` ein: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +Alle von Cursor unterstützten Wege der MCP-Konfiguration finden Sie in dessen [offizieller Dokumentation](https://cursor.com/en-US/docs/mcp). +::: + +Schritte zum Hinzufügen des Servers: + +1. Öffnen Sie die Settings (`Cmd+Shift+J` auf dem Mac, `Ctrl+Shift+J` unter Windows/Linux) +2. Wechseln Sie zu **Tools & MCP** +3. Klicken Sie auf **Add Custom MCP** +4. Fügen Sie die folgende Konfiguration ein: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity + +#### Antigravity 2.0 + +:::info +Alle Details zur MCP-Integration in Antigravity stehen in der [offiziellen Dokumentation](https://antigravity.google/docs/mcp). +::: + +Diese Schritte verbinden den DHTMLX MCP-Server mit Google Antigravity: + +1. Öffnen Sie die Befehlspalette +2. Geben Sie "mcp add" ein +3. Wählen Sie "HTTP" +4. Geben Sie die folgenden Werte an: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI + +:::info +Die [zugehörige Anleitung](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) behandelt die Migration von der Gemini CLI zur Antigravity CLI. +::: + +Um den DHTMLX MCP-Server mit der Antigravity CLI zu verbinden, legen Sie `mcp_config.json` an einem dieser Orte an: + +- Global: `~/.gemini/config/mcp_config.json` +- Workspace: `.agents/mcp_config.json` + +Fügen Sie die folgende Konfiguration hinzu: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +Führen Sie anschließend `agy` im Terminal aus. + +### ChatGPT + +:::info +Die [offizielle Dokumentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) von ChatGPT führt durch die vollständige Einrichtung des MCP-Connectors. +::: + +Schritte zur Konfiguration des Connectors: + +1. Gehen Sie zu **Settings** → **Apps & Connectors** +2. Klicken Sie auf **Advanced settings** +3. Aktivieren Sie den **Developer mode** +4. Kehren Sie zu **Apps & Connectors** zurück und klicken Sie auf "Create" +5. Füllen Sie die Angaben zum Connector aus: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- Authentifizierung: `No authentication` +6. Klicken Sie auf **Create** + +Sobald der Connector angelegt ist, zieht ChatGPT die Dokumentation während der Unterhaltung vom MCP-Server. + +:::info +Für intensive Coding-Workflows sind andere MCP-fähige Tools womöglich besser geeignet. +::: + +### Weitere Tools + +Tools ohne eigenen Abschnitt hier unterstützen MCP in der Regel trotzdem — in den Einstellungen meist als "Model Context Protocol" oder "Context Sources" bezeichnet. Tragen Sie dort `https://docs.dhtmlx.com/mcp` als eigene Quelle ein. + +## Was der MCP-Server mit Ihren Daten macht + +Der MCP-Server ist ein gehosteter Dienst: Auf Ihrem Rechner läuft nichts, es werden keine Dateien aus Ihrem Projekt gelesen und keine personenbezogenen Daten gespeichert. + +Zur Fehlersuche und zur Verbesserung des Dienstes können Anfragen protokolliert werden. + +Bei strengeren Datenschutzanforderungen können Organisationen eine kommerzielle Bereitstellung ohne Protokollierung der Anfragen anfragen. Details erhalten Sie unter `info@dhtmlx.com`. + +## Vorlagen für Kanban-Board-Prompts + +Die folgenden Prompts sind nach dem Teil der API gruppiert, auf den sie abzielen. Übernehmen Sie einen davon und passen Sie die Details an Ihr Board an. + +**Karten, Spalten und Zeilen** + +~~~ +Wie erlaube ich Nutzern, Karten in DHTMLX Kanban zwischen Spalten und Zeilen zu ziehen? Nutze die Dokumentation. +~~~ +~~~ +Wie begrenze ich die Anzahl der Karten in einer bestimmten Spalte oder Zeile? +~~~ +~~~ +Wie dupliziere ich eine Karte und verschiebe die Kopie mit der Kanban-API in eine andere Zeile? +~~~ + +**Editor und Feldtypen** + +~~~ +Wie binde ich ein eigenes Editor-Feld an ein Karten-Feld, damit es auf der Karte und im Editor erscheint? +~~~ +~~~ +Wie konfiguriere ich im DHTMLX Kanban-Editor ein multiselect-Feld mit Benutzer-Avataren? +~~~ +~~~ +Wie aktiviere ich im DHTMLX Kanban-Editor das automatische Speichern mit Debounce-Verzögerung? +~~~ + +**Toolbar und Board-Steuerelemente** + +~~~ +Wie füge ich der Kanban-Toolbar ein eigenes Suchfeld hinzu und binde es an das Board? +~~~ +~~~ +Wie entferne ich die Undo- und Redo-Schaltflächen aus der DHTMLX Kanban-Toolbar? +~~~ + +**REST- und Mehrbenutzer-Synchronisierung** + +~~~ +Wie verbinde ich DHTMLX Kanban mit einem Go-Backend und lade die Anfangsdaten? +~~~ +~~~ +Wie passe ich an, wie DHTMLX Kanban eine bestimmte Aktion mit meinem Backend synchronisiert? +~~~ +~~~ +Wie richte ich ein Mehrbenutzer-Board mit DHTMLX Kanban ein, das Änderungen in Echtzeit über WebSocket synchronisiert? +~~~ + +## Bessere Ergebnisse bei Kanban-Prompts + +- **Benennen Sie das Zielelement.** Unterscheiden Sie zwischen dem Board, einer Spalte, einer Zeile (Swimlane) und einer Karte (zum Beispiel "auf dem Kanban-Board" gegenüber "für eine bestimmte Zeile" gegenüber "auf einer Karte in der Spalte Testing"). Ein genaues Ziel hilft dem Server, die richtigen Referenzseiten zu finden. +- **Geben Sie den Feldtyp an.** `cardShape` und `editorShape` unterstützen viele Feldtypen (combo, multiselect, color, date, files). Nennen Sie den Typ ausdrücklich (zum Beispiel "ein multiselect-Feld mit Avataren") statt nur "ein Feld", damit der Assistent die passende Konfigurationsreferenz heranzieht. +- **Ergänzen Sie "Nutze die Dokumentation"** in Ihrem Prompt. Dieser Satz signalisiert dem Assistenten, dass er eine MCP-Abfrage auslösen soll, statt allein aus den Trainingsdaten zu antworten. Am wichtigsten ist das bei `RestDataProvider`-Handlern und der Feldkonfiguration, wo sich die API am ehesten geändert hat. +- **Sagen Sie, ob die Operation clientseitig oder serverseitig ist.** Kanban arbeitet sowohl mit lokalen Daten als auch mit einer REST-API über `RestDataProvider`. Erwähnen Sie, was zutrifft (zum Beispiel "mit RestDataProvider" oder "ohne Backend"), damit der Assistent keine REST-spezifischen Aufrufe in ein reines Client-Beispiel mischt. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md index 227c250..e28f8ca 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/how_to_start.md @@ -126,4 +126,4 @@ new kanban.Toolbar("#toolbar", { ## Wie geht es weiter -Das war's! Nur drei einfache Schritte und Sie verfügen über ein praktisches Tool zur Visualisierung und Verwaltung Ihres Workflows. Jetzt können Sie mit Ihren Aufgaben arbeiten oder die Möglichkeiten von JavaScript Kanban weiter erkunden. \ No newline at end of file +Das war's! Nur drei einfache Schritte und Sie verfügen über ein praktisches Tool zur Visualisierung und Verwaltung Ihres Workflows. Jetzt können Sie mit Ihren Aufgaben arbeiten oder die Möglichkeiten von JavaScript Kanban weiter erkunden. Sie entwickeln mit einem KI-Coding-Assistenten? Verweisen Sie ihn über den [DHTMLX MCP-Server](guides/mcp-server.md) auf die aktuelle Dokumentation. \ No newline at end of file diff --git a/i18n/de/docusaurus-plugin-content-docs/current/howtos.md b/i18n/de/docusaurus-plugin-content-docs/current/howtos.md index 8e6ee52..58a9f19 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/howtos.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/howtos.md @@ -19,6 +19,7 @@ In diesem Abschnitt erfahren Sie die grundlegenden Prinzipien der Arbeit mit Kan | [Anpassung](guides/customization.md) | Lernen Sie, wie Sie Kanban anpassen | | [Stilierung](guides/stylization.md) | Lernen Sie, wie Sie Kanban gestalten | | [Lokalisierung](guides/localization.md) | Lernen Sie, wie Sie Kanban lokalisieren ([Beispiel](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban))| +| [DHTMLX MCP-Server](guides/mcp-server.md) | Verbinden Sie einen KI-Coding-Assistenten mit der aktuellen Kanban-Dokumentation | ## API-Referenz diff --git a/i18n/de/docusaurus-plugin-content-docs/current/index.md b/i18n/de/docusaurus-plugin-content-docs/current/index.md index a8f5848..23f964f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/index.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/index.md @@ -70,4 +70,4 @@ import editor from '@site/static/img/js_kanban_editor.png'; ## Wie geht es weiter -Jetzt können Sie Kanban in Ihrer Anwendung verwenden. Folgen Sie der Anleitung im Tutorial [How to start](how_to_start.md) für weitere Hinweise. \ No newline at end of file +Jetzt können Sie Kanban in Ihrer Anwendung verwenden. Folgen Sie der Anleitung im Tutorial [How to start](how_to_start.md) für weitere Hinweise. Wenn Sie mit einem KI-Coding-Assistenten arbeiten, verbinden Sie ihn über den [DHTMLX MCP-Server](guides/mcp-server.md) mit der aktuellen Dokumentation. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync index 8aac28e..e714429 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -405a08daeac3963e8235e7fb505368c0cbd880db +a66b660fd836ea9463cf50670fe46a57aab3dd68 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/mcp-server.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/mcp-server.md new file mode 100644 index 0000000..b86b6c4 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,254 @@ +--- +sidebar_label: DHTMLX MCP 서버 +title: 보드와 REST 동기화를 위한 DHTMLX Kanban MCP 연동 +description: MCP 서버는 AI 도구가 최신 DHTMLX Kanban 문서에 접근하도록 해줍니다. 카드, 컬럼, 스윔레인, 에디터 필드, REST 데이터 동기화를 모두 다룹니다. +--- + +# DHTMLX Kanban MCP 서버: 카드, 에디터, REST 동기화 + +제대로 동작하는 [DHTMLX Kanban](/) 보드는 여러 요소가 정확히 맞물려야 합니다. 카드 필드와 에디터 필드는 [같은 key를 공유](guides/configuration.md#bind-editor-fields-to-card-fields)해야 하고, [Toolbar](guides/customization.md#custom-toolbar)는 보드에 연결된 별도의 위젯으로 동작하며, [서버 동기화](guides/working_with_server.md)는 정해진 액션 핸들러 집합에 의존합니다. 생성된 코드는 카드 필드와 에디터 필드가 같은 key를 사용하고, Toolbar가 별도로 연결되어 있으며, 서버 동기화가 학습 시점의 스냅샷이 아니라 현재의 액션 핸들러를 기반으로 할 때 제대로 동작합니다. + +DHTMLX MCP 서버는 어시스턴트가 추측 대신 최신 Kanban 문서를 근거로 작업하도록 합니다. [에디터 필드를 카드 필드에 바인딩하는 방법](guides/configuration.md#bind-editor-fields-to-card-fields), [Toolbar를 커스터마이즈하는 방법](guides/customization.md#custom-toolbar), [RestDataProvider 백엔드를 연결하는 방법](guides/working_with_server.md)을 물어보면, 어시스턴트는 코드를 작성하기 전에 최신 레퍼런스를 가져옵니다. + +### MCP 엔드포인트 + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 서버는 DHTMLX Kanban뿐만 아니라 주요 DHTMLX 제품 전체를 다룹니다. 어떤 DHTMLX 컴포넌트를 사용하든 동일한 엔드포인트와 설정 방법이 그대로 적용됩니다. +::: + +## MCP 서버를 통한 Kanban 문서 활용 + +내부적으로 서버는 DHTMLX Kanban 문서 전체의 인덱스를 유지하며, 다음과 같은 요청을 처리합니다: + +- 시그니처와 기본값을 포함한 Kanban [메서드](api/overview/methods_overview.md), [이벤트](api/overview/events_overview.md), [속성](api/overview/properties_overview.md)의 최신 API 조회. +- Kanban 보드와 별도의 Toolbar 생성자 모두에 대해 바로 실행 가능한 [초기화](guides/initialization.md) 코드 생성. +- combo, multiselect, color, date, files 필드 타입을 포함한 [카드 및 에디터 필드](guides/configuration.md#cards) 설정(`cardShape`, `editorShape`)과 key를 통한 바인딩. +- 문서화된 템플릿 callback을 사용한 카드 템플릿, 컨텍스트 메뉴, 컬럼 헤더 [커스터마이즈](guides/customization.md). +- CSS 변수와 조건부 CSS 클래스를 사용한 컬럼, 행, 카드 [스타일링](guides/stylization.md). +- 내장 locale 객체 또는 사용자 정의 locale 객체를 사용한 Kanban 및 Toolbar 인터페이스 [로컬라이제이션](guides/localization.md). +- 데이터 API를 통한 카드, 컬럼, 행, 링크, 댓글의 [로드, 내보내기, 수정](guides/working_with_data.md). +- `RestDataProvider`를 통한 [REST 백엔드](guides/working_with_server.md) 연결, 또는 WebSocket으로 변경 사항을 동기화하는 멀티유저 보드 구성. +- Gantt, Scheduler 같은 다른 DHTMLX 위젯이나 [React](guides/integration_with_react.md), [Vue](guides/integration_with_vue.md), [Angular](guides/integration_with_angular.md), [Svelte](guides/integration_with_svelte.md)와의 Kanban [통합](guides/integration.md). + +## Kanban 프롬프트가 MCP에서 일으키는 동작 + +DHTMLX MCP 서버는 Model Context Protocol(MCP) 위에 구성된 Retrieval-Augmented Generation(RAG) 파이프라인으로 Kanban 관련 질문에 답하며, 각 요청을 두 가지 워크플로로 나눕니다. *Search*는 어시스턴트가 참고할 레퍼런스 페이지를 찾아오고, *Inference*는 해당 페이지를 직접 읽어 완성된 답변을 제공합니다. 그에 앞서 어시스턴트는 요청 중 실제로 문서 조회가 필요한 부분을 먼저 가려내고, 나머지는 자체 지식으로 처리합니다. + +*"사용자가 새 카드를 추가할 때 백엔드 데이터베이스와 자동으로 동기화되도록 DHTMLX Kanban을 연결하려면 어떻게 해야 하나요?"* 라는 프롬프트를 예로 살펴보겠습니다: + +1. 어시스턴트가 문서가 필요한 부분을 식별합니다: `RestDataProvider`가 새 카드를 서버와 동기화하는 방식. +2. 서버가 이를 서버 통합 문서와 매칭합니다. +3. 답변에 코드 생성이 필요하므로 요청은 *Search*로 전달됩니다(정답이 하나인 질문이라면 대신 *Inference*로 갑니다). +4. *Search*가 최신 Kanban 문서로 구축된 벡터 인덱스에서 해당 페이지를 가져옵니다. +5. 어시스턴트가 그 페이지들을 컨텍스트로 받습니다. +6. 그 컨텍스트를 바탕으로 어시스턴트는 `add-card` 작업에 맞게 `RestDataProvider`를 구성하고, 백엔드에 특화된 요청 세부 사항은 Kanban API를 추측하는 대신 자체 지식으로 채웁니다. + +덕분에 Kanban 코드 제안은 현재 동작하는 API에 맞춰 유지됩니다. + +## 도구별 MCP 서버 등록 + +터미널을 쓰든 설정 파일을 쓰든, 두 방법 모두 아래 URL을 도구에 지정하는 것입니다. 한 번 등록해 두면 해당 도구에서 만드는 모든 Kanban 보드에서 서버를 사용할 수 있습니다. + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +가장 많이 쓰이는 도구들의 설정 방법은 아래와 같습니다. + +### Claude Code + +:::info +MCP 서버를 등록하는 모든 방법은 Claude Code의 [공식 문서](https://code.claude.com/docs/en/mcp)를 참고하세요. +::: + +명령줄에서 서버를 등록하려면 다음을 실행합니다: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +직접 설정하려면 `.mcp.json`에 다음 항목을 추가합니다: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +Cursor가 지원하는 모든 MCP 설정 방법은 [공식 문서](https://cursor.com/en-US/docs/mcp)에서 확인하세요. +::: + +서버를 추가하는 순서: + +1. Settings를 엽니다(Mac에서는 `Cmd+Shift+J`, Windows/Linux에서는 `Ctrl+Shift+J`) +2. **Tools & MCP**로 이동합니다 +3. **Add Custom MCP**를 클릭합니다 +4. 다음 설정을 붙여 넣습니다: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity + +#### Antigravity 2.0 + +:::info +Antigravity의 MCP 연동에 대한 자세한 내용은 [공식 문서](https://antigravity.google/docs/mcp)에 있습니다. +::: + +DHTMLX MCP 서버를 Google Antigravity에 연결하려면 다음 단계를 수행합니다: + +1. 명령 팔레트를 엽니다 +2. "mcp add"를 입력합니다 +3. "HTTP"를 선택합니다 +4. 다음 값을 입력합니다: +- 이름: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI + +:::info +[관련 가이드](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)에서 Gemini CLI에서 Antigravity CLI로 마이그레이션하는 방법을 다룹니다. +::: + +DHTMLX MCP 서버를 Antigravity CLI에 연결하려면 다음 위치 중 하나에 `mcp_config.json`을 생성합니다: + +- 전역: `~/.gemini/config/mcp_config.json` +- 워크스페이스: `.agents/mcp_config.json` + +다음 설정을 추가합니다: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +그런 다음 터미널에서 `agy`를 실행합니다. + +### ChatGPT + +:::info +ChatGPT의 [공식 문서](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt)에서 MCP 커넥터 설정 전체 과정을 안내합니다. +::: + +커넥터 설정 순서: + +1. **Settings** → **Apps & Connectors**로 이동합니다 +2. **Advanced settings**를 클릭합니다 +3. **Developer mode**를 활성화합니다 +4. **Apps & Connectors**로 돌아와 "Create"를 클릭합니다 +5. 커넥터 정보를 입력합니다: +- 이름: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- 인증: `No authentication` +6. **Create**를 클릭합니다 + +커넥터를 만들고 나면 ChatGPT는 대화 중에 MCP 서버에서 문서를 가져옵니다. + +:::info +코딩 작업이 많은 워크플로에는 다른 MCP 지원 도구가 더 적합할 수 있습니다. +::: + +### 그 밖의 도구 + +여기에 별도 항목이 없는 도구들도 대부분 MCP를 지원하며, 설정에서 "Model Context Protocol" 또는 "Context Sources"로 표시되는 경우가 많습니다. 그곳에 `https://docs.dhtmlx.com/mcp`를 사용자 지정 소스로 추가하세요. + +## MCP 서버가 데이터를 다루는 방식 + +MCP 서버는 호스팅형 서비스입니다. 사용자의 컴퓨터에서는 아무것도 실행되지 않고, 프로젝트 파일을 읽지 않으며, 개인 정보를 저장하지 않습니다. + +디버깅과 서비스 개선 과정에서 쿼리가 기록될 수 있습니다. + +더 엄격한 개인정보 보호 요건이 필요한 조직은 쿼리 로깅을 끈 상용 배포를 요청할 수 있습니다. 자세한 내용은 `info@dhtmlx.com`으로 문의하세요. + +## 바로 쓸 수 있는 Kanban 보드 프롬프트 + +아래 프롬프트는 대상 API 영역별로 묶여 있습니다. 필요한 것을 가져다 자신의 보드에 맞게 세부 사항만 바꿔 사용하세요. + +**카드, 컬럼, 스윔레인** + +~~~ +DHTMLX Kanban에서 사용자가 카드를 컬럼과 행 사이로 드래그할 수 있게 하려면 어떻게 해야 하나요? 문서를 참고해 주세요. +~~~ +~~~ +특정 컬럼이나 스윔레인에 들어갈 수 있는 카드 수를 제한하려면 어떻게 해야 하나요? +~~~ +~~~ +Kanban API로 카드를 복제하고 복사본을 다른 행으로 옮기려면 어떻게 해야 하나요? +~~~ + +**에디터와 필드 타입** + +~~~ +사용자 정의 에디터 필드를 카드 필드에 바인딩해 카드와 에디터 양쪽에 표시되게 하려면 어떻게 해야 하나요? +~~~ +~~~ +DHTMLX Kanban 에디터에서 사용자 아바타가 있는 multiselect 필드를 설정하려면 어떻게 해야 하나요? +~~~ +~~~ +DHTMLX Kanban 에디터에서 debounce 지연을 적용한 자동 저장을 활성화하려면 어떻게 해야 하나요? +~~~ + +**Toolbar와 보드 컨트롤** + +~~~ +Kanban Toolbar에 사용자 정의 검색 컨트롤을 추가하고 보드에 연결하려면 어떻게 해야 하나요? +~~~ +~~~ +DHTMLX Kanban Toolbar에서 undo와 redo 컨트롤을 제거하려면 어떻게 해야 하나요? +~~~ + +**REST 및 멀티유저 동기화** + +~~~ +DHTMLX Kanban을 Go 백엔드에 연결하고 초기 데이터를 로드하려면 어떻게 해야 하나요? +~~~ +~~~ +DHTMLX Kanban이 특정 작업을 백엔드와 동기화하는 방식을 커스터마이즈하려면 어떻게 해야 하나요? +~~~ +~~~ +WebSocket으로 변경 사항을 실시간 동기화하는 멀티유저 DHTMLX Kanban 보드를 구성하려면 어떻게 해야 하나요? +~~~ + +## Kanban 프롬프트로 더 나은 결과 얻기 + +- **대상 요소를 명확히 지정하세요.** 보드, 컬럼, 행(스윔레인), 카드를 구분해서 표현하세요(예: "Kanban 보드에서", "특정 행에 대해", "Testing 컬럼의 카드에서"). 대상이 분명할수록 서버가 알맞은 레퍼런스 페이지를 찾아냅니다. +- **필드 타입을 지정하세요.** `cardShape`와 `editorShape`는 combo, multiselect, color, date, files 등 다양한 필드 타입을 지원합니다. 그냥 "필드"라고 하지 말고 타입을 명시하면(예: "아바타가 있는 multiselect 필드") 어시스턴트가 해당 설정 레퍼런스를 가져옵니다. +- **프롬프트에 "문서를 참고해 주세요"를 덧붙이세요.** 이 표현은 학습 데이터만으로 답하지 말고 MCP 조회를 수행하라는 신호가 됩니다. API가 바뀌었을 가능성이 큰 `RestDataProvider` 핸들러와 필드 설정에서 특히 중요합니다. +- **클라이언트 작업인지 서버 작업인지 밝히세요.** Kanban은 로컬 데이터로도, `RestDataProvider` 기반 REST API로도 동작합니다. 어느 쪽인지 언급하면(예: "RestDataProvider를 사용해서" 또는 "백엔드 없이") 어시스턴트가 클라이언트 전용 예제에 REST 전용 호출을 섞지 않습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md index b9ff2d7..49be2db 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/how_to_start.md @@ -126,4 +126,4 @@ new kanban.Toolbar("#toolbar", { ## 다음 단계 -이제 끝입니다. 세 단계만 거치면 시각적으로 워크플로우를 관리할 수 있는 편리한 도구를 갖추게 됩니다. 이제 작업을 시작하거나 JavaScript Kanban의 다양한 기능을 더 탐색해 볼 수 있습니다. \ No newline at end of file +이제 끝입니다. 세 단계만 거치면 시각적으로 워크플로우를 관리할 수 있는 편리한 도구를 갖추게 됩니다. 이제 작업을 시작하거나 JavaScript Kanban의 다양한 기능을 더 탐색해 볼 수 있습니다. AI 코딩 어시스턴트로 개발하고 있나요? [DHTMLX MCP 서버](guides/mcp-server.md)를 통해 최신 문서를 참조하도록 연결해 보세요. \ No newline at end of file diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/howtos.md b/i18n/ko/docusaurus-plugin-content-docs/current/howtos.md index 1002c9e..86f1f6d 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/howtos.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/howtos.md @@ -19,6 +19,7 @@ description: DHTMLX JavaScript Kanban 라이브러리의 How-tos 페이지를 | [사용자 정의](guides/customization.md) | Kanban을 커스터마이즈하는 방법을 알아보세요 | | [스타일링](guides/stylization.md) | Kanban을 스타일링하는 방법을 알아보세요 | | [로컬라이제이션](guides/localization.md) | Kanban을 현지화하는 방법을 알아보세요 ([예제](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban))| +| [DHTMLX MCP 서버](guides/mcp-server.md) | AI 코딩 어시스턴트를 최신 Kanban 문서에 연결하세요 | ## API 참조 diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/index.md b/i18n/ko/docusaurus-plugin-content-docs/current/index.md index 5e40d69..4b9b176 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/index.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/index.md @@ -70,4 +70,4 @@ import editor from '@site/static/img/js_kanban_editor.png'; ## 다음 단계 -이제 Kanban을 애플리케이션에 적용할 준비가 되었습니다. 자세한 안내는 [How to start](how_to_start.md) 튜토리얼을 참고하세요. \ No newline at end of file +이제 Kanban을 애플리케이션에 적용할 준비가 되었습니다. 자세한 안내는 [How to start](how_to_start.md) 튜토리얼을 참고하세요. AI 코딩 어시스턴트로 개발한다면 [DHTMLX MCP 서버](guides/mcp-server.md)를 통해 최신 문서에 연결하세요. \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/.sync b/i18n/ru/docusaurus-plugin-content-docs/current/.sync index 8aac28e..e714429 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -405a08daeac3963e8235e7fb505368c0cbd880db +a66b660fd836ea9463cf50670fe46a57aab3dd68 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/mcp-server.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/mcp-server.md new file mode 100644 index 0000000..addc5e4 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,254 @@ +--- +sidebar_label: MCP-сервер DHTMLX +title: Интеграция DHTMLX Kanban с MCP для досок и REST-синхронизации +description: MCP-сервер даёт AI-инструментам доступ к актуальной документации DHTMLX Kanban — карточки, колонки, строки, поля редактора и REST-синхронизация данных. +--- + +# MCP-сервер DHTMLX Kanban: карточки, редактор и REST-синхронизация + +Рабочая доска [DHTMLX Kanban](/) складывается из нескольких частей, которые должны быть согласованы между собой: поля карточки и редактора [связываются общим ключом](guides/configuration.md#bind-editor-fields-to-card-fields), [Toolbar](guides/customization.md#custom-toolbar) работает как отдельный виджет, привязанный к доске, а [синхронизация с сервером](guides/working_with_server.md) опирается на конкретный набор обработчиков действий. Сгенерированный код оказывается рабочим тогда, когда в нём совпадают ключи полей карточки и редактора, Toolbar подключён отдельно, а синхронизация с сервером построена на сегодняшних обработчиках действий, а не на срезе из обучающей выборки. + +MCP-сервер DHTMLX заставляет ассистента работать с актуальной документацией Kanban, а не строить догадки. Спросите про [привязку полей редактора к полям карточки](guides/configuration.md#bind-editor-fields-to-card-fields), [кастомизацию Toolbar](guides/customization.md#custom-toolbar) или [подключение backend через RestDataProvider](guides/working_with_server.md) — и ассистент подтянет актуальный справочник, прежде чем писать код. + +### MCP-эндпоинт + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +MCP-сервер DHTMLX охватывает все основные продукты DHTMLX, а не только DHTMLX Kanban. Один и тот же эндпоинт и одни и те же инструкции по настройке работают независимо от того, с каким компонентом DHTMLX вы собираете приложение. +::: + +## Документация Kanban через MCP-сервер + +Внутри сервер хранит полный индекс документации DHTMLX Kanban и готов обрабатывать запросы вроде таких: + +- Поиск актуального API Kanban — [методы](api/overview/methods_overview.md), [события](api/overview/events_overview.md) и [свойства](api/overview/properties_overview.md), включая сигнатуры и значения по умолчанию. +- Генерация готового к запуску кода [инициализации](guides/initialization.md) как для доски Kanban, так и для отдельного конструктора Toolbar. +- Настройка [полей карточки и редактора](guides/configuration.md#cards) (`cardShape`, `editorShape`) и их связывание по ключу, включая типы полей combo, multiselect, color, date и files. +- [Кастомизация](guides/customization.md) шаблонов карточек, контекстных меню и заголовков колонок через описанные в документации калбэки шаблонов. +- [Стилизация](guides/stylization.md) колонок, строк и карточек с помощью CSS-переменных и условных CSS-классов. +- [Локализация](guides/localization.md) интерфейсов Kanban и Toolbar через встроенные или собственные объекты локали. +- [Загрузка, экспорт и изменение](guides/working_with_data.md) карточек, колонок, строк, связей и комментариев через API данных. +- Подключение [REST-backend](guides/working_with_server.md) через `RestDataProvider` или настройка мультипользовательской доски, которая синхронизирует изменения по WebSocket. +- [Интеграция](guides/integration.md) Kanban с другими виджетами DHTMLX, такими как Gantt и Scheduler, или с [React](guides/integration_with_react.md), [Vue](guides/integration_with_vue.md), [Angular](guides/integration_with_angular.md) и [Svelte](guides/integration_with_svelte.md). + +## Что запрос про Kanban запускает в MCP + +MCP-сервер DHTMLX отвечает на вопросы по Kanban через пайплайн Retrieval-Augmented Generation (RAG), построенный поверх Model Context Protocol (MCP), и распределяет каждый запрос между двумя сценариями: *Search* подбирает подходящие страницы справочника, на которые опирается ассистент, а *Inference* сам читает эти страницы и выдаёт готовый ответ. Но прежде всего ассистент выделяет ту часть запроса, для которой действительно нужно обращение к документации, а остальное берёт из собственных знаний. + +Разберём по шагам на примере запроса *«Как подключить DHTMLX Kanban так, чтобы при добавлении пользователем новой карточки она автоматически синхронизировалась с моей базой данных на backend?»*: + +1. Ассистент выделяет часть, для которой нужна документация: как `RestDataProvider` синхронизирует новую карточку с сервером. +2. Сервер сопоставляет это с документацией по интеграции с сервером. +3. Поскольку ответ требует генерации кода, запрос уходит в *Search* (вопрос с одним правильным ответом вместо этого попал бы в *Inference*). +4. *Search* достаёт подходящие страницы из векторного индекса, построенного на актуальной документации Kanban. +5. Ассистент получает эти страницы обратно в качестве контекста. +6. На основе этого контекста ассистент настраивает `RestDataProvider` для операции `add-card`, а специфичные для вашего backend детали запроса дополняет из собственных знаний — вместо того чтобы гадать об API Kanban. + +Предлагаемый код для Kanban остаётся согласованным с тем API, который работает сегодня. + +## Регистрация MCP-сервера в разных инструментах + +Через терминал или через файл конфигурации — в обоих случаях вы указываете инструменту приведённый ниже URL, и после регистрации сервер доступен для любой доски Kanban, которую вы собираете в этом инструменте. + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Ниже описаны шаги настройки для самых распространённых инструментов. + +### Claude Code + +:::info +Все поддерживаемые способы регистрации MCP-сервера описаны в [документации](https://code.claude.com/docs/en/mcp) самого Claude Code. +::: + +Чтобы зарегистрировать сервер из командной строки, выполните: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Настраиваете вручную? Добавьте такую запись в `.mcp.json`: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +Все способы настройки MCP, которые поддерживает Cursor, описаны в его [официальной документации](https://cursor.com/en-US/docs/mcp). +::: + +Шаги для добавления сервера: + +1. Откройте Settings (`Cmd+Shift+J` на Mac, `Ctrl+Shift+J` на Windows/Linux) +2. Перейдите в **Tools & MCP** +3. Нажмите **Add Custom MCP** +4. Вставьте следующую конфигурацию: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity + +#### Antigravity 2.0 + +:::info +Полное описание интеграции с MCP для Antigravity приведено в [официальной документации](https://antigravity.google/docs/mcp). +::: + +Чтобы подключить MCP-сервер DHTMLX к Google Antigravity, выполните следующие шаги: + +1. Откройте палитру команд +2. Введите "mcp add" +3. Выберите "HTTP" +4. Укажите следующие значения: +- Имя: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI + +:::info +[Отдельное руководство](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) описывает переход с Gemini CLI на Antigravity CLI. +::: + +Чтобы подключить MCP-сервер DHTMLX к Antigravity CLI, создайте `mcp_config.json` в одном из этих мест: + +- Глобально: `~/.gemini/config/mcp_config.json` +- В рабочей области: `.agents/mcp_config.json` + +Добавьте следующую конфигурацию: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +Затем выполните `agy` в терминале. + +### ChatGPT + +:::info +[Официальная документация](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) ChatGPT подробно описывает настройку MCP-коннектора. +::: + +Шаги настройки коннектора: + +1. Перейдите в **Settings** → **Apps & Connectors** +2. Нажмите **Advanced settings** +3. Включите **Developer mode** +4. Вернитесь в **Apps & Connectors** и нажмите "Create" +5. Заполните данные коннектора: +- Имя: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- Аутентификация: `No authentication` +6. Нажмите **Create** + +После создания коннектора ChatGPT подтягивает документацию с MCP-сервера прямо во время диалога. + +:::info +Для интенсивной работы с кодом лучше подойдут другие инструменты с поддержкой MCP. +::: + +### Другие инструменты + +Инструменты, для которых здесь нет отдельного раздела, обычно тоже поддерживают MCP — в настройках это чаще всего называется "Model Context Protocol" или "Context Sources". Добавьте туда `https://docs.dhtmlx.com/mcp` как пользовательский источник. + +## Что MCP-сервер делает с вашими данными + +MCP-сервер — это размещённый на нашей стороне сервис: на вашей машине ничего не запускается, файлы вашего проекта не читаются, персональные данные не сохраняются. + +При отладке и работе над улучшением сервиса запросы могут логироваться. + +При более строгих требованиях к приватности организации могут запросить коммерческое развёртывание с отключённым логированием запросов. За подробностями пишите на `info@dhtmlx.com`. + +## Готовые запросы для доски Kanban + +Запросы ниже сгруппированы по той части API, к которой они относятся. Возьмите подходящий и подстройте детали под свою доску. + +**Карточки, колонки и строки** + +~~~ +Как разрешить пользователям перетаскивать карточки между колонками и строками в DHTMLX Kanban? Используй документацию. +~~~ +~~~ +Как ограничить количество карточек в конкретной колонке или строке? +~~~ +~~~ +Как продублировать карточку и переместить копию в другую строку средствами API Kanban? +~~~ + +**Редактор и типы полей** + +~~~ +Как привязать собственное поле редактора к полю карточки, чтобы оно отображалось и на карточке, и в редакторе? +~~~ +~~~ +Как настроить поле multiselect с аватарами пользователей в редакторе DHTMLX Kanban? +~~~ +~~~ +Как включить автосохранение с задержкой debounce в редакторе DHTMLX Kanban? +~~~ + +**Toolbar и элементы управления доской** + +~~~ +Как добавить собственный элемент поиска в Toolbar Kanban и связать его с доской? +~~~ +~~~ +Как убрать кнопки undo и redo из Toolbar DHTMLX Kanban? +~~~ + +**REST и мультипользовательская синхронизация** + +~~~ +Как подключить DHTMLX Kanban к backend на Go и загрузить начальные данные? +~~~ +~~~ +Как настроить, каким образом DHTMLX Kanban синхронизирует конкретное действие с моим backend? +~~~ +~~~ +Как настроить мультипользовательскую доску DHTMLX Kanban, которая синхронизирует изменения в реальном времени по WebSocket? +~~~ + +## Как получить более точные ответы по Kanban + +- **Называйте целевой элемент.** Различайте доску, колонку, строку (swimlane) и карточку (например, "на доске Kanban", "для конкретной строки", "на карточке в колонке Testing"). Точно названная цель помогает серверу подобрать нужные страницы справочника. +- **Указывайте тип поля.** `cardShape` и `editorShape` поддерживают множество типов полей (combo, multiselect, color, date, files). Называйте тип явно (например, "поле multiselect с аватарами") вместо просто "поле" — тогда ассистент подтянет подходящий раздел конфигурации. +- **Добавляйте "Используй документацию"** в запрос. Эта фраза подсказывает ассистенту, что нужно обратиться к MCP, а не отвечать только по данным обучения. Особенно это важно для обработчиков `RestDataProvider` и конфигурации полей, где API меняется чаще всего. +- **Уточняйте, где выполняется операция — на клиенте или на сервере.** Kanban работает как с локальными данными, так и с REST API через `RestDataProvider`. Укажите, что именно вам нужно (например, "через RestDataProvider" или "без backend"), чтобы ассистент не подмешивал специфичные для REST вызовы в клиентский пример. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md index da562a4..437f9e8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/how_to_start.md @@ -126,4 +126,4 @@ new kanban.Toolbar("#toolbar", { ## Что дальше -Вот и все. Всего три простых шага - и у вас есть удобный инструмент для визуализации и управления рабочими процессами. Теперь вы можете приступить к работе со своими задачами или продолжить изучение возможностей JavaScript Kanban. \ No newline at end of file +Вот и все. Всего три простых шага - и у вас есть удобный инструмент для визуализации и управления рабочими процессами. Теперь вы можете приступить к работе со своими задачами или продолжить изучение возможностей JavaScript Kanban. Разрабатываете с AI-ассистентом? Направьте его на актуальную документацию через [MCP-сервер DHTMLX](guides/mcp-server.md). \ No newline at end of file diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/howtos.md b/i18n/ru/docusaurus-plugin-content-docs/current/howtos.md index 028da1b..262ca3e 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/howtos.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/howtos.md @@ -19,6 +19,7 @@ description: На этой странице документации библи | [Кастомизация](guides/customization.md) | Узнайте, как кастомизировать Kanban | | [Стилизация](guides/stylization.md) | Узнайте, как стилизовать Kanban | | [Локализация](guides/localization.md) | Узнайте, как локализовать Kanban ([Пример](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban))| +| [MCP-сервер DHTMLX](guides/mcp-server.md) | Подключите AI-ассистента к актуальной документации Kanban | ## Справочник API diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/index.md b/i18n/ru/docusaurus-plugin-content-docs/current/index.md index 5b6a799..b74ffa6 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/index.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/index.md @@ -71,4 +71,4 @@ import editor from '@site/static/img/js_kanban_editor.png'; ## Что дальше -Теперь вы можете приступить к использованию Kanban в своём приложении. Следуйте инструкциям из руководства [Как начать](how_to_start.md) для получения подробной информации. \ No newline at end of file +Теперь вы можете приступить к использованию Kanban в своём приложении. Следуйте инструкциям из руководства [Как начать](how_to_start.md) для получения подробной информации. Если вы разрабатываете с AI-ассистентом, подключите его к актуальной документации через [MCP-сервер DHTMLX](guides/mcp-server.md). \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/.sync b/i18n/zh/docusaurus-plugin-content-docs/current/.sync index 8aac28e..e714429 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -405a08daeac3963e8235e7fb505368c0cbd880db +a66b660fd836ea9463cf50670fe46a57aab3dd68 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/mcp-server.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/mcp-server.md new file mode 100644 index 0000000..adb66c4 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,254 @@ +--- +sidebar_label: DHTMLX MCP 服务器 +title: 面向看板与 REST 同步的 DHTMLX Kanban MCP 集成 +description: MCP 服务器让 AI 工具能够访问最新的 DHTMLX Kanban 文档，涵盖卡片、列、泳道、编辑器字段以及 REST 数据同步。 +--- + +# DHTMLX Kanban MCP 服务器：卡片、编辑器与 REST 同步 + +一个真正可用的 [DHTMLX Kanban](/) 看板依赖多个部分的正确配合：卡片字段与编辑器字段需要[共用同一个 key](guides/configuration.md#bind-editor-fields-to-card-fields)，[Toolbar](guides/customization.md#custom-toolbar) 作为独立的 widget 绑定到看板上运行，而[服务器同步](guides/working_with_server.md)则依赖一组特定的操作处理器。只有当卡片字段与编辑器字段使用相同的 key、Toolbar 单独接入、服务器同步基于当前的操作处理器（而不是训练时的旧快照）时，生成的代码才站得住脚。 + +DHTMLX MCP 服务器让助手基于最新的 Kanban 文档工作，而不是凭猜测作答。无论您询问[将编辑器字段绑定到卡片字段](guides/configuration.md#bind-editor-fields-to-card-fields)、[自定义 Toolbar](guides/customization.md#custom-toolbar)，还是[接入 RestDataProvider 后端](guides/working_with_server.md)，助手都会先取回最新的参考文档，然后再编写代码。 + +### MCP 端点 + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 服务器覆盖所有主要的 DHTMLX 产品，而不仅仅是 DHTMLX Kanban。无论您使用哪个 DHTMLX 组件进行开发，端点和配置方法都完全相同。 +::: + +## 通过 MCP 服务器获取 Kanban 文档 + +在底层，服务器维护着一份完整的 DHTMLX Kanban 文档索引，可随时响应以下这类请求： + +- 查询 Kanban [方法](api/overview/methods_overview.md)、[事件](api/overview/events_overview.md)和[属性](api/overview/properties_overview.md)的最新 API，包括签名和默认值。 +- 为 Kanban 看板以及独立的 Toolbar 构造函数生成可直接运行的[初始化](guides/initialization.md)代码。 +- 配置[卡片与编辑器字段](guides/configuration.md#cards)（`cardShape`、`editorShape`）并通过 key 进行绑定，包括 combo、multiselect、color、date 和 files 等字段类型。 +- 使用文档中的模板 callback [自定义](guides/customization.md)卡片模板、右键菜单和列标题。 +- 通过 CSS 变量和条件 CSS 类[美化](guides/stylization.md)列、行和卡片。 +- 使用内置或自定义的 locale 对象[本地化](guides/localization.md) Kanban 和 Toolbar 界面。 +- 通过数据 API [加载、导出和修改](guides/working_with_data.md)卡片、列、行、链接和评论。 +- 通过 `RestDataProvider` 接入 [REST 后端](guides/working_with_server.md)，或搭建通过 WebSocket 同步变更的多用户看板。 +- 将 Kanban 与 Gantt、Scheduler 等其他 DHTMLX widget [集成](guides/integration.md)，或与 [React](guides/integration_with_react.md)、[Vue](guides/integration_with_vue.md)、[Angular](guides/integration_with_angular.md) 和 [Svelte](guides/integration_with_svelte.md) 集成。 + +## 一条 Kanban 提示词在 MCP 中触发了什么 + +DHTMLX MCP 服务器基于 Model Context Protocol（MCP）之上的检索增强生成（RAG）流水线来回答 Kanban 问题，并把每个请求分配给两种工作流：*Search* 负责取回匹配的参考页面供助手参考，*Inference* 则自行阅读这些页面并直接给出答案。在此之前，助手会先判断请求中哪一部分确实需要查阅文档，其余部分则用自身知识回答。 + +以提示词 *“如何接入 DHTMLX Kanban，让用户新增卡片时自动与我的后端数据库同步？”* 为例： + +1. 助手识别出需要查阅文档的部分：`RestDataProvider` 如何把新卡片同步到服务器。 +2. 服务器将其匹配到服务器集成相关的文档。 +3. 由于作答需要生成代码，请求交由 *Search* 处理（只有唯一正确答案的问题则会交给 *Inference*）。 +4. *Search* 从基于最新 Kanban 文档构建的向量索引中取出匹配页面。 +5. 助手收到这些页面作为上下文。 +6. 助手依据该上下文为 `add-card` 操作配置 `RestDataProvider`，再用自身知识补全与后端相关的请求细节，而不是去猜测 Kanban API。 + +这样一来，Kanban 的代码建议始终与当前生效的 API 保持一致。 + +## 在各类工具中注册 MCP 服务器 + +无论您习惯使用终端还是配置文件，两种方式都是把工具指向下面这个 URL；注册完成后，您在该工具中构建的每一个 Kanban 看板都能访问它。 + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +下面列出了常用工具的配置步骤。 + +### Claude Code + +:::info +注册 MCP 服务器的所有受支持方式，请参见 Claude Code 自己的[文档](https://code.claude.com/docs/en/mcp)。 +::: + +若要从命令行注册服务器，请运行： + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +想手动配置？把下面这段内容添加到 `.mcp.json` 中： + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +Cursor 支持的全部 MCP 配置方式，请查看其[官方文档](https://cursor.com/en-US/docs/mcp)。 +::: + +添加服务器的步骤： + +1. 打开 Settings（Mac 上为 `Cmd+Shift+J`，Windows/Linux 上为 `Ctrl+Shift+J`） +2. 进入 **Tools & MCP** +3. 点击 **Add Custom MCP** +4. 粘贴以下配置： + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity + +#### Antigravity 2.0 + +:::info +Antigravity 的完整 MCP 集成说明见[官方文档](https://antigravity.google/docs/mcp)。 +::: + +将 DHTMLX MCP 服务器接入 Google Antigravity 的步骤如下： + +1. 打开命令面板 +2. 输入 “mcp add” +3. 选择 “HTTP” +4. 填入以下值： +- 名称： +~~~jsx +dhtmlx-mcp +~~~ +- URL： +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI + +:::info +[相关指南](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)介绍了从 Gemini CLI 迁移到 Antigravity CLI 的方法。 +::: + +若要将 DHTMLX MCP 服务器接入 Antigravity CLI，请在以下位置之一创建 `mcp_config.json`： + +- 全局：`~/.gemini/config/mcp_config.json` +- 工作区：`.agents/mcp_config.json` + +添加以下配置： + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +然后在终端中运行 `agy`。 + +### ChatGPT + +:::info +ChatGPT 的[官方文档](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt)完整介绍了 MCP 连接器的配置流程。 +::: + +配置连接器的步骤： + +1. 进入 **Settings** → **Apps & Connectors** +2. 点击 **Advanced settings** +3. 启用 **Developer mode** +4. 返回 **Apps & Connectors** 并点击 “Create” +5. 填写连接器信息： +- 名称： +~~~jsx +dhtmlx-mcp +~~~ +- URL： +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- 身份验证：`No authentication` +6. 点击 **Create** + +创建连接器后，ChatGPT 会在对话过程中从 MCP 服务器拉取文档。 + +:::info +对于高强度的编码工作流，其他支持 MCP 的工具可能更合适。 +::: + +### 其他工具 + +本文未单独列出的工具通常同样支持 MCP，在设置中一般标注为 “Model Context Protocol” 或 “Context Sources”。在那里把 `https://docs.dhtmlx.com/mcp` 添加为自定义来源即可。 + +## MCP 服务器如何处理您的数据 + +MCP 服务器是一项托管服务：您的机器上不运行任何程序，不读取项目中的任何文件，也不存储任何个人数据。 + +在调试和改进服务的过程中，查询可能会被记录。 + +如有更严格的隐私要求，企业可申请关闭查询日志的商业部署方案。详情请联系 `info@dhtmlx.com`。 + +## 可直接借用的 Kanban 看板提示词 + +下列提示词按其针对的 API 部分分组。挑一条拿来用，再根据自己的看板调整细节即可。 + +**卡片、列与泳道** + +~~~ +在 DHTMLX Kanban 中，如何让用户把卡片在列和行之间拖动？请查阅文档。 +~~~ +~~~ +如何限制某个特定列或泳道中允许放置的卡片数量？ +~~~ +~~~ +如何使用 Kanban API 复制一张卡片，并把副本移动到另一行？ +~~~ + +**编辑器与字段类型** + +~~~ +如何把自定义编辑器字段绑定到卡片字段，使其同时显示在卡片上和编辑器中？ +~~~ +~~~ +如何在 DHTMLX Kanban 编辑器中配置带用户头像的 multiselect 字段？ +~~~ +~~~ +如何在 DHTMLX Kanban 编辑器中启用带 debounce 延迟的自动保存？ +~~~ + +**Toolbar 与看板控件** + +~~~ +如何为 Kanban Toolbar 添加自定义搜索控件并将其绑定到看板？ +~~~ +~~~ +如何从 DHTMLX Kanban Toolbar 中移除撤销和重做控件？ +~~~ + +**REST 与多用户同步** + +~~~ +如何把 DHTMLX Kanban 接入 Go 后端并加载初始数据？ +~~~ +~~~ +如何自定义 DHTMLX Kanban 将某个特定操作同步到我的后端的方式？ +~~~ +~~~ +如何搭建一个通过 WebSocket 实时同步变更的多用户 DHTMLX Kanban 看板？ +~~~ + +## 让 Kanban 提示词得到更好的结果 + +- **明确指出目标元素。** 区分看板、列、行（泳道）和卡片（例如“在 Kanban 看板上”“针对某一特定行”“在 Testing 列的某张卡片上”）。目标越明确，服务器越能检索到正确的参考页面。 +- **指明字段类型。** `cardShape` 和 `editorShape` 支持多种字段类型（combo、multiselect、color、date、files）。与其笼统地说“一个字段”，不如明确类型（例如“带头像的 multiselect 字段”），这样助手才会取回对应的配置参考。 +- **在提示词中加上“请查阅文档”。** 这句话会提示助手触发 MCP 查询，而不是仅凭训练数据作答。对于 `RestDataProvider` 处理器和字段配置这类 API 最可能发生变化的内容，这一点尤其重要。 +- **说明操作发生在客户端还是服务器端。** Kanban 既能处理本地数据，也能通过 `RestDataProvider` 对接 REST API。请指明适用哪一种（例如“使用 RestDataProvider”或“不使用后端”），以免助手把 REST 专用的调用混进纯客户端示例中。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md index 24b4bd6..03bcd6b 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/how_to_start.md @@ -126,4 +126,4 @@ new kanban.Toolbar("#toolbar", { ## 下一步 -就这么简单。只需三个简单的步骤，您就拥有了一个可视化和管理工作流程的便捷工具。现在，您可以开始管理任务，或继续深入探索 JavaScript Kanban 的更多功能。 \ No newline at end of file +就这么简单。只需三个简单的步骤，您就拥有了一个可视化和管理工作流程的便捷工具。现在，您可以开始管理任务，或继续深入探索 JavaScript Kanban 的更多功能。使用 AI 编码助手开发？通过 [DHTMLX MCP 服务器](guides/mcp-server.md)让它随时查阅最新文档。 \ No newline at end of file diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/howtos.md b/i18n/zh/docusaurus-plugin-content-docs/current/howtos.md index 3ff46ba..cf2a6ce 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/howtos.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/howtos.md @@ -19,6 +19,7 @@ description: 您可以在 DHTMLX JavaScript Kanban 库的文档中浏览 How-tos | [自定义](guides/customization.md) | 学习如何自定义 Kanban | | [样式化](guides/stylization.md) | 学习如何美化 Kanban | | [本地化](guides/localization.md) | 学习如何本地化 Kanban ([示例](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban))| +| [DHTMLX MCP 服务器](guides/mcp-server.md) | 将 AI 编码助手连接到最新的 Kanban 文档 | ## API 参考 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/index.md b/i18n/zh/docusaurus-plugin-content-docs/current/index.md index 42f22fd..ad236fa 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/index.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/index.md @@ -70,4 +70,4 @@ import editor from '@site/static/img/js_kanban_editor.png'; ## 下一步 -现在，您可以在应用程序中开始使用 Kanban 了。请参考[快速开始](how_to_start.md)教程获取指导。 \ No newline at end of file +现在，您可以在应用程序中开始使用 Kanban 了。请参考[快速开始](how_to_start.md)教程获取指导。如果您使用 AI 编码助手进行开发，可以通过 [DHTMLX MCP 服务器](guides/mcp-server.md)将其连接到最新文档。 \ No newline at end of file