Merge pull request #3733 from VisActor/feat/ai_docs

Add cusor + deepseek docs into guide
VisActor · Feb 20, 2025 · 3022f4b · 3022f4b
2 parents 5cba48a + cc32e51
commit 3022f4b
Show file tree

Hide file tree

Showing 3 changed files with 160 additions and 0 deletions.
diff --git a/docs/assets/guide/en/tutorial_docs/Basic/DeepSeek_with_Cursor.md b/docs/assets/guide/en/tutorial_docs/Basic/DeepSeek_with_Cursor.md
@@ -0,0 +1,76 @@
+# Cursor+DeepSeek: Quick Start to Your VChart Code
+
+In the previous sections, we have gained a basic understanding of the components of a spec and how a basic chart is generated. However, due to VChart's powerful features and diverse APIs, quickly implementing a complex chart with VChart can be challenging. Is there an easy way to get started without endlessly searching through API documentation?
+
+The answer is yes! Thanks to the rapid development of current AI technologies, you can quickly understand and master VChart usage with AI tools. This not only significantly boosts your coding efficiency but also allows you as a developer to focus on creativity and business logic. In this tutorial, we will configure `Cursor` and `DeepSeek` (or any other AI) to help you quickly get started with your VChart code!
+
+## 1. Preparation
+
+### A VChart Project
+
+For example, you may have a simple project initialized with:
+
+<div style="text-align: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepSeek+Cursor_1.PNG" alt="初始化项目">
+</div>
+
+### DeepSeek
+
+Register deepSeek, create a new API key on the [deepSeek api 官网](https://platform.deepseek.com/api_keys)
+
+### Cursor
+
+Download and register on the [official website](https://www.cursor.com/), use `cursor` to open your VChart project, and configure `cursor`
+
+### Configure cursor
+
+For example, the model name is `deepseek-chat`, the API address is https://api.deepseek.com/v1, see [api usage official website](https://api-docs.deepseek.com/zh-cn/)
+We create a new model in the `model` page, set the corresponding `api` address and `model` name.
+
+_Note: Currently, `cursor` official website does not support direct access to `deepSeek`. We can achieve access to `deepSeek` by overriding the interface address of `openAPI`. During the setup process, we need to close other models and only access `deepSeek` model_
+
+<div style="text-align: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_en_1.jpeg" alt="cursor配置">
+</div>
+
+## 2. Practice
+
+### Add Column Chart
+
+Use `cmd+i` command to call up AI interaction, directly let AI generate a simple column chart code, apply this spec, we check the result, a simple column chart is rendered; we can find that `deepSeek` has a certain understanding of `vchart`, simple charts can be directly added, we try a more complex scenario.
+
+<p style="text-align: center;">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deep_seek_3.PNG" alt="cursor结果" height="380">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_4.PNG" alt="渲染结果" height="380">
+</p>
+
+### Complex Scenario, Inject Docs
+
+We hope to add an average auxiliary line to the y-axis, check the result, but the result is not correct, carefully check to find that `markLine` seems to be written correctly, but the `spec` does not conform to the specification, and the average line has been calculated, we solve this problem by injecting docs.
+
+<p style="text-align: center;">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_5.png" alt="markline_cursor" height="380">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_6.png" alt="markline_result" height="380">
+</p>
+
+### Set Docs
+
+Enter the `cursor` setting page, select `Features`, add docs, you can choose one of the following docs addresses:
+
+- https://visactor.com/vchart
+- https://visactor.io/vchart
+
+![配置docs](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deep_seek_6.gif)
+
+You can also directly add a new doc through `@Docs` in the editing page
+
+### Experimental Result
+
+After editing the new added docs again, you can get the correct result!
+
+<p style="text-align: center;">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_7.png" alt="markline_cursor" height="380">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_8.png" alt="markline_result" height="380">
+</p>
+
+Through this tutorial, you have learned how to use `cursor+deepseek` to improve your VChart coding efficiency and explore the powerful features and flexibility of VChart. I wish you a pleasant coding experience!
diff --git a/docs/assets/guide/menu.json b/docs/assets/guide/menu.json
@@ -56,6 +56,13 @@
                 "zh": "一份基础的 spec",
                 "en": "A Basic Spec"
               }
+            },
+            {
+              "path": "DeepSeek_With_Cursor",
+              "title": {
+                "zh": "Cursor+DeepSeek，快速上手属于你的 VChart 代码",
+                "en": "Cursor+DeepSeek: Quick Start to Your VChart Code"
+              }
             }
           ]
         },

