diff --git a/i18n/de/docusaurus-plugin-content-docs/current/.sync b/i18n/de/docusaurus-plugin-content-docs/current/.sync index cc1de29..2391de8 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/de/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -5d5226c50afe6c42d0bd689f6b9f8009102fa397 +bf44108f9d10711389fcfd29a83523477cf66f14 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..180aa95 --- /dev/null +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,251 @@ +--- +sidebar_label: DHTMLX MCP server +title: DHTMLX Booking MCP-Integration für Slots und Reservierungen +description: Für Karten, Slots, Filter und den Bestätigungs-Handler von DHTMLX Booking hält der MCP-Server AI-Assistenten am aktuellen API statt an einem Trainings-Snapshot. +--- + +# DHTMLX Booking MCP-Server: Slots, Filter und Reservierungen {#dhtmlx-booking-mcp-server-slots-filters-and-reservations} + +DHTMLX Booking bietet eine detaillierte Konfiguration für ein Buchungs-Widget: Sie können [Slot-Regeln](guides/configuration.md#fill-cards-with-slots) bis auf den Wochentag oder das exakte Datum definieren, das Layout einer Karte anpassen, indem Sie entweder [ihre Standardfelder umschalten](api/config/booking-cardshape.md) oder [ein eigenes Template einsetzen](api/config/booking-cardtemplate.md), und den [Reservierungs-Handler](api/methods/booking-setconfirmhandler-method.md) vollständig anpassen, der den Buchungsablauf abschließt. Die Priorität der Slot-Regeln, der Layout-Ansatz und der Reservierungs-Vertrag von Booking müssen dem entsprechen, was heute tatsächlich ausgeliefert wird, und nicht einer Vermutung aus dem Trainingsstand. + +Fragen Sie stattdessen den DHTMLX MCP-Server ab: Er liefert die aktuellen Regeln der [Slot-Konfiguration](guides/configuration.md#fill-cards-with-slots), den Vertrag des [Bestätigungs-Handlers](guides/saving-reservations.md#save-slot-reservations-to-the-server) und das [Filter-Setup](guides/configuration.md#configure-the-filter), sodass der Assistent mit dem aktuellen API arbeitet statt mit einem veralteten. + +### MCP-Endpunkt {#mcp-endpoint} + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +Der DHTMLX MCP-Server deckt alle wichtigen DHTMLX-Produkte ab, nicht nur DHTMLX Booking. Derselbe Endpunkt und dieselben Konfigurationsanweisungen funktionieren unabhängig davon, mit welcher DHTMLX-Komponente Sie arbeiten. +::: + +## Booking-Fragen, für die der MCP-Server gebaut ist {#booking-questions-the-mcp-server-is-built-to-answer} + +Die Karten, Slots und die Server-Sync-Logik von DHTMLX Booking liegen alle im durchsuchbaren Index des MCP-Servers. Häufige Abfragen sind unter anderem: + +- Das aktuelle API für [Methoden](api/overview/booking-methods-overview.md), [Events](api/overview/booking-events-overview.md) und [Eigenschaften](api/overview/booking-properties-overview.md) nachschlagen, einschließlich der [Event Bus](api/overview/booking-internal-eventbus-overview.md)- und [state](api/overview/booking-internal-state-overview.md)-Methoden. +- Sofort lauffähigen [Initialisierungscode](guides/initialization.md) für eine neue Booking-Instanz aus einer Beschreibung der benötigten Karten und Slots generieren. +- Kartenfelder mit [`cardShape`](api/config/booking-cardshape.md) und [`cardTemplate`](api/config/booking-cardtemplate.md) umschalten oder ersetzen — und dasselbe für den Informationsblock des Buchungsdialogs mit [`infoShape`](api/config/booking-infoshape.md) und [`infoTemplate`](api/config/booking-infotemplate.md). +- [Slot-Regeln](guides/configuration.md#fill-cards-with-slots) (Größe, Abstand, Tage und Daten) und ihre Prioritätsreihenfolge ausarbeiten sowie Slots als [belegt oder verfügbar](guides/configuration.md#mark-slots-as-used-or-available) markieren. +- Die [Filterleiste](guides/configuration.md#configure-the-filter) konfigurieren: Textfelder, Zeitbereiche und den `autoApply`-Modus. +- Die [Server-Synchronisierung](guides/saving-reservations.md) verdrahten: Kartendaten mit [`setConfig()`](api/methods/booking-setconfig-method.md) laden und Reservierungen über [`setConfirmHandler()`](api/methods/booking-setconfirmhandler-method.md) senden. +- [Booking-Events](api/overview/booking-events-overview.md) wie `select-slot`, `confirm-slot` und `filter-data` behandeln oder sie mit [`api.intercept()`](api/internal/booking-intercept.md) abfangen. +- Das Widget mit einer eingebauten oder eigenen [`locale`](api/config/booking-locale.md) [lokalisieren](guides/localization.md) und es über `--wx-booking-*`-CSS-Variablen [gestalten](guides/styling.md). +- Booking 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) integrieren oder Events aus [Scheduler](guides/integration-with-scheduler.md) und [Event Calendar](guides/integration-with-eventcalendar.md) in Booking-Slots umwandeln. + +## Was der MCP-Server mit einem Booking-Prompt macht {#what-the-mcp-server-does-with-a-booking-prompt} + +Hinter einer Booking-Frage steht eine Retrieval-Augmented-Generation-(RAG)-Pipeline, die der DHTMLX MCP-Server über das Model Context Protocol (MCP) ausführt. Der Server übergibt jede Anfrage an einen von zwei Workflows: *Search*, der passende Referenzseiten zurückgibt, oder *Inference*, der diese Seiten liest und selbst antwortet. Da Booking-Prompts oft eine Coding-Frage mit Details zum eigenen Backend des Nutzers vermischen, behandelt der Assistent beides getrennt: Er löst den Teil heraus, für den Dokumentation nötig ist, und beantwortet den Rest selbst. + +Verfolgen Sie den Prompt *"Wie richte ich einen Bestätigungs-Handler ein, der eine Reservierung an das interne Buchungsverwaltungs-API meines Unternehmens sendet und sie auflöst, sobald dieses antwortet?"* durch den Prozess: + +1. Was im MCP landet, ist eng umrissen: wie man einen Bestätigungs-Handler mit den Feldern `confirm`, `slot` und `data` aufbaut. +2. Der Server ordnet das der Dokumentation zur Server-Integration zu. +3. Einen Bestätigungs-Handler zu schreiben verlangt Code, also greift *Search* zu (eine engere Frage, etwa welcher Parameter die Startzeit des gebuchten Slots trägt, ginge stattdessen an *Inference*). +4. *Search* zieht die passenden Seiten aus einem Vektorindex, der auf der aktuellen Booking-Dokumentation aufgebaut ist. +5. Diese Seiten kommen als Kontext beim Assistenten an. +6. Der Assistent baut den Bestätigungs-Handler aus den Feldern `confirm`, `slot` und `data` zusammen, die diese Seiten beschreiben, und ergänzt dann aus eigenem Wissen die konkrete Request- und Response-Behandlung für das Ziel-Backend. + +So bleiben Booking-Vorschläge an die aktuellen Slot-Regeln und die Reservierungslogik des Widgets gebunden. + +## MCP-Setup, Tool für Tool {#mcp-setup-tool-by-tool} + +Die meisten Booking-Teams registrieren den MCP-Endpunkt einmal, wenn sie das Reservierungs-Backend aufsetzen, und verwenden diese Registrierung danach in jedem weiteren Projekt wieder. Die Mechanik unterscheidet sich von Tool zu Tool — bei den einen ein CLI-Befehl, bei den anderen eine JSON-Konfigurationsdatei —, aber alle zeigen auf diese Adresse: + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Wählen Sie unten Ihr Tool für die genauen Einrichtungsschritte. + +### Claude Code + +:::info +Die [offizielle Dokumentation](https://code.claude.com/docs/en/mcp) listet jede Möglichkeit auf, wie Claude Code sich mit einem MCP-Server verbindet. +::: + +Um den Server über die Kommandozeile zu registrieren, führen Sie aus: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Lieber ohne CLI? Fügen Sie stattdessen den folgenden Eintrag in Ihre `.mcp.json` ein: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +Die [offizielle Dokumentation](https://cursor.com/en-US/docs/mcp) behandelt jede Möglichkeit, MCP in Cursor zu konfigurieren. +::: + +Schritte zum Hinzufügen des Servers: + +1. Öffnen Sie Settings (`Cmd+Shift+J` auf Mac, `Ctrl+Shift+J` auf Windows/Linux) +2. Gehen 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 +Vollständige Details zur MCP-Integration in Antigravity finden Sie in der [offiziellen Dokumentation](https://antigravity.google/docs/mcp). +::: + +Diese Schritte sind auszuführen, um den DHTMLX MCP-Server mit Google Antigravity zu verbinden: + +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 +Sie kommen von der Gemini CLI? Die [zugehörige Anleitung](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) erklärt die Migration 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 dann `agy` im Terminal aus. + +### ChatGPT + +:::info +ChatGPT dokumentiert die Einrichtung seines MCP-Connectors vollständig in der [offiziellen Dokumentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt). +::: + +Schritte zur Konfiguration des Connectors: + +1. Gehen Sie zu **Settings** → **Apps & Connectors** +2. Klicken Sie auf **Advanced settings** +3. Aktivieren Sie **Developer mode** +4. Kehren Sie zu **Apps & Connectors** zurück und klicken Sie auf "Create" +5. Füllen Sie die Connector-Details aus: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- Authentifizierung: `No authentication` +6. Klicken Sie auf **Create** + +Nachdem Sie den Connector erstellt haben, zieht ChatGPT während der Konversationen Dokumentation vom MCP-Server. + +:::info +Für intensive Coding-Workflows können andere MCP-fähige Tools besser passen. +::: + +### Weitere Tools {#other-tools} + +Wenn Ihr Tool oben nicht aufgeführt ist, prüfen Sie dessen Einstellungen auf "Model Context Protocol" oder "Context Sources" und fügen Sie `https://docs.dhtmlx.com/mcp` als benutzerdefinierte Quelle hinzu. + +## Datenverarbeitung hinter dem MCP-Server {#data-handling-behind-the-mcp-server} + +Der DHTMLX MCP-Server läuft vollständig außerhalb Ihres Rechners: Er greift nie auf lokale Dateien zu und speichert keinerlei persönliche Informationen. + +Die einzigen Abfragen, die er protokolliert, sind jene, die beim Debuggen oder bei der Verbesserung des Dienstes helfen. + +Ein kommerzielles Deployment schaltet die Abfrage-Protokollierung für Teams, die diese zusätzliche Zusicherung benötigen, vollständig ab. Vereinbaren Sie es über `info@dhtmlx.com`. + +## Prompts zum Ausprobieren beim Entwickeln mit Booking {#prompts-to-try-when-building-with-booking} + +Benennen Sie das Objekt, bevor Sie fragen: eine Karte, einen Slot, den Filter oder den Bestätigungs-Handler. Genau das tun die folgenden Prompts, gruppiert nach Aufgabe. + +**Karten und Slots** + +~~~ +Wie blende ich die Preis- und Bewertungsfelder auf einer Booking-Karte aus? Nutze die Dokumentation. +~~~ +~~~ +Wie definiere ich in DHTMLX Booking eine Slot-Dauer von 45 Minuten nur für Dienstage und Freitage? +~~~ +~~~ +Wie markiere ich einen Slot in DHTMLX Booking als bereits gebucht? +~~~ + +**Filtern** + +~~~ +Wie füge ich der Filterleiste von DHTMLX Booking einen eigenen Zeitbereich mit der Bezeichnung "Dringend" hinzu? +~~~ +~~~ +Wie sorge ich dafür, dass der Booking-Filter automatisch angewendet wird, ohne den Search-Button zu klicken? +~~~ + +**Reservierungen und Server-Synchronisierung** + +~~~ +Wie sende ich eine Reservierung an meinen Server und löse sie auf, sobald der Server antwortet? +~~~ +~~~ +Wie lade ich Kartendaten von einem REST-Endpunkt und wende sie auf eine bestehende Booking-Instanz an? +~~~ +~~~ +Wie reagiere ich in DHTMLX Booking auf eine bestätigte Reservierung, ohne den Standard-Bestätigungs-Handler zu ersetzen? +~~~ + +**Lokalisierung und Gestaltung** + +~~~ +Wie stelle ich DHTMLX Booking auf die deutsche Locale um? +~~~ +~~~ +Wie mache ich die Slot-Spalte von Booking schmaler? +~~~ + +## Prompt-Gewohnheiten, die bei Booking helfen {#prompt-habits-useful-for-booking} + +- **Benennen Sie die genaue Eigenschaft.** `cardShape`, `cardTemplate`, `infoShape`, `infoTemplate`, `filterShape` und `formShape` konfigurieren jeweils andere Teile des Widgets. Sagen Sie, welche Sie meinen, statt "die Kartenkonfiguration", damit der Assistent die passende Referenz findet. +- **Benennen Sie die gemeinte Slot-Eigenschaft.** `slots` definiert Verfügbarkeitsregeln, `usedSlots` blendet bereits gebuchte Zeiten aus, und `availableSlots` ersetzt die Regeln durch eine explizite Liste. Wenn Sie die gewünschte benennen, vermischt der Assistent sie nicht zu einer einzigen Eigenschaft. +- **Unterscheiden Sie das öffentliche API vom Event Bus.** `setConfig()` und `setConfirmHandler()` decken den größten Teil der täglichen Konfiguration ab, während `api.on()`, `api.exec()`, `api.intercept()` und `api.setNext()` den internen Event Bus ansprechen. Sagen Sie, welche Ebene Sie meinen, wenn ein Prompt Events betrifft. +- **Erwähnen Sie die Zeitzone.** Booking arbeitet in lokaler Zeit; ein Prompt mit Serverdaten sollte daher angeben, ob Zeitstempel in UTC eintreffen und vor dem Widget konvertiert werden müssen. 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 a32d24e..004e570 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 @@ -157,3 +157,4 @@ Das ist alles, was Sie benötigen, um ein einfaches Booking auf einer Seite zu e - Die Seiten unter [Guides](/category/guides) bieten Anleitungen zur Installation, zum Laden von Daten, zur Gestaltung und weitere hilfreiche Tipps für eine reibungslose Booking-Konfiguration - Die [API-Referenz](api/overview/booking-api-overview.md) beschreibt die Funktionalität von Booking +- Der [DHTMLX MCP server](guides/mcp-server.md) verbindet einen AI-Coding-Assistenten mit dieser Dokumentation, sodass er beim Entwickeln das aktuelle Booking-API nachschlagen kann diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync index 5612e08..2391de8 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -13b0c98aa8da151cabb50d5d4152672de95458ce +bf44108f9d10711389fcfd29a83523477cf66f14 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..a0a99c8 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,251 @@ +--- +sidebar_label: DHTMLX MCP server +title: 슬롯과 예약을 위한 DHTMLX Booking MCP 연동 +description: DHTMLX Booking의 카드, 슬롯, 필터, 확인 핸들러에 대해 MCP 서버는 AI 어시스턴트가 학습 시점의 스냅샷이 아닌 현재 API를 사용하도록 유지합니다. +--- + +# DHTMLX Booking MCP 서버: 슬롯, 필터, 예약 {#dhtmlx-booking-mcp-server-slots-filters-and-reservations} + +DHTMLX Booking은 예약 위젯을 위한 세밀한 구성을 제공합니다. [슬롯 규칙](guides/configuration.md#fill-cards-with-slots)을 요일 단위 또는 특정 날짜 단위까지 정의할 수 있고, [기본 필드를 전환](api/config/booking-cardshape.md)하거나 [커스텀 템플릿으로 교체](api/config/booking-cardtemplate.md)하여 카드 레이아웃을 조정할 수 있으며, 예약 흐름을 마무리하는 [예약 핸들러](api/methods/booking-setconfirmhandler-method.md)를 완전히 커스터마이즈할 수 있습니다. Booking의 슬롯 규칙 우선순위, 레이아웃 방식, 예약 계약은 학습 시점의 추측이 아니라 현재 실제로 배포된 내용과 일치해야 합니다. + +대신 DHTMLX MCP 서버에 질의하세요. 현재의 [슬롯 구성](guides/configuration.md#fill-cards-with-slots) 규칙, [확인 핸들러](guides/saving-reservations.md#save-slot-reservations-to-the-server) 계약, [필터 설정](guides/configuration.md#configure-the-filter)을 제공하므로, 어시스턴트가 오래된 API가 아닌 현재 API를 기준으로 작동합니다. + +### MCP 엔드포인트 {#mcp-endpoint} + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 서버는 DHTMLX Booking뿐 아니라 모든 주요 DHTMLX 제품을 다룹니다. 어떤 DHTMLX 컴포넌트로 개발하든 동일한 엔드포인트와 구성 방법이 그대로 적용됩니다. +::: + +## MCP 서버가 답하도록 만들어진 Booking 질문 {#booking-questions-the-mcp-server-is-built-to-answer} + +DHTMLX Booking의 카드, 슬롯, 서버 동기화 로직은 모두 MCP 서버의 검색 가능한 인덱스에 들어 있습니다. 자주 조회되는 항목은 다음과 같습니다: + +- [Event Bus](api/overview/booking-internal-eventbus-overview.md) 및 [state](api/overview/booking-internal-state-overview.md) 메서드를 포함해 [메서드](api/overview/booking-methods-overview.md), [이벤트](api/overview/booking-events-overview.md), [속성](api/overview/booking-properties-overview.md)의 현재 API 조회. +- 필요한 카드와 슬롯에 대한 설명으로부터 새 Booking 인스턴스의 실행 가능한 [초기화](guides/initialization.md) 코드 생성. +- [`cardShape`](api/config/booking-cardshape.md)와 [`cardTemplate`](api/config/booking-cardtemplate.md)로 카드 필드를 전환하거나 교체하고, [`infoShape`](api/config/booking-infoshape.md)와 [`infoTemplate`](api/config/booking-infotemplate.md)로 예약 대화상자의 정보 블록에 대해 동일하게 처리. +- [슬롯 규칙](guides/configuration.md#fill-cards-with-slots)(크기, 간격, 요일, 날짜)과 그 우선순위 정리, 그리고 슬롯을 [사용됨 또는 가용](guides/configuration.md#mark-slots-as-used-or-available)으로 표시. +- [필터 바](guides/configuration.md#configure-the-filter) 구성: 텍스트 필드, 시간 범위, `autoApply` 모드. +- [서버 동기화](guides/saving-reservations.md) 연결: [`setConfig()`](api/methods/booking-setconfig-method.md)로 카드 데이터를 불러오고 [`setConfirmHandler()`](api/methods/booking-setconfirmhandler-method.md)로 예약을 전송. +- `select-slot`, `confirm-slot`, `filter-data` 같은 [Booking 이벤트](api/overview/booking-events-overview.md) 처리 또는 [`api.intercept()`](api/internal/booking-intercept.md)로 가로채기. +- 내장 또는 커스텀 [`locale`](api/config/booking-locale.md)로 위젯 [현지화](guides/localization.md)하기, `--wx-booking-*` CSS 변수로 [스타일링](guides/styling.md)하기. +- Booking을 [React](guides/integration-with-react.md), [Vue](guides/integration-with-vue.md), [Angular](guides/integration-with-angular.md), [Svelte](guides/integration-with-svelte.md)와 통합하거나, [Scheduler](guides/integration-with-scheduler.md) 및 [Event Calendar](guides/integration-with-eventcalendar.md)의 이벤트를 Booking 슬롯으로 변환. + +## MCP 서버가 Booking 프롬프트를 처리하는 방식 {#what-the-mcp-server-does-with-a-booking-prompt} + +Booking 질문 뒤에는 DHTMLX MCP 서버가 Model Context Protocol(MCP) 위에서 실행하는 검색 증강 생성(RAG) 파이프라인이 있습니다. 서버는 각 요청을 두 가지 워크플로 중 하나로 넘깁니다. 하나는 일치하는 레퍼런스 페이지를 반환하는 *Search*, 다른 하나는 해당 페이지를 읽고 스스로 답하는 *Inference*입니다. Booking 프롬프트는 코딩 질문과 사용자의 자체 백엔드에 대한 세부 사항이 섞이는 경우가 많으므로, 어시스턴트는 이 둘을 분리해 처리합니다. 문서가 필요한 부분을 떼어내고, 나머지는 스스로 답합니다. + +*"회사 내부 예약 관리 API로 예약을 전송하고 응답이 오면 이를 완료 처리하는 확인 핸들러는 어떻게 설정하나요?"* 라는 프롬프트가 이 과정을 어떻게 거치는지 따라가 보겠습니다: + +1. MCP에 전달되는 것은 좁은 범위입니다. `confirm`, `slot`, `data` 필드를 사용해 확인 핸들러를 구성하는 방법입니다. +2. 서버는 이를 서버 연동 문서로 연결합니다. +3. 확인 핸들러 작성에는 코드가 필요하므로 *Search*가 이를 담당합니다(예약된 슬롯의 시작 시각을 담는 매개변수가 무엇인지와 같은 더 좁은 질문이라면 *Inference*로 갑니다). +4. *Search*는 현재 Booking 문서로 구축된 벡터 인덱스에서 일치하는 페이지를 가져옵니다. +5. 해당 페이지들이 컨텍스트로 어시스턴트에 전달됩니다. +6. 어시스턴트는 그 페이지들이 설명하는 `confirm`, `slot`, `data` 필드로 확인 핸들러를 구성한 다음, 대상 백엔드에 맞는 구체적인 요청 및 응답 처리를 자체 지식으로 채워 넣습니다. + +이런 방식으로 Booking 관련 제안은 위젯의 현재 슬롯 규칙 및 예약 처리 방식에 계속 맞춰집니다. + +## 도구별 MCP 설정 {#mcp-setup-tool-by-tool} + +대부분의 Booking 팀은 예약 백엔드를 구축할 때 MCP 엔드포인트를 한 번 등록하고, 이후 모든 프로젝트에서 그 등록을 재사용합니다. 방식은 도구마다 달라서 어떤 도구는 CLI 명령이고 어떤 도구는 JSON 구성 파일이지만, 모두 다음 주소를 가리킵니다: + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +정확한 설정 단계는 아래에서 사용하는 도구를 선택해 확인하세요. + +### Claude Code + +:::info +[공식 문서](https://code.claude.com/docs/en/mcp)에 Claude Code가 MCP 서버에 연결하는 모든 방법이 정리되어 있습니다. +::: + +명령줄에서 서버를 등록하려면 다음을 실행합니다: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +CLI를 사용하지 않으려면, 대신 `.mcp.json`에 다음 항목을 추가하세요: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +[공식 문서](https://cursor.com/en-US/docs/mcp)에서 Cursor의 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 +Gemini CLI에서 넘어오셨나요? [관련 가이드](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)에서 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는 MCP 커넥터 설정 방법을 [공식 문서](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt)에 전부 정리해 두었습니다. +::: + +커넥터를 구성하는 단계: + +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 지원 도구가 더 적합할 수 있습니다. +::: + +### 기타 도구 {#other-tools} + +사용하는 도구가 위 목록에 없다면, 해당 도구의 설정에서 "Model Context Protocol" 또는 "Context Sources" 항목을 찾아 `https://docs.dhtmlx.com/mcp`를 커스텀 소스로 추가하세요. + +## MCP 서버의 데이터 처리 방식 {#data-handling-behind-the-mcp-server} + +DHTMLX MCP 서버는 전적으로 사용자의 컴퓨터 외부에서 실행됩니다. 로컬 파일에 접근하지 않으며, 어떤 개인 정보도 저장하지 않습니다. + +기록되는 쿼리는 디버깅이나 서비스 개선에 도움이 되는 것뿐입니다. + +추가적인 보장이 필요한 팀을 위해 상용 배포에서는 쿼리 로깅을 완전히 끕니다. 도입 문의는 `info@dhtmlx.com`으로 하시면 됩니다. + +## Booking 개발 시 시도해 볼 프롬프트 {#prompts-to-try-when-building-with-booking} + +질문하기 전에 대상을 먼저 지목하세요. 카드, 슬롯, 필터, 확인 핸들러 중 무엇인지 밝히면 됩니다. 아래 프롬프트는 바로 그렇게 작성한 예시이며 작업별로 묶어 두었습니다. + +**카드와 슬롯** + +~~~ +Booking 카드에서 가격과 리뷰 필드를 숨기려면 어떻게 하나요? 문서를 참고해 주세요. +~~~ +~~~ +DHTMLX Booking에서 화요일과 금요일에만 45분 슬롯을 정의하려면 어떻게 하나요? +~~~ +~~~ +DHTMLX Booking에서 슬롯을 이미 예약된 것으로 표시하려면 어떻게 하나요? +~~~ + +**필터링** + +~~~ +DHTMLX Booking 필터 바에 "긴급"이라는 이름의 커스텀 시간 범위를 추가하려면 어떻게 하나요? +~~~ +~~~ +Search 버튼을 누르지 않아도 Booking 필터가 자동으로 적용되게 하려면 어떻게 하나요? +~~~ + +**예약과 서버 동기화** + +~~~ +예약을 서버로 전송하고 서버가 응답하면 완료 처리하려면 어떻게 하나요? +~~~ +~~~ +REST 엔드포인트에서 카드 데이터를 불러와 기존 Booking 인스턴스에 적용하려면 어떻게 하나요? +~~~ +~~~ +DHTMLX Booking에서 기본 확인 핸들러를 교체하지 않고 확정된 예약에 반응하려면 어떻게 하나요? +~~~ + +**현지화와 스타일링** + +~~~ +DHTMLX Booking을 독일어 로케일로 전환하려면 어떻게 하나요? +~~~ +~~~ +Booking 슬롯 열의 너비를 더 좁게 만들려면 어떻게 하나요? +~~~ + +## Booking에 유용한 프롬프트 작성 습관 {#prompt-habits-useful-for-booking} + +- **정확한 속성 이름을 밝히세요.** `cardShape`, `cardTemplate`, `infoShape`, `infoTemplate`, `filterShape`, `formShape`는 각각 위젯의 다른 부분을 구성합니다. "카드 설정"이라고 뭉뚱그리지 말고 어떤 속성을 말하는지 밝혀야 어시스턴트가 맞는 레퍼런스를 찾아옵니다. +- **어떤 슬롯 속성인지 밝히세요.** `slots`는 가용성 규칙을 정의하고, `usedSlots`는 이미 예약된 시간을 숨기며, `availableSlots`는 규칙을 명시적인 목록으로 대체합니다. 원하는 속성을 지목하면 어시스턴트가 이들을 하나로 뒤섞지 않습니다. +- **공개 API와 Event Bus를 구분하세요.** `setConfig()`와 `setConfirmHandler()`는 일상적인 구성 대부분을 담당하고, `api.on()`, `api.exec()`, `api.intercept()`, `api.setNext()`는 내부 Event Bus에 접근합니다. 프롬프트가 이벤트를 다룰 때는 어느 계층을 말하는지 밝히세요. +- **시간대를 언급하세요.** Booking은 로컬 시간을 기준으로 동작하므로, 서버 데이터가 관련된 프롬프트에서는 타임스탬프가 UTC로 도착하는지, 위젯에 전달되기 전에 변환이 필요한지 밝히는 것이 좋습니다. 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 1523fd4..4fc50a7 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 @@ -157,3 +157,4 @@ new booking.Booking("#root", { - [가이드](/category/guides) 페이지에서는 설치, 데이터 로드, 스타일링 및 Booking 구성을 원활하게 진행하는 데 도움이 되는 기타 유용한 팁에 대한 지침을 제공합니다 - [API 레퍼런스](api/overview/booking-api-overview.md)는 Booking 기능에 대한 설명을 제공합니다 +- [DHTMLX MCP server](guides/mcp-server.md)는 AI 코딩 어시스턴트를 이 문서에 연결하여, 개발 중에도 최신 Booking API를 조회할 수 있게 해줍니다 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/.sync b/i18n/ru/docusaurus-plugin-content-docs/current/.sync index 785ddcc..2391de8 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -5e4362476ef28d7b3790f1785fab068ca2bc5c42 +bf44108f9d10711389fcfd29a83523477cf66f14 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..8c89c18 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,251 @@ +--- +sidebar_label: DHTMLX MCP server +title: Интеграция DHTMLX Booking с MCP для слотов и бронирований +description: Для карточек, слотов, фильтров и обработчика подтверждения DHTMLX Booking MCP-сервер удерживает AI-ассистентов на актуальном API вместо снимка обучающих данных. +--- + +# DHTMLX Booking MCP-сервер: слоты, фильтры и бронирования {#dhtmlx-booking-mcp-server-slots-filters-and-reservations} + +DHTMLX Booking предоставляет детальную конфигурацию виджета бронирования: вы можете задавать [правила слотов](guides/configuration.md#fill-cards-with-slots) вплоть до дня недели или конкретной даты, менять раскладку карточки — либо [переключая её поля по умолчанию](api/config/booking-cardshape.md), либо [подставляя пользовательский шаблон](api/config/booking-cardtemplate.md), — и полностью настраивать [обработчик бронирования](api/methods/booking-setconfirmhandler-method.md), который завершает процесс бронирования. Приоритет правил слотов, подход к раскладке и контракт бронирования в Booking должны соответствовать тому, что поставляется сегодня, а не догадке на основе обучающих данных. + +Обращайтесь вместо этого к DHTMLX MCP-серверу: он выдаёт актуальные правила [конфигурации слотов](guides/configuration.md#fill-cards-with-slots), контракт [обработчика подтверждения](guides/saving-reservations.md#save-slot-reservations-to-the-server) и [настройку фильтра](guides/configuration.md#configure-the-filter), поэтому ассистент работает с текущим API, а не с устаревшим. + +### MCP-эндпоинт {#mcp-endpoint} + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP-сервер охватывает все основные продукты DHTMLX, а не только DHTMLX Booking. Один и тот же эндпоинт и те же инструкции по настройке работают независимо от того, с каким компонентом DHTMLX вы работаете. +::: + +## Вопросы о Booking, на которые рассчитан MCP-сервер {#booking-questions-the-mcp-server-is-built-to-answer} + +Карточки, слоты и логика синхронизации с сервером в DHTMLX Booking входят в поисковый индекс MCP-сервера. Чаще всего запрашивают следующее: + +- Поиск актуального API для [методов](api/overview/booking-methods-overview.md), [событий](api/overview/booking-events-overview.md) и [свойств](api/overview/booking-properties-overview.md), включая методы [Event Bus](api/overview/booking-internal-eventbus-overview.md) и [state](api/overview/booking-internal-state-overview.md). +- Генерация готового к запуску кода [инициализации](guides/initialization.md) нового экземпляра Booking по описанию нужных карточек и слотов. +- Переключение или замена полей карточки через [`cardShape`](api/config/booking-cardshape.md) и [`cardTemplate`](api/config/booking-cardtemplate.md), а также то же самое для информационного блока диалога бронирования через [`infoShape`](api/config/booking-infoshape.md) и [`infoTemplate`](api/config/booking-infotemplate.md). +- Разбор [правил слотов](guides/configuration.md#fill-cards-with-slots) (размер, промежуток, дни и даты) и порядка их приоритета, а также пометка слотов как [занятых или доступных](guides/configuration.md#mark-slots-as-used-or-available). +- Настройка [панели фильтра](guides/configuration.md#configure-the-filter): текстовые поля, диапазоны времени и режим `autoApply`. +- Подключение [синхронизации с сервером](guides/saving-reservations.md): загрузка данных карточек через [`setConfig()`](api/methods/booking-setconfig-method.md) и отправка бронирований через [`setConfirmHandler()`](api/methods/booking-setconfirmhandler-method.md). +- Обработка [событий Booking](api/overview/booking-events-overview.md), таких как `select-slot`, `confirm-slot` и `filter-data`, или их перехват через [`api.intercept()`](api/internal/booking-intercept.md). +- [Локализация](guides/localization.md) виджета через встроенную или пользовательскую [`locale`](api/config/booking-locale.md) и [настройка стилей](guides/styling.md) через CSS-переменные `--wx-booking-*`. +- Интеграция Booking с [React](guides/integration-with-react.md), [Vue](guides/integration-with-vue.md), [Angular](guides/integration-with-angular.md) и [Svelte](guides/integration-with-svelte.md) или конвертация событий из [Scheduler](guides/integration-with-scheduler.md) и [Event Calendar](guides/integration-with-eventcalendar.md) в слоты Booking. + +## Что MCP-сервер делает с запросом о Booking {#what-the-mcp-server-does-with-a-booking-prompt} + +За вопросом о Booking стоит конвейер Retrieval-Augmented Generation (RAG), который DHTMLX MCP-сервер выполняет поверх Model Context Protocol (MCP). Сервер передаёт каждый запрос в один из двух сценариев: *Search*, который возвращает подходящие страницы справочника, или *Inference*, который читает эти страницы и отвечает самостоятельно. Поскольку запросы о Booking часто смешивают вопрос по коду с деталями собственного бэкенда пользователя, ассистент обрабатывает эти части по отдельности: он выделяет ту, для которой нужна документация, а на остальное отвечает сам. + +Проследите путь запроса *«Как настроить обработчик подтверждения, который отправляет бронирование во внутренний API управления бронированиями моей компании и разрешает его, как только тот ответит?»* по этому процессу: + +1. В MCP попадает узкая часть: как построить обработчик подтверждения на полях `confirm`, `slot` и `data`. +2. Сервер сопоставляет её с документацией по интеграции с сервером. +3. Написание обработчика подтверждения требует кода, поэтому запрос забирает *Search* (более узкий вопрос — например, какой параметр содержит время начала забронированного слота — ушёл бы в *Inference*). +4. *Search* достаёт подходящие страницы из векторного индекса, построенного по актуальной документации Booking. +5. Эти страницы возвращаются ассистенту в качестве контекста. +6. Ассистент собирает обработчик подтверждения из полей `confirm`, `slot` и `data`, описанных на этих страницах, а затем дописывает конкретную обработку запроса и ответа для целевого бэкенда, опираясь на собственные знания. + +Так предложения по Booking остаются привязанными к актуальным правилам слотов и логике бронирования виджета. + +## Настройка MCP: инструмент за инструментом {#mcp-setup-tool-by-tool} + +Большинство команд, работающих с Booking, регистрируют MCP-эндпоинт один раз — при настройке бэкенда бронирований, — а затем переиспользуют эту регистрацию во всех последующих проектах. Механика различается от инструмента к инструменту: где-то это команда CLI, где-то файл конфигурации JSON, — но все они указывают на один адрес: + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Выберите свой инструмент ниже, чтобы увидеть точные шаги настройки. + +### Claude Code + +:::info +В [официальной документации](https://code.claude.com/docs/en/mcp) перечислены все способы подключения Claude Code к MCP-серверу. +::: + +Чтобы зарегистрировать сервер из командной строки, выполните: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Предпочитаете обойтись без CLI? Тогда добавьте в свой `.mcp.json` следующую запись: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +[Официальная документация](https://cursor.com/en-US/docs/mcp) описывает все способы настройки MCP в Cursor. +::: + +Шаги для добавления сервера: + +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). +::: + +Чтобы подключить DHTMLX MCP-сервер к Google Antigravity, выполните следующие шаги: + +1. Откройте палитру команд +2. Введите «mcp add» +3. Выберите «HTTP» +4. Укажите следующие значения: +- Имя: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI + +:::info +Переходите с Gemini CLI? [Соответствующее руководство](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) описывает миграцию на 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 полностью описывает настройку MCP-коннектора в [официальной документации](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt). +::: + +Шаги для настройки коннектора: + +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 могут подойти лучше. +::: + +### Другие инструменты {#other-tools} + +Если вашего инструмента нет в списке выше, поищите в его настройках «Model Context Protocol» или «Context Sources» и добавьте `https://docs.dhtmlx.com/mcp` как пользовательский источник. + +## Как MCP-сервер обращается с данными {#data-handling-behind-the-mcp-server} + +DHTMLX MCP-сервер работает полностью вне вашей машины: он не обращается к локальным файлам и не хранит никакой персональной информации. + +Логируются только те запросы, которые помогают в отладке или улучшении сервиса. + +Коммерческое развёртывание полностью отключает логирование запросов для команд, которым нужна дополнительная гарантия. Договориться о нём можно по адресу `info@dhtmlx.com`. + +## Запросы, которые стоит попробовать при работе с Booking {#prompts-to-try-when-building-with-booking} + +Называйте объект прежде, чем задать вопрос: карточка, слот, фильтр или обработчик подтверждения. Запросы ниже делают именно это и сгруппированы по задачам. + +**Карточки и слоты** + +~~~ +Как скрыть поля цены и отзывов на карточке Booking? Используй документацию. +~~~ +~~~ +Как задать длительность слота в 45 минут только для вторников и пятниц в DHTMLX Booking? +~~~ +~~~ +Как пометить слот как уже забронированный в DHTMLX Booking? +~~~ + +**Фильтрация** + +~~~ +Как добавить пользовательский диапазон времени с меткой «Срочно» в панель фильтра DHTMLX Booking? +~~~ +~~~ +Как сделать, чтобы фильтр Booking применялся автоматически, без нажатия кнопки Search? +~~~ + +**Бронирования и синхронизация с сервером** + +~~~ +Как отправить бронирование на мой сервер и разрешить его, как только сервер ответит? +~~~ +~~~ +Как загрузить данные карточек с REST-эндпоинта и применить их к существующему экземпляру Booking? +~~~ +~~~ +Как отреагировать на подтверждённое бронирование, не заменяя обработчик подтверждения по умолчанию в DHTMLX Booking? +~~~ + +**Локализация и стилизация** + +~~~ +Как переключить DHTMLX Booking на немецкую локаль? +~~~ +~~~ +Как сделать колонку слотов Booking уже? +~~~ + +## Полезные привычки при составлении запросов о Booking {#prompt-habits-useful-for-booking} + +- **Называйте конкретное свойство.** `cardShape`, `cardTemplate`, `infoShape`, `infoTemplate`, `filterShape` и `formShape` настраивают разные части виджета. Указывайте, какое именно вы имеете в виду, вместо «конфигурация карточки», чтобы ассистент нашёл подходящую страницу справочника. +- **Называйте нужное свойство слотов.** `slots` задаёт правила доступности, `usedSlots` скрывает уже забронированное время, а `availableSlots` заменяет правила явным списком. Называя нужное, вы не дадите ассистенту смешать их в одно свойство. +- **Различайте публичный API и Event Bus.** `setConfig()` и `setConfirmHandler()` покрывают большую часть повседневной настройки, тогда как `api.on()`, `api.exec()`, `api.intercept()` и `api.setNext()` обращаются к внутреннему Event Bus. Указывайте, какой уровень вы имеете в виду, если запрос касается событий. +- **Упоминайте часовой пояс.** Booking работает в локальном времени, поэтому в запросе, затрагивающем серверные данные, стоит указать, приходят ли метки времени в UTC и нужно ли их конвертировать перед передачей в виджет. 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 023ecb5..0420ecf 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 @@ -157,3 +157,4 @@ new booking.Booking("#root", { - страницы [руководств](/category/guides) содержат инструкции по установке, загрузке данных, настройке стилей и другие полезные советы по конфигурации Booking - [справочник API](api/overview/booking-api-overview.md) описывает функциональность Booking +- [DHTMLX MCP server](guides/mcp-server.md) подключает AI-ассистента к этой документации, чтобы он мог сверяться с актуальным API Booking прямо во время разработки diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/.sync b/i18n/zh/docusaurus-plugin-content-docs/current/.sync index e25aef9..2391de8 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -6ccca0cebe53dd85971a15dcca43d61935a73470 +bf44108f9d10711389fcfd29a83523477cf66f14 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..654a8d9 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,251 @@ +--- +sidebar_label: DHTMLX MCP server +title: 面向时间段与预订的 DHTMLX Booking MCP 集成 +description: 针对 DHTMLX Booking 的卡片、时间段、过滤器和确认处理函数，MCP 服务器让 AI 助手基于当前 API 而非训练时的快照作答。 +--- + +# DHTMLX Booking MCP 服务器：时间段、过滤器与预订 {#dhtmlx-booking-mcp-server-slots-filters-and-reservations} + +DHTMLX Booking 为预约控件提供了细致的配置能力：您可以将[时间段规则](guides/configuration.md#fill-cards-with-slots)精确定义到星期几或具体日期，通过[切换默认字段](api/config/booking-cardshape.md)或[换用自定义模板](api/config/booking-cardtemplate.md)来调整卡片布局，并完全自定义结束预约流程的[预订处理函数](api/methods/booking-setconfirmhandler-method.md)。Booking 的时间段规则优先级、布局方式和预订约定都必须与当前实际发布的版本一致，而不是训练时的猜测。 + +请改为查询 DHTMLX MCP 服务器：它会给出当前的[时间段配置](guides/configuration.md#fill-cards-with-slots)规则、[确认处理函数](guides/saving-reservations.md#save-slot-reservations-to-the-server)约定以及[过滤器设置](guides/configuration.md#configure-the-filter)，因此助手基于当前 API 工作，而不是过时的版本。 + +### MCP 端点 {#mcp-endpoint} + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 服务器覆盖所有主要 DHTMLX 产品，而不仅仅是 DHTMLX Booking。无论您使用哪个 DHTMLX 组件进行开发，端点和配置说明都完全相同。 +::: + +## MCP 服务器专门用于解答的 Booking 问题 {#booking-questions-the-mcp-server-is-built-to-answer} + +DHTMLX Booking 的卡片、时间段和服务器同步逻辑全部收录在 MCP 服务器的可检索索引中。常见的查询包括： + +- 查询[方法](api/overview/booking-methods-overview.md)、[事件](api/overview/booking-events-overview.md)和[属性](api/overview/booking-properties-overview.md)的当前 API，包括 [Event Bus](api/overview/booking-internal-eventbus-overview.md) 和 [state](api/overview/booking-internal-state-overview.md) 方法。 +- 根据所需卡片和时间段的描述，为新的 Booking 实例生成可直接运行的[初始化](guides/initialization.md)代码。 +- 使用 [`cardShape`](api/config/booking-cardshape.md) 和 [`cardTemplate`](api/config/booking-cardtemplate.md) 切换或替换卡片字段，并用 [`infoShape`](api/config/booking-infoshape.md) 和 [`infoTemplate`](api/config/booking-infotemplate.md) 对预约对话框的信息区块做同样的处理。 +- 梳理[时间段规则](guides/configuration.md#fill-cards-with-slots)（大小、间隔、星期与日期）及其优先级顺序，并将时间段标记为[已用或可用](guides/configuration.md#mark-slots-as-used-or-available)。 +- 配置[过滤栏](guides/configuration.md#configure-the-filter)：文本字段、时间范围和 `autoApply` 模式。 +- 打通[服务器同步](guides/saving-reservations.md)：用 [`setConfig()`](api/methods/booking-setconfig-method.md) 加载卡片数据，并通过 [`setConfirmHandler()`](api/methods/booking-setconfirmhandler-method.md) 提交预订。 +- 处理 `select-slot`、`confirm-slot` 和 `filter-data` 等 [Booking 事件](api/overview/booking-events-overview.md)，或用 [`api.intercept()`](api/internal/booking-intercept.md) 拦截它们。 +- 使用内置或自定义的 [`locale`](api/config/booking-locale.md) 对控件进行[本地化](guides/localization.md)，并通过 `--wx-booking-*` CSS 变量进行[样式设置](guides/styling.md)。 +- 将 Booking 与 [React](guides/integration-with-react.md)、[Vue](guides/integration-with-vue.md)、[Angular](guides/integration-with-angular.md) 和 [Svelte](guides/integration-with-svelte.md) 集成，或把 [Scheduler](guides/integration-with-scheduler.md) 和 [Event Calendar](guides/integration-with-eventcalendar.md) 的事件转换为 Booking 时间段。 + +## MCP 服务器如何处理 Booking 提示词 {#what-the-mcp-server-does-with-a-booking-prompt} + +每个 Booking 问题背后，都是 DHTMLX MCP 服务器基于 Model Context Protocol（MCP）运行的检索增强生成（RAG）流程。服务器会把每个请求交给两种工作流之一：*Search* 返回匹配的参考页面，*Inference* 则阅读这些页面并自行作答。由于 Booking 提示词经常把编码问题和用户自有后端的细节混在一起，助手会把两者分开处理：拆出需要查文档的部分，其余部分自行回答。 + +以提示词 *“如何设置一个确认处理函数，将预订提交到公司内部的预约管理 API，并在其响应后完成该预订？”* 为例，看看它如何经过整个流程： + +1. 进入 MCP 的内容范围很窄：如何用 `confirm`、`slot` 和 `data` 字段构建确认处理函数。 +2. 服务器将其定位到服务器集成相关文档。 +3. 编写确认处理函数需要代码，因此由 *Search* 接手（如果是更窄的问题，比如哪个参数携带已预订时间段的开始时间，则会交给 *Inference*）。 +4. *Search* 从基于当前 Booking 文档构建的向量索引中取出匹配页面。 +5. 这些页面作为上下文返回给助手。 +6. 助手根据这些页面描述的 `confirm`、`slot` 和 `data` 字段组装确认处理函数，再凭自身知识补上目标后端所需的具体请求与响应处理。 + +这样一来，关于 Booking 的建议始终与控件当前的时间段规则和预订处理方式保持一致。 + +## 各工具的 MCP 配置 {#mcp-setup-tool-by-tool} + +多数 Booking 团队在搭建预订后端时注册一次 MCP 端点，此后在每个项目中复用该注册。不同工具的操作方式各异，有的是一条 CLI 命令，有的是一个 JSON 配置文件，但它们都指向同一个地址： + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +请在下方选择您使用的工具，查看具体配置步骤。 + +### Claude Code + +:::info +[官方文档](https://code.claude.com/docs/en/mcp)列出了 Claude Code 连接 MCP 服务器的全部方式。 +::: + +要从命令行注册服务器，请运行： + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +不想使用 CLI？那就改为在 `.mcp.json` 中添加以下条目： + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +[官方文档](https://cursor.com/en-US/docs/mcp)介绍了在 Cursor 中配置 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 +从 Gemini CLI 迁移过来？[相关指南](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)说明了迁移到 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 的工具可能更合适。 +::: + +### 其他工具 {#other-tools} + +如果上面没有列出您使用的工具，请在其设置中查找 “Model Context Protocol” 或 “Context Sources”，并将 `https://docs.dhtmlx.com/mcp` 添加为自定义来源。 + +## MCP 服务器背后的数据处理 {#data-handling-behind-the-mcp-server} + +DHTMLX MCP 服务器完全运行在您的机器之外：它从不接触本地文件，也不存储任何个人信息。 + +它记录的查询仅限于有助于调试或改进服务的那些。 + +对于需要额外保障的团队，商业部署会完全关闭查询日志记录。可通过 `info@dhtmlx.com` 洽谈。 + +## 使用 Booking 开发时可以试试的提示词 {#prompts-to-try-when-building-with-booking} + +提问前先点明对象：卡片、时间段、过滤器还是确认处理函数。下面的提示词正是这样做的，并按任务分组。 + +**卡片与时间段** + +~~~ +如何隐藏 Booking 卡片上的价格和评价字段？请参考文档。 +~~~ +~~~ +在 DHTMLX Booking 中，如何只为周二和周五定义 45 分钟的时间段时长？ +~~~ +~~~ +在 DHTMLX Booking 中，如何把某个时间段标记为已被预订？ +~~~ + +**过滤** + +~~~ +如何在 DHTMLX Booking 的过滤栏中添加一个名为“紧急”的自定义时间范围？ +~~~ +~~~ +如何让 Booking 过滤器无需点击 Search 按钮就自动应用？ +~~~ + +**预订与服务器同步** + +~~~ +如何把预订提交到我的服务器，并在服务器响应后完成该预订？ +~~~ +~~~ +如何从 REST 端点加载卡片数据，并把它应用到已有的 Booking 实例上？ +~~~ +~~~ +在 DHTMLX Booking 中，如何在不替换默认确认处理函数的前提下响应已确认的预订？ +~~~ + +**本地化与样式** + +~~~ +如何把 DHTMLX Booking 切换到德语 locale？ +~~~ +~~~ +如何把 Booking 的时间段列调窄一些？ +~~~ + +## 对 Booking 有用的提示词习惯 {#prompt-habits-useful-for-booking} + +- **点明具体属性。** `cardShape`、`cardTemplate`、`infoShape`、`infoTemplate`、`filterShape` 和 `formShape` 配置的是控件的不同部分。请说明您指的是哪一个，而不是笼统地说“卡片配置”，这样助手才能检索到对应的参考页面。 +- **点明所指的时间段属性。** `slots` 定义可用性规则，`usedSlots` 隐藏已被预订的时间，`availableSlots` 则用一份显式列表取代规则。指明您要用的那一个，助手就不会把它们混成一个属性。 +- **区分公开 API 与 Event Bus。** `setConfig()` 和 `setConfirmHandler()` 覆盖了日常配置的大部分场景，而 `api.on()`、`api.exec()`、`api.intercept()` 和 `api.setNext()` 访问的是内部的 Event Bus。当提示词涉及事件时，请说明您指的是哪一层。 +- **提及时区。** Booking 以本地时间工作，因此涉及服务器数据的提示词应说明时间戳是否以 UTC 形式传入、在进入控件前是否需要转换。 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 1c7f56c..e0eb580 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 @@ -157,3 +157,4 @@ new booking.Booking("#root", { - [指南](/category/guides)页面提供了有关安装、加载数据、样式设置及其他有用提示的说明，帮助您顺利完成 Booking 配置 - [API 参考](api/overview/booking-api-overview.md)提供了 Booking 功能的详细描述 +- [DHTMLX MCP server](guides/mcp-server.md) 将 AI 编码助手连接到本文档，让它在您开发时随时查阅当前的 Booking API