diff --git a/i18n/de/docusaurus-plugin-content-docs/current/.sync b/i18n/de/docusaurus-plugin-content-docs/current/.sync index 3903d9d..4ed164f 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/de/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -995cefe31a5c2b36bb2762d2d75586bfe042285b +10518169aead802523be5a1c20e5730654345e9b 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..f999f0e --- /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 Pivot MCP-Server für Konfiguration, Aggregation und Export +description: Die Config, Aggregationsmethoden, Prädikate und die Export-API von DHTMLX Pivot erreichen KI-Assistenten über den MCP-Server als aktuelle Dokumentation, nicht als Vermutung aus dem Training. +--- + +# DHTMLX Pivot MCP-Server: Konfiguration, Aggregation und Export {#dhtmlx-pivot-mcp-server-configuration-aggregation-and-export} + +DHTMLX Pivot verwandelt [ein Konfigurationsobjekt](api/config/config-property.md) in eine vollständig aggregierte Tabelle und öffnet den Zugang zu einer zweiten kompletten API, [dem zugrunde liegenden Table-Widget](api/methods/gettable-method.md), zum Exportieren von Daten oder zum Erweitern von Baumzeilen. Layoutänderungen und vollständige Tabellen-Neuzeichnungen lösen jeweils ein eigenes Event aus: [eine Layout-Bearbeitung](api/events/update-config-event.md) löst das eine aus, während [jede darunterliegende Neuzeichnung](api/events/render-table-event.md) das andere auslöst. Das alles richtig hinzubekommen, hängt von aktueller Dokumentation ab, nicht von einer veralteten Vermutung. + +Fragen Sie stattdessen den DHTMLX MCP-Server: Er liefert die aktuelle [`config`-Struktur](api/config/config-property.md), den [Exportweg über getTable()](guides/exporting-data.md) und das [richtige Event für die Persistenz](/guides/working-with-server#save-the-users-layout-to-resume-the-session), sodass der Assistent Code generiert, der dem tatsächlichen aktuellen Verhalten von Pivot entspricht. + +### MCP-Endpunkt {#mcp-endpoint} + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +Der DHTMLX MCP-Server deckt alle wichtigen DHTMLX-Produkte ab, nicht nur DHTMLX Pivot. Derselbe Endpunkt und dieselben Konfigurationsanweisungen funktionieren unabhängig davon, mit welcher DHTMLX-Komponente Sie arbeiten. +::: + +## Was Pivot-Entwickler den MCP-Server fragen {#what-pivot-developers-ask-the-mcp-server} + +Der MCP-Server kann Ihnen nahezu alles über die Dokumentation von DHTMLX Pivot verraten, angefangen bei: + +- Nachschlagen der aktuellen API für [Methoden](api/overview/methods-overview.md), [Events](api/overview/events-overview.md) und [Eigenschaften](api/overview/properties-overview.md), einschließlich der [Event Bus](api/overview/internal-eventbus-overview.md)- und [State](api/overview/internal-state-overview.md)-Methoden. +- Generieren von sofort lauffähigem [Initialisierungs](guides/initialization.md)-Code mit der Struktur aus `fields`, `data` und [`config`](api/config/config-property.md), die eine bestimmte Tabelle benötigt. +- Definieren von [Zeilen, Spalten und Werten](guides/working-with-data.md#define-pivot-structure) in der `config`-Eigenschaft, einschließlich beider akzeptierten Formen eines `values`-Eintrags. +- Auswählen oder Schreiben von [Aggregationsmethoden](guides/working-with-data.md#applying-maths-methods), von der integrierten Gruppe `sum`/`count`/`average` bis zu einer benutzerdefinierten Methode, die über die [`methods`](api/config/methods-property.md)-Eigenschaft hinzugefügt wird. +- Vorverarbeiten von Daten mit [Prädikaten](guides/working-with-data.md#processing-data-with-predicates) vor der Aggregation, zum Beispiel beim Gruppieren von Datumswerten nach Monat. +- Größenanpassung, Fixierung und Templating von Tabellenzellen über [`tableShape`](api/config/tableshape-property.md) und [`headerShape`](api/config/headershape-property.md), einschließlich [Baummodus](guides/configuration.md#enabling-the-tree-mode) und [fixierten Spalten](guides/configuration.md#freezing-columns). +- [Lokalisieren](guides/localization.md) von Labels und Datums-/Zahlenformaten sowie [Gestalten](guides/stylization.md) der Tabelle mit den CSS-Variablen `--wx-pivot-*`. +- [Exportieren](guides/exporting-data.md) einer Tabelle nach CSV oder XLSX über die Table-Instanz, die von [`getTable()`](api/methods/gettable-method.md) zurückgegeben wird. +- Entscheiden zwischen [`update-config`](api/events/update-config-event.md) und [`render-table`](api/events/render-table-event.md), wenn Sie [den State auf einem Server persistieren](/guides/working-with-server), oder Integrieren von Pivot 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). + +## Wo eine Pivot-Frage im MCP landet {#where-a-pivot-question-lands-in-mcp} + +Eine Pivot-Frage, die an den DHTMLX MCP-Server gesendet wird, durchläuft eine Retrieval-Augmented-Generation-(RAG)-Pipeline, die auf dem Model Context Protocol (MCP) aufbaut, und landet in einem von zwei Workflows: *Search*, der passende Referenzseiten zurückgibt, aus denen der Assistent schreibt, oder *Inference*, der diese Seiten liest und die Frage selbst beantwortet. Nur die Hälfte dieser Anfrage benötigt einen Dokumentationsabgleich. Der Assistent grenzt diese Hälfte ein und schreibt den Rest, die serverspezifische Speicherlogik, aus dem, was er bereits weiß. + +Betrachten Sie den Prompt *„Schreibe einen Handler, der die Pivot-Config bei jeder Layoutänderung auf dem Server speichert.“*: + +1. Der Assistent grenzt die Hälfte ein, die Dokumentation benötigt: welches Event abgehört werden muss und wie die aktuelle Config gelesen wird. +2. Der Server ermittelt die zugehörige Dokumentation [Mit dem Server arbeiten](/guides/working-with-server). +3. Da nach generiertem Code gefragt wird, übernimmt *Search* die Anfrage (eine engere Frage, etwa ob `render-table` häufiger auslöst als `update-config`, würde stattdessen an *Inference* gehen). +4. *Search* ruft die passenden Seiten aus einem Vektorindex der aktuellen Pivot-Dokumentation ab. +5. Der Assistent erhält diese Seiten als Kontext zurück. +6. Aus diesem Kontext schreibt der Assistent den [`update-config`](api/events/update-config-event.md)-Listener, wobei er das häufigere Auslösen von `render-table` korrekt ausklammert, und fügt anschließend aus eigenem Wissen die eigentliche Speicheranfrage für den Zielserver hinzu. + +So bleibt der Aggregations- und Export-Code von Pivot mit der aktuellen API abgestimmt. + +## KI-Tool mit dem MCP-Server verbinden {#linking-your-ai-tool-to-the-mcp-server} + +Unabhängig davon, welches KI-Entwicklungstool Sie neben Pivot verwenden, läuft die Anbindung an den MCP-Server auf einen einzigen Schritt hinaus: das Tool per CLI-Befehl oder JSON-Konfigurationsdatei auf die untenstehende Endpunkt-URL zu verweisen. + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Im Folgenden finden Sie die Einrichtungsdetails für gängige Tools. + +### Claude Code {#claude-code} + +:::info +Die [offizielle Dokumentation](https://code.claude.com/docs/en/mcp) von Claude Code führt durch jeden MCP-Einrichtungsweg. +::: + +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 +~~~ + +Keine CLI zur Hand? Fügen Sie die folgende Konfiguration manuell zu Ihrer `.mcp.json` hinzu: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor {#cursor} + +:::info +Die vollständigen MCP-Konfigurationsoptionen finden Sie in der [offiziellen Dokumentation](https://cursor.com/en-US/docs/mcp) von Cursor. +::: + +Schritte zum Hinzufügen des Servers: + +1. Öffnen Sie die Einstellungen (`Cmd+Shift+J` unter Mac, `Ctrl+Shift+J` unter 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 {#google-antigravity} + +#### Antigravity 2.0 {#antigravity-20} + +:::info +Die [offizielle Dokumentation](https://antigravity.google/docs/mcp) bietet den vollständigen Überblick über die MCP-Server-Integration in Antigravity. +::: + +Das sind die Schritte, 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 {#antigravity-cli} + +:::info +Der [zugehörige Leitfaden](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) erklärt, was sich bei der Migration von Gemini CLI zu Antigravity CLI ändert. +::: + +Um den DHTMLX MCP-Server mit Antigravity CLI zu verbinden, erstellen Sie `mcp_config.json` an einem der folgenden Orte: + +- 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 {#chatgpt} + +:::info +Alle Schritte zur Einrichtung eines MCP-Connectors in ChatGPT finden Sie 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 +~~~ +- Authentication: `No authentication` +6. Klicken Sie auf **Create** + +Nachdem Sie den Connector erstellt haben, ruft ChatGPT während der Unterhaltungen Dokumentation vom MCP-Server ab. + +:::info +Für intensive Coding-Workflows sind andere MCP-fähige Tools möglicherweise besser geeignet. +::: + +### Andere Tools {#other-tools} + +In den Einstellungsbereichen anderer KI-Coding-Tools wird dies meist als "Model Context Protocol" oder "Context Sources" bezeichnet. Fügen Sie dort `https://docs.dhtmlx.com/mcp` als benutzerdefinierte Quelle hinzu. + +## Wohin Ihre Anfragen gehen {#where-your-queries-go} + +Als gehosteter Dienst läuft der MCP-Server niemals auf Ihrer eigenen Hardware, öffnet niemals eine lokale Datei und speichert niemals personenbezogene Daten. + +Der Server protokolliert Anfragen ausschließlich zur Fehlerbehebung und zur Verbesserung des Dienstes. + +Fordern Sie ein kommerzielles Deployment an, um die Protokollierung von Anfragen vollständig zu deaktivieren. Wenden Sie sich dazu an `info@dhtmlx.com`. + +## Prompts, die Pivot richtig treffen {#prompts-that-get-pivot-right} + +Ein Prompt dreht sich in der Regel um eines von vier Themen: Config, Aggregation, Layout oder Server-Sync. Die folgenden Gruppen benennen dieses Thema jeweils von vornherein für Sie. + +**Config und Aggregation** + +~~~ +How do I add a custom aggregation method in DHTMLX Pivot? Use the docs. +~~~ +~~~ +How do I set a default sort order for a field in DHTMLX Pivot? +~~~ +~~~ +What's the difference between the two accepted forms of a values entry in the config property? +~~~ + +**Prädikate und Felder** + +~~~ +How do I group date values by month using a custom predicate in DHTMLX Pivot? +~~~ +~~~ +How do I apply a currency format with a dollar-sign prefix to a numeric field? +~~~ + +**Layout und Styling** + +~~~ +How do I freeze the first two row fields on the left in DHTMLX Pivot? +~~~ +~~~ +How do I enable tree mode in DHTMLX Pivot and choose which field becomes the parent row? +~~~ +~~~ +How do I change the hover color for primary buttons in the Material theme? +~~~ + +**Server-Sync und Export** + +~~~ +How do I save the user's layout to a server whenever they change it? +~~~ +~~~ +How do I export the Pivot table to XLSX? +~~~ + +## Kleine Tipps für Pivot-Prompts {#small-tips-for-pivot-prompts} + +- **Sagen Sie, welche API Sie meinen.** `export`, das Auf-/Zuklappen von Baumzeilen und das Filtern nach Zeile laufen alle über die Table-Instanz, die `getTable()` zurückgibt, nicht direkt über die Pivot-Instanz. Diese Ebene zu benennen, verhindert, dass der Assistent eine Table-exklusive Methode auf dem falschen Objekt aufruft. +- **Unterscheiden Sie eine Methode von einem Prädikat.** Aggregationsmethoden (`sum`, `count`, ein benutzerdefinierter Eintrag in `methods`) fassen Werte zusammen, die bereits in einer Zeile oder Spalte stehen. Prädikate transformieren einen Rohwert, bevor diese Gruppierung stattfindet. Geben Sie an, welche Phase Ihr Prompt anspricht. +- **Geben Sie die gewünschte Form des `values`-Eintrags genau an.** Ein `values`-Element kann ein `"method(field)"`-String oder ein `{ field, method }`-Objekt sein. Die verwendete Form zu benennen, hindert den Assistenten daran, eine dritte Form zu erfinden. +- **Fügen Sie "Use the docs" hinzu**, wenn Sie nach `update-config` im Vergleich zu `render-table` fragen. Die beiden lösen mit unterschiedlicher Häufigkeit aus, und genau diese Unterscheidung ist die Art von Detail, die veraltete Trainingsdaten übergehen. 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 805a827..77b15e1 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 @@ -120,3 +120,4 @@ Das war's. Mit diesen einfachen Schritten verfügen Sie über ein praktisches We - Die Seiten [Leitfäden](/category/guides) enthalten Anleitungen zur Installation, zum Laden von Daten, zur Gestaltung und weitere hilfreiche Tipps für eine reibungslose Pivot-Konfiguration - Die [API-Referenz](api/overview/main-overview.md) beschreibt die Funktionalität von Pivot +- Der [DHTMLX MCP-Server](guides/mcp-server.md) verbindet einen KI-Coding-Assistenten mit dieser Dokumentation, sodass er beim Entwickeln aktuelle Pivot-APIs nachschlagen kann diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync index ef543cf..4ed164f 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -05469ebe9355e2393701b28c3c5126da9be5d566 +10518169aead802523be5a1c20e5730654345e9b 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..9cd77e7 --- /dev/null +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,251 @@ +--- +sidebar_label: DHTMLX MCP 서버 +title: config, 집계, 내보내기를 위한 DHTMLX Pivot MCP 서버 +description: DHTMLX Pivot의 config, 집계 메서드, 프레디케이트, 내보내기 API는 MCP 서버를 통해 학습 데이터의 추측이 아니라 최신 문서로 AI 어시스턴트에 전달됩니다. +--- + +# DHTMLX Pivot MCP 서버: 구성, 집계, 내보내기 + +DHTMLX Pivot은 [하나의 config 객체](api/config/config-property.md)를 완전히 집계된 테이블로 변환하며, 데이터를 내보내거나 트리 행을 확장하기 위한 완전히 별개의 API인 [기반이 되는 Table 위젯](api/methods/gettable-method.md)도 함께 제공합니다. 레이아웃 변경과 테이블 전체 다시 그리기는 각각 고유한 이벤트를 발생시킵니다. [레이아웃 편집](api/events/update-config-event.md)은 하나를 발생시키고, [그 내부에서 일어나는 모든 다시 그리기](api/events/render-table-event.md)는 다른 하나를 발생시킵니다. 이 모든 것을 올바르게 처리하려면 오래된 추측이 아니라 최신 문서가 필요합니다. + +대신 DHTMLX MCP 서버에 질의하세요. 서버는 현재의 [`config` 형태](api/config/config-property.md), [getTable()를 통한 내보내기 경로](guides/exporting-data.md), [저장에 사용할 올바른 이벤트](/guides/working-with-server#save-the-users-layout-to-resume-the-session)를 반환하므로, 어시스턴트는 Pivot이 오늘날 실제로 동작하는 방식과 일치하는 코드를 생성합니다. + +### MCP 엔드포인트 + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 서버는 DHTMLX Pivot뿐만 아니라 모든 주요 DHTMLX 제품을 다룹니다. 어떤 DHTMLX 컴포넌트로 개발하든 동일한 엔드포인트와 설정 지침을 사용할 수 있습니다. +::: + +## Pivot 개발자가 MCP 서버에 묻는 것 + +MCP 서버는 DHTMLX Pivot 문서에 관한 거의 모든 것을 알려줄 수 있습니다. 예를 들면 다음과 같습니다. + +- [메서드](api/overview/methods-overview.md), [이벤트](api/overview/events-overview.md), [속성](api/overview/properties-overview.md)에 대한 최신 API를 조회하며, 여기에는 [Event Bus](api/overview/internal-eventbus-overview.md) 및 [State](api/overview/internal-state-overview.md) 메서드도 포함됩니다. +- 특정 테이블에 필요한 `fields`, `data`, [`config`](api/config/config-property.md) 형태를 갖춘, 바로 실행 가능한 [초기화](guides/initialization.md) 코드를 생성합니다. +- `config` 속성에서 [행, 열, 값](guides/working-with-data.md#define-pivot-structure)을 정의하며, `values` 항목에 허용되는 두 가지 형태를 모두 다룹니다. +- 내장된 `sum`/`count`/`average` 세트부터 [`methods`](api/config/methods-property.md) 속성으로 추가한 커스텀 메서드까지, [집계 메서드](guides/working-with-data.md#applying-maths-methods)를 선택하거나 직접 작성합니다. +- 날짜를 월별로 그룹화하는 등, 집계 전에 [프레디케이트](guides/working-with-data.md#processing-data-with-predicates)로 데이터를 전처리합니다. +- [`tableShape`](api/config/tableshape-property.md)와 [`headerShape`](api/config/headershape-property.md)를 통해 테이블 셀의 크기 조정, 고정, 템플릿 적용을 수행하며, [트리 모드](guides/configuration.md#enabling-the-tree-mode)와 [열 고정](guides/configuration.md#freezing-columns)도 포함됩니다. +- 레이블과 날짜/숫자 형식을 [로컬라이징](guides/localization.md)하고, `--wx-pivot-*` CSS 변수로 테이블을 [스타일링](guides/stylization.md)합니다. +- [`getTable()`](api/methods/gettable-method.md)이 반환하는 Table 인스턴스를 통해 테이블을 CSV 또는 XLSX로 [내보냅니다](guides/exporting-data.md). +- [서버에 상태를 저장할 때](/guides/working-with-server) [`update-config`](api/events/update-config-event.md)와 [`render-table`](api/events/render-table-event.md) 중 무엇을 사용할지 결정하거나, Pivot을 [React](guides/integration-with-react.md), [Vue](guides/integration-with-vue.md), [Angular](guides/integration-with-angular.md), [Svelte](guides/integration-with-svelte.md)와 통합합니다. + +## Pivot 질문이 MCP에서 처리되는 방식 + +DHTMLX MCP 서버로 전송된 Pivot 질문은 Model Context Protocol(MCP) 위에 구축된 Retrieval-Augmented Generation(RAG) 파이프라인을 거쳐 두 가지 워크플로 중 하나로 처리됩니다. 하나는 어시스턴트가 작성에 참고할 일치하는 레퍼런스 페이지를 반환하는 *Search*이고, 다른 하나는 그 페이지를 읽고 직접 질문에 답하는 *Inference*입니다. 이 요청 중 문서 조회가 필요한 부분은 절반뿐입니다. 어시스턴트는 그 절반을 정확히 짚어내고, 나머지인 서버별 저장 로직은 이미 알고 있는 지식을 바탕으로 작성합니다. + +다음 프롬프트를 살펴보겠습니다. *"레이아웃이 변경될 때마다 Pivot config를 서버에 저장하는 핸들러를 작성하세요."*: + +1. 어시스턴트는 문서가 필요한 절반을 표시합니다. 어떤 이벤트를 수신할지, 현재 config를 어떻게 읽을지입니다. +2. 서버는 이에 매핑되는 [working-with-server](/guides/working-with-server) 문서를 찾아냅니다. +3. 요청이 코드 생성이므로 *Search*가 이를 처리합니다(`render-table`이 `update-config`보다 더 자주 발생하는지와 같은 더 좁은 질문이라면 대신 *Inference*로 갑니다). +4. *Search*는 현재 Pivot 문서의 벡터 인덱스에서 일치하는 페이지를 가져옵니다. +5. 어시스턴트는 해당 페이지를 컨텍스트로 받습니다. +6. 그 컨텍스트를 바탕으로 어시스턴트는 [`update-config`](api/events/update-config-event.md) 리스너를 작성하면서 `render-table`의 더 잦은 발생을 올바르게 건너뛰고, 대상 서버로 보내는 실제 저장 요청은 자신의 지식을 바탕으로 추가합니다. + +이런 방식으로 Pivot의 집계 및 내보내기 코드는 최신 API와 일치된 상태를 유지합니다. + +## AI 도구를 MCP 서버에 연결하기 + +Pivot과 함께 어떤 AI 개발 도구를 사용하든, MCP 서버에 연결하는 작업은 한 단계로 요약됩니다. CLI 명령이나 JSON 설정 파일을 통해 아래 엔드포인트 URL을 지정하는 것입니다. + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +널리 사용되는 도구별 설정 방법은 다음과 같습니다. + +### Claude Code + +:::info +Claude Code의 [공식 문서](https://code.claude.com/docs/en/mcp)에서 모든 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 +MCP 설정 옵션의 전체 목록은 Cursor의 [공식 문서](https://cursor.com/en-US/docs/mcp)를 참조하세요. +::: + +서버를 추가하는 단계: + +1. 설정을 엽니다(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에서 Antigravity CLI로 마이그레이션할 때 변경되는 사항은 [관련 가이드](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)에서 설명합니다. +::: + +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를 지원하는 다른 도구가 더 적합할 수 있습니다. +::: + +### 기타 도구 + +다른 AI 코딩 도구의 설정 패널에서는 이를 "Model Context Protocol" 또는 "Context Sources"라고 부르는 경우가 많습니다. 해당 위치에 `https://docs.dhtmlx.com/mcp`를 커스텀 소스로 추가하세요. + +## 쿼리가 전송되는 위치 + +호스팅 서비스인 MCP 서버는 사용자의 하드웨어에서 실행되지 않으며, 로컬 파일을 열지 않고, 개인 정보를 저장하지 않습니다. + +서버는 문제를 디버깅하고 서비스를 개선하기 위한 목적으로만 쿼리를 기록합니다. + +쿼리 기록을 완전히 끄려면 상용 배포를 요청하세요. `info@dhtmlx.com`으로 문의하여 조율할 수 있습니다. + +## Pivot을 제대로 다루는 프롬프트 + +프롬프트는 대개 config, 집계, 레이아웃, 서버 동기화라는 네 가지 주제 중 하나를 다룹니다. 아래 그룹은 이를 미리 명시해 줍니다. + +**Config와 집계** + +~~~ +How do I add a custom aggregation method in DHTMLX Pivot? Use the docs. +~~~ +~~~ +How do I set a default sort order for a field in DHTMLX Pivot? +~~~ +~~~ +What's the difference between the two accepted forms of a values entry in the config property? +~~~ + +**프레디케이트와 필드** + +~~~ +How do I group date values by month using a custom predicate in DHTMLX Pivot? +~~~ +~~~ +How do I apply a currency format with a dollar-sign prefix to a numeric field? +~~~ + +**레이아웃과 스타일링** + +~~~ +How do I freeze the first two row fields on the left in DHTMLX Pivot? +~~~ +~~~ +How do I enable tree mode in DHTMLX Pivot and choose which field becomes the parent row? +~~~ +~~~ +How do I change the hover color for primary buttons in the Material theme? +~~~ + +**서버 동기화와 내보내기** + +~~~ +How do I save the user's layout to a server whenever they change it? +~~~ +~~~ +How do I export the Pivot table to XLSX? +~~~ + +## Pivot 프롬프트를 위한 간단한 팁 + +- **어떤 API를 의미하는지 명시하세요.** `export`, 트리 행 확장/축소, 행 기준 필터링은 모두 Pivot 인스턴스가 아니라 `getTable()`이 반환하는 Table 인스턴스를 통해 동작합니다. 이 계층을 명확히 지정하면 어시스턴트가 Table 전용 메서드를 잘못된 객체에서 호출하는 일을 방지할 수 있습니다. +- **메서드와 프레디케이트를 구분하세요.** 집계 메서드(`sum`, `count`, `methods`의 커스텀 항목)는 이미 행이나 열에 있는 값을 요약합니다. 프레디케이트는 그룹화가 일어나기 전에 원시 값을 변환합니다. 프롬프트가 어느 단계를 대상으로 하는지 명시하세요. +- **원하는 `values` 항목 형태를 명확히 표현하세요.** `values` 항목은 `"method(field)"` 문자열이거나 `{ field, method }` 객체일 수 있습니다. 사용 중인 형태를 명시하면 어시스턴트가 세 번째 형태를 임의로 만들어내는 것을 막을 수 있습니다. +- **"Use the docs"를 추가하세요.** `update-config`와 `render-table`의 차이를 물어볼 때 이렇게 하세요. 이 둘은 서로 다른 빈도로 발생하며, 이런 차이는 오래된 학습 데이터가 놓치기 쉬운 바로 그런 종류의 세부 사항입니다. 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 09a1b49..8d00963 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 @@ -120,3 +120,4 @@ const table = new pivot.Pivot("#root", { - [가이드](/category/guides) 페이지는 설치, 데이터 로딩, 스타일링 및 Pivot 구성을 원활하게 진행하는 데 도움이 되는 기타 유용한 팁에 대한 지침을 제공합니다 - [API 레퍼런스](api/overview/main-overview.md)는 Pivot 기능에 대한 설명을 제공합니다 +- [DHTMLX MCP 서버](guides/mcp-server.md)는 AI 코딩 어시스턴트를 이 문서와 연결하여, 개발하는 동안 최신 Pivot API를 조회할 수 있게 해줍니다 diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/.sync b/i18n/ru/docusaurus-plugin-content-docs/current/.sync index a5b7004..4ed164f 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -44e03f98ab2c058ad802e8e3e08c689d0efdde69 +10518169aead802523be5a1c20e5730654345e9b 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..907c292 --- /dev/null +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,251 @@ +--- +sidebar_label: MCP-сервер DHTMLX +title: MCP-сервер DHTMLX Pivot для конфигурации, агрегации и экспорта +description: Конфигурация, методы агрегации, предикаты и API экспорта DHTMLX Pivot попадают к ИИ-ассистентам через MCP-сервер как актуальная документация, а не как догадка на основе данных обучения. +--- + +# MCP-сервер DHTMLX Pivot: конфигурация, агрегация и экспорт {#dhtmlx-pivot-mcp-server-configuration-aggregation-and-export} + +DHTMLX Pivot превращает [единый объект конфигурации](api/config/config-property.md) в полностью агрегированную таблицу и открывает доступ к целому второму API — [базовому виджету Table](api/methods/gettable-method.md) — для экспорта данных или раскрытия строк дерева. Изменения макета и полные перерисовки таблицы запускают собственные события: [редактирование макета](api/events/update-config-event.md) вызывает одно событие, а [каждая перерисовка внутри](api/events/render-table-event.md) — другое. Чтобы не ошибиться во всём этом, нужна актуальная документация, а не устаревшая догадка. + +Вместо этого обратитесь к MCP-серверу DHTMLX: он возвращает [актуальную структуру `config`](api/config/config-property.md), [путь экспорта через getTable()](guides/exporting-data.md) и [нужное событие для сохранения состояния](/guides/working-with-server#save-the-users-layout-to-resume-the-session), поэтому ассистент генерирует код, который соответствует тому, как Pivot на самом деле ведёт себя сегодня. + +### Конечная точка MCP {#mcp-endpoint} + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +MCP-сервер DHTMLX охватывает все основные продукты DHTMLX, а не только DHTMLX Pivot. Одна и та же конечная точка и инструкции по настройке работают независимо от того, с каким компонентом DHTMLX вы работаете. +::: + +## О чём разработчики Pivot спрашивают MCP-сервер {#what-pivot-developers-ask-the-mcp-server} + +MCP-сервер может рассказать почти всё о документации DHTMLX Pivot, начиная с: + +- Поиска актуального API для [методов](api/overview/methods-overview.md), [событий](api/overview/events-overview.md) и [свойств](api/overview/properties-overview.md), включая методы [Event Bus](api/overview/internal-eventbus-overview.md) и [состояния](api/overview/internal-state-overview.md). +- Генерации готового к запуску кода [инициализации](guides/initialization.md) с нужными для конкретной таблицы `fields`, `data` и структурой [`config`](api/config/config-property.md). +- Определения [строк, столбцов и значений](guides/working-with-data.md#define-pivot-structure) в свойстве `config`, включая обе допустимые формы записи `values`. +- Выбора или написания [методов агрегации](guides/working-with-data.md#applying-maths-methods) — от встроенного набора `sum`/`count`/`average` до пользовательского метода, добавленного через свойство [`methods`](api/config/methods-property.md). +- Предварительной обработки данных с помощью [предикатов](guides/working-with-data.md#processing-data-with-predicates) перед агрегацией, например группировки дат по месяцам. +- Изменения размера, закрепления и шаблонизации ячеек таблицы через [`tableShape`](api/config/tableshape-property.md) и [`headerShape`](api/config/headershape-property.md), включая [режим дерева](guides/configuration.md#enabling-the-tree-mode) и [закреплённые столбцы](guides/configuration.md#freezing-columns). +- [Локализации](guides/localization.md) подписей и форматов дат/чисел, а также [стилизации](guides/stylization.md) таблицы с помощью CSS-переменных `--wx-pivot-*`. +- [Экспорта](guides/exporting-data.md) таблицы в CSV или XLSX через экземпляр Table, который возвращает [`getTable()`](api/methods/gettable-method.md). +- Выбора между [`update-config`](api/events/update-config-event.md) и [`render-table`](api/events/render-table-event.md) при [сохранении состояния на сервере](/guides/working-with-server), а также интеграции Pivot с [React](guides/integration-with-react.md), [Vue](guides/integration-with-vue.md), [Angular](guides/integration-with-angular.md) и [Svelte](guides/integration-with-svelte.md). + +## Куда попадает вопрос о Pivot в MCP {#where-a-pivot-question-lands-in-mcp} + +Вопрос о Pivot, отправленный на MCP-сервер DHTMLX, проходит через конвейер Retrieval-Augmented Generation (RAG), построенный на Model Context Protocol (MCP), и попадает в один из двух сценариев: *Search*, который возвращает подходящие страницы документации, из которых ассистент пишет ответ, или *Inference*, который читает эти страницы и сам отвечает на вопрос. Обращения к документации требует только половина этого запроса. Ассистент выделяет эту половину и дописывает остальное — логику сохранения, специфичную для конкретного сервера, — из того, что уже знает. + +Рассмотрим промпт *«Напиши обработчик, который сохраняет config Pivot на сервер при каждом изменении макета»*: + +1. Ассистент выделяет половину, которая требует документации: какое событие слушать и как прочитать текущий конфиг. +2. Сервер находит документацию [Работа с сервером](/guides/working-with-server), к которой это относится. +3. Поскольку запрос — на генерацию кода, его обрабатывает *Search* (более узкий вопрос, например, срабатывает ли `render-table` чаще, чем `update-config`, ушёл бы в *Inference*). +4. *Search* извлекает подходящие страницы из векторного индекса актуальной документации Pivot. +5. Ассистент получает эти страницы в качестве контекста. +6. Опираясь на этот контекст, ассистент пишет обработчик [`update-config`](api/events/update-config-event.md), корректно пропуская более частые срабатывания `render-table`, а затем добавляет сам запрос на сохранение для целевого сервера из собственных знаний. + +Так код агрегации и экспорта Pivot остаётся согласованным с актуальным API. + +## Подключение ИИ-инструмента к MCP-серверу {#linking-your-ai-tool-to-the-mcp-server} + +Какой бы инструмент разработки с ИИ вы ни использовали вместе с Pivot, подключение к MCP-серверу сводится к одному шагу: указать в нём URL конечной точки ниже — через команду CLI или JSON-файл конфигурации. + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Далее — инструкции по настройке для популярных инструментов. + +### Claude Code {#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 {#cursor} + +:::info +Полный набор параметров настройки MCP — в [официальной документации](https://cursor.com/en-US/docs/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 {#google-antigravity} + +#### Antigravity 2.0 {#antigravity-20} + +:::info +Полная картина по интеграции MCP-сервера в Antigravity — в [официальной документации](https://antigravity.google/docs/mcp). +::: + +Чтобы подключить MCP-сервер DHTMLX к Google Antigravity, выполните следующие шаги: + +1. Откройте палитру команд +2. Введите «mcp add» +3. Выберите «HTTP» +4. Укажите следующие значения: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI {#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 {#chatgpt} + +:::info +Все шаги настройки MCP-коннектора в ChatGPT — в [официальной документации](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. Заполните данные коннектора: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- Authentication: `No authentication` +6. Нажмите **Create** + +После создания коннектора ChatGPT получает документацию с MCP-сервера в ходе диалогов. + +:::info +Для интенсивной работы с кодом лучше подойдут другие инструменты с поддержкой MCP. +::: + +### Другие инструменты {#other-tools} + +В панелях настроек других инструментов для разработки с ИИ это обычно называется «Model Context Protocol» или «Context Sources». Добавьте туда `https://docs.dhtmlx.com/mcp` как пользовательский источник. + +## Куда уходят ваши запросы {#where-your-queries-go} + +Будучи хостинговым сервисом, MCP-сервер никогда не выполняется на вашем оборудовании, не открывает локальные файлы и не хранит персональные данные. + +Сервер логирует запросы только для отладки проблем и улучшения сервиса. + +Запросите коммерческое развёртывание, чтобы полностью отключить логирование запросов. Свяжитесь по адресу `info@dhtmlx.com`, чтобы это организовать. + +## Промпты, которые дают верный результат по Pivot {#prompts-that-get-pivot-right} + +Промпт обычно касается одной из четырёх тем: конфига, агрегации, макета или синхронизации с сервером. Группы ниже уже называют тему за вас. + +**Конфиг и агрегация** + +~~~ +How do I add a custom aggregation method in DHTMLX Pivot? Use the docs. +~~~ +~~~ +How do I set a default sort order for a field in DHTMLX Pivot? +~~~ +~~~ +What's the difference between the two accepted forms of a values entry in the config property? +~~~ + +**Предикаты и поля** + +~~~ +How do I group date values by month using a custom predicate in DHTMLX Pivot? +~~~ +~~~ +How do I apply a currency format with a dollar-sign prefix to a numeric field? +~~~ + +**Макет и стилизация** + +~~~ +How do I freeze the first two row fields on the left in DHTMLX Pivot? +~~~ +~~~ +How do I enable tree mode in DHTMLX Pivot and choose which field becomes the parent row? +~~~ +~~~ +How do I change the hover color for primary buttons in the Material theme? +~~~ + +**Синхронизация с сервером и экспорт** + +~~~ +How do I save the user's layout to a server whenever they change it? +~~~ +~~~ +How do I export the Pivot table to XLSX? +~~~ + +## Небольшие советы для промптов о Pivot {#small-tips-for-pivot-prompts} + +- **Уточняйте, какое API вы имеете в виду.** `export`, раскрытие/сворачивание строк дерева и фильтрация по строкам — всё это работает через экземпляр Table, который возвращает `getTable()`, а не напрямую через экземпляр Pivot. Указание этого уровня не даёт ассистенту вызвать метод, доступный только у Table, не на том объекте. +- **Различайте метод и предикат.** Методы агрегации (`sum`, `count`, пользовательская запись в `methods`) сводят значения, уже находящиеся в строке или столбце. Предикаты преобразуют исходное значение до того, как происходит эта группировка. Указывайте, на какой этап нацелен ваш промпт. +- **Явно указывайте нужную форму записи `values`.** Элемент `values` может быть строкой `"method(field)"` или объектом `{ field, method }`. Указание используемой формы не даёт ассистенту придумать третий вариант. +- **Добавляйте «Use the docs»**, когда спрашиваете про `update-config` в сравнении с `render-table`. Эти события срабатывают с разной частотой, и именно такие детали устаревшие данные обучения обычно упускают. 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 49a45cb..9df0e29 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 @@ -120,3 +120,4 @@ const table = new pivot.Pivot("#root", { - Страницы раздела [Руководства](/category/guides) содержат инструкции по установке, загрузке данных, стилизации и другие полезные советы для работы с конфигурацией Pivot - [Справочник API](api/overview/main-overview.md) содержит описание функциональности Pivot +- [MCP-сервер DHTMLX](guides/mcp-server.md) подключает ИИ-ассистента для написания кода к этой документации, чтобы он мог обращаться к актуальному API Pivot во время разработки diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/.sync b/i18n/zh/docusaurus-plugin-content-docs/current/.sync index 0edad02..4ed164f 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -34a2b627cae6efda9e5b5b63191ac878cc868f7e +10518169aead802523be5a1c20e5730654345e9b 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..0d16715 --- /dev/null +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/mcp-server.md @@ -0,0 +1,251 @@ +--- +sidebar_label: DHTMLX MCP 服务器 +title: 用于 config、聚合和导出的 DHTMLX Pivot MCP 服务器 +description: 通过 MCP 服务器，DHTMLX Pivot 的 config、聚合方法、谓词和导出 API 以最新文档的形式提供给 AI 助手，而不是训练时产生的推测。 +--- + +# DHTMLX Pivot MCP 服务器：配置、聚合和导出 {#dhtmlx-pivot-mcp-server-configuration-aggregation-and-export} + +DHTMLX Pivot 将[一个配置对象](api/config/config-property.md)转换为完全聚合的表格，并开放了整个第二套 API——[底层的 Table widget](api/methods/gettable-method.md)，用于导出数据或展开树形行。布局更改和完整表格重绘各自触发自己的事件：[布局编辑](api/events/update-config-event.md)触发其中一个，而[底层的每一次重绘](api/events/render-table-event.md)触发另一个。要做对这一切，靠的是最新文档，而不是过时的猜测。 + +不妨改为查询 DHTMLX MCP 服务器：它会返回当前的 [`config` 结构](api/config/config-property.md)、[通过 getTable() 的导出路径](guides/exporting-data.md)，以及[用于持久化的正确事件](/guides/working-with-server#save-the-users-layout-to-resume-the-session)，从而让助手生成的代码与 Pivot 当前实际的行为方式相匹配。 + +### MCP 端点 {#mcp-endpoint} + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +DHTMLX MCP 服务器覆盖了所有主要的 DHTMLX 产品，而不仅仅是 DHTMLX Pivot。无论您使用哪个 DHTMLX 组件进行开发，相同的端点和配置说明都同样适用。 +::: + +## Pivot 开发者向 MCP 服务器提出的问题 {#what-pivot-developers-ask-the-mcp-server} + +MCP 服务器几乎可以告诉您关于 DHTMLX Pivot 文档的一切，从以下内容开始： + +- 查阅当前的 [方法](api/overview/methods-overview.md)、[事件](api/overview/events-overview.md)和[属性](api/overview/properties-overview.md) API，包括 [Event Bus](api/overview/internal-eventbus-overview.md) 和[状态](api/overview/internal-state-overview.md)方法。 +- 生成可直接运行的[初始化](guides/initialization.md)代码，包含特定表格所需的 `fields`、`data` 和 [`config`](api/config/config-property.md) 结构。 +- 在 `config` 属性中定义[行、列和值](guides/working-with-data.md#define-pivot-structure)，包括 `values` 条目所接受的两种形式。 +- 选择或编写[聚合方法](guides/working-with-data.md#applying-maths-methods)，从内置的 `sum`/`count`/`average` 集合，到通过 [`methods`](api/config/methods-property.md) 属性添加的自定义方法。 +- 在聚合之前使用[谓词](guides/working-with-data.md#processing-data-with-predicates)对数据进行预处理，例如按月对日期进行分组。 +- 通过 [`tableShape`](api/config/tableshape-property.md) 和 [`headerShape`](api/config/headershape-property.md) 调整表格单元格的大小、冻结和模板化，包括[树形模式](guides/configuration.md#enabling-the-tree-mode)和[冻结列](guides/configuration.md#freezing-columns)。 +- [本地化](guides/localization.md)标签及日期/数字格式，并通过 `--wx-pivot-*` CSS 变量为表格设置[样式](guides/stylization.md)。 +- 通过 [`getTable()`](api/methods/gettable-method.md) 返回的 Table 实例，将表格[导出](guides/exporting-data.md)为 CSV 或 XLSX 格式。 +- 在[将状态持久化到服务器](/guides/working-with-server)时，在 [`update-config`](api/events/update-config-event.md) 和 [`render-table`](api/events/render-table-event.md) 之间做出选择，或将 Pivot 与 [React](guides/integration-with-react.md)、[Vue](guides/integration-with-vue.md)、[Angular](guides/integration-with-angular.md) 和 [Svelte](guides/integration-with-svelte.md) 集成。 + +## Pivot 问题在 MCP 中的去向 {#where-a-pivot-question-lands-in-mcp} + +发送到 DHTMLX MCP 服务器的 Pivot 问题会经过一条基于 Model Context Protocol（MCP）构建的检索增强生成（RAG）流水线，并落入两种工作流之一：*Search*，返回匹配的参考页面供助手据此编写代码；或 *Inference*，直接读取这些页面并自行回答问题。这类请求中只有一半需要查阅文档。助手会精确定位出这一半，其余部分——即特定于服务器的保存逻辑——则依靠自身已有的知识来编写。 + +以提示词 *"编写一个处理程序，在每次布局更改时将 Pivot 的 config 保存到服务器。"* 为例： + +1. 助手划定出需要查阅文档的那一半：应监听哪个事件，以及如何读取当前的 config。 +2. 服务器定位到其映射的[与服务器配合使用](/guides/working-with-server)文档。 +3. 由于该请求需要生成代码，因此由 *Search* 处理（而更细化的问题，例如 `render-table` 是否比 `update-config` 触发得更频繁，则会交给 *Inference* 处理）。 +4. *Search* 从当前 Pivot 文档的向量索引中获取匹配的页面。 +5. 助手将这些页面作为上下文获取回来。 +6. 基于该上下文，助手编写 [`update-config`](api/events/update-config-event.md) 监听器，正确跳过触发更频繁的 `render-table`，然后依靠自身知识添加针对目标服务器的实际保存请求。 + +如此一来，Pivot 的聚合和导出代码便能始终与当前 API 保持一致。 + +## 将您的 AI 工具连接到 MCP 服务器 {#linking-your-ai-tool-to-the-mcp-server} + +无论您在使用 Pivot 时搭配哪种 AI 开发工具，将其接入 MCP 服务器都只需一步：通过 CLI 命令或 JSON 配置文件，将其指向下面的端点 URL。 + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +以下是常用工具的具体设置说明。 + +### Claude Code {#claude-code} + +:::info +Claude Code 的[官方文档](https://code.claude.com/docs/en/mcp)详细介绍了每一种 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 {#cursor} + +:::info +有关完整的 MCP 配置选项，请参阅 Cursor 的[官方文档](https://cursor.com/en-US/docs/mcp)。 +::: + +添加服务器的步骤： + +1. 打开设置（Mac 上按 `Cmd+Shift+J`，Windows/Linux 上按 `Ctrl+Shift+J`） +2. 进入 **Tools & MCP** +3. 点击 **Add Custom MCP** +4. 粘贴以下 config： + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity {#google-antigravity} + +#### Antigravity 2.0 {#antigravity-20} + +:::info +关于在 Antigravity 中集成 MCP 服务器的完整说明，请参阅[官方文档](https://antigravity.google/docs/mcp)。 +::: + +以下是将 DHTMLX MCP 服务器与 Google Antigravity 连接所需完成的步骤： + +1. 打开命令面板 +2. 输入 "mcp add" +3. 选择 "HTTP" +4. 提供以下值： +- Name： +~~~jsx +dhtmlx-mcp +~~~ +- URL： +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI {#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 {#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. 填写连接器详情： +- Name： +~~~jsx +dhtmlx-mcp +~~~ +- URL： +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- Authentication：`No authentication` +6. 点击 **Create** + +创建连接器后，ChatGPT 会在对话过程中从 MCP 服务器提取文档。 + +:::info +对于高强度的编码工作流，其他支持 MCP 的工具可能更合适。 +::: + +### 其他工具 {#other-tools} + +其他 AI 编码工具的设置面板通常将此功能称为 "Model Context Protocol" 或 "Context Sources"。请在其中将 `https://docs.dhtmlx.com/mcp` 添加为自定义源。 + +## 您的查询数据流向何处 {#where-your-queries-go} + +作为一项托管服务，MCP 服务器从不在您的硬件上运行，从不打开本地文件，也从不存储个人信息。 + +服务器仅出于调试问题和改进服务的目的记录查询。 + +如需完全关闭查询日志记录，请申请商业部署。请联系 `info@dhtmlx.com` 进行安排。 + +## 让 Pivot 得到正确结果的提示词 {#prompts-that-get-pivot-right} + +一条提示词通常涉及四件事之一：config、聚合、布局或服务器同步。下面的分组会预先为您点明这一点。 + +**Config 与聚合** + +~~~ +How do I add a custom aggregation method in DHTMLX Pivot? Use the docs. +~~~ +~~~ +How do I set a default sort order for a field in DHTMLX Pivot? +~~~ +~~~ +What's the difference between the two accepted forms of a values entry in the config property? +~~~ + +**谓词与字段** + +~~~ +How do I group date values by month using a custom predicate in DHTMLX Pivot? +~~~ +~~~ +How do I apply a currency format with a dollar-sign prefix to a numeric field? +~~~ + +**布局与样式** + +~~~ +How do I freeze the first two row fields on the left in DHTMLX Pivot? +~~~ +~~~ +How do I enable tree mode in DHTMLX Pivot and choose which field becomes the parent row? +~~~ +~~~ +How do I change the hover color for primary buttons in the Material theme? +~~~ + +**服务器同步与导出** + +~~~ +How do I save the user's layout to a server whenever they change it? +~~~ +~~~ +How do I export the Pivot table to XLSX? +~~~ + +## Pivot 提示词写作小贴士 {#small-tips-for-pivot-prompts} + +- **说明您指的是哪个 API。** `export`、树形行的展开/折叠以及按行筛选，都是通过 `getTable()` 返回的 Table 实例运行的，而不是直接通过 Pivot 实例。明确指出这一层级，可以避免助手在错误的对象上调用仅 Table 才有的方法。 +- **区分方法与谓词。** 聚合方法（`sum`、`count`，或 `methods` 中的自定义条目）用于汇总已存在于某行或某列中的值。谓词则在分组发生之前对原始值进行转换。请说明您的提示词针对的是哪个阶段。 +- **明确说明您想要的 `values` 条目形式。** `values` 条目可以是 `"method(field)"` 字符串，也可以是 `{ field, method }` 对象。明确说明您使用的形式，可以避免助手臆造出第三种结构。 +- **在询问 `update-config` 与 `render-table` 的区别时，加上一句 "Use the docs"。** 这两个事件的触发频率不同，而这正是过时训练数据容易忽略的那类细节。 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 8129b8a..1e6395f 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 @@ -120,3 +120,4 @@ const table = new pivot.Pivot("#root", { - [指南](/category/guides)页面提供有关安装、加载数据、样式设置及其他有用技巧的说明，帮助您顺畅地完成 Pivot 配置 - [API 参考](api/overview/main-overview.md)提供 Pivot 功能的详细说明 +- [DHTMLX MCP 服务器](guides/mcp-server.md)将 AI 编码助手连接到本文档，使其能够在您开发时查阅当前的 Pivot API