diff --git a/docs/assets/guide/zh/tutorial_docs/Basic/DeepSeek_With_Cursor.md b/docs/assets/guide/zh/tutorial_docs/Basic/DeepSeek_With_Cursor.md
@@ -0,0 +1,77 @@
+# Cursor+DeepSeek，快速上手属于你的 VChart 代码
+
+在前面的章节中，我们已经大致了解了一份基础 spec 的组成部分以及基础图表的具体生成。然而 VChart 因为其功能的强大和 API 的多样性，想要使用 VChart 快速实现一个复杂的图表可能较为困难，那么有没有一种简单轻松的方式，可以快速上手，无需在 API 文档中苦苦寻找呢？
+
+答案是肯定的！得益于当前 AI 技术的飞速发展，通过 AI 工具不仅可以快速理解和掌握 VChart 的使用方法，还能显著提升编码效率，让开发者专注于创造力和业务逻辑的实现。
+这篇教程我们会通过配置`Cursor`和`DeepSeek`（可以是其他任何 AI），快速快速上手属于你的 VChart 代码！
+
+## 1. 前期准备
+
+### 一个使用 vchart 的项目
+
+例如我有一个通过`npx create-react-app my-app --template typescript` 初始化的一个简单项目，启动后如下所示：
+
+<div style="text-align: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepSeek+Cursor_1.PNG" alt="初始化项目">
+</div>
+
+### DeepSeek
+
+注册 deepSeek，在[deepSeek api 官网](https://platform.deepseek.com/api_keys)上新建一个属于你的 api key
+
+### Cursor
+
+在[官网](https://www.cursor.com/)下载并注册，用`cursor`打开你的 VChart 项目，我们对`cursor`进行配置
+
+### 配置 cursor
+
+以`deepSeek-V3`为例，其模型名称为`deepseek-chat`，API 地址为 https://api.deepseek.com/v1 ，详见[api 使用官网](https://api-docs.deepseek.com/zh-cn/)
+我们在 `model` 页面进行新建，设置对应的 `api` 地址和 `model` 名称.
+
+_值得注意的是，目前`cursor`官方并不支持直接接入`deepSeek`，我们可以通过覆盖`openAPI`的接口地址达到接入`deepSeek`的目的。在设置过程中，需要先关闭其他模型，只接入`deepSeek`模型_
+
+<div style="text-align: center;">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_cursor_2.PNG" alt="cursor配置">
+</div>
+
+## 2. 实战使用
+
+### 新增柱图
+
+通过`cmd+i`命令唤起 ai 交互，直接让 ai 帮我们先生成一个简单的柱图代码，直接应用这个 spec，我们查看结果，一个简单的柱图就渲染完成了；可以发现`deepSeek`对`vchart`有着一定的认知，简单的图表可以直接添加，我们尝试下更复杂的场景。
+
+<p style="text-align: center;">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deep_seek_3.PNG" alt="cursor结果" height="380">
+  <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_4.PNG" alt="渲染结果" height="380">
+</p>
+
+### 复杂场景，注入 docs
+
+我们希望添加一条 y 轴的均值辅助线，查看结果，然而结果并不正确，仔细查看可以发现，`markLine`虽然写的像是这么回事，但是`spec`并不符合规范，而且均值线经过了计算，我们通过注入 docs 来解决这个问题。
+
+<p style="text-align: center;">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_5.png" alt="markline_cursor" height="380">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_6.png" alt="markline_result" height="380">
+</p>
+
+### 设置 docs
+
+进入`cursor`设置页面，选择`Features`，新增 docs，可以从以下 docs 地址中任选其一:
+
+- https://visactor.com/vchart
+- https://visactor.io/vchart
+
+![配置docs](https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deep_seek_6.gif)
+
+你也可以直接在编辑页面通过`@Docs`进行新增
+
+### 实验结果
+
+通过将新加入的 docs，再次编辑，可以得到正确的结果！
+
+<p style="text-align: center;">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_7.png" alt="markline_cursor" height="380">
+ <img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_8.png" alt="markline_result" height="380">
+</p>
+
+通过本教程，您已经了如何通过`cursor+deepseek`来提升你的 VChart 编码效率，同时探索 VChart 的强大功能和灵活性，编绘出绚丽多彩的图表。祝您编码愉快！