Skip to content

docs: add trae guid #3934

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xile611 merged 1 commit into from
Apr 28, 2025
Merged

docs: add trae guid #3934

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 30 additions & 27 deletions docs/assets/guide/en/tutorial_docs/Basic/DeepSeek_with_Cursor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,79 @@
# Cursor+DeepSeek: Quick Start to Your VChart Code
# Cursor+DeepSeek: Quick Start with 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?
In the previous chapters, we have learned about the basic components of a spec and how to generate basic charts. However, due to VChart's powerful features and diverse APIs, it can be challenging to quickly implement complex charts. Is there an easy way to get started without having to search 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!
The answer is yes! Thanks to the rapid development of AI technology, AI tools can not only help you quickly understand and master VChart usage but also significantly improve coding efficiency, allowing developers to focus on creativity and business logic implementation.

In this tutorial, we'll learn how to quickly get started with your VChart code by configuring `Cursor` and `DeepSeek` (you can use other AIs as well, and Cursor's default model is also fine - the key is custom document integration)!

## 1. Preparation

### A VChart Project
### A Project Using VChart

For example, you may have a simple project initialized with:
For example, I have a simple project initialized with `npx create-react-app my-app --template typescript`, which looks like this after startup:

<div style="text-align: center;">
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepSeek+Cursor_1.PNG" alt="初始化项目">
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepSeek+Cursor_1.PNG" alt="Initialized Project">
</div>

### DeepSeek

Register deepSeek, create a new API key on the [deepSeek api 官网](https://platform.deepseek.com/api_keys)
Register for DeepSeek and create your API key on the [DeepSeek API official website](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`
Download and register from the [official website](https://www.cursor.com/), open your VChart project with `cursor`, and configure `cursor`

### Configure Cursor

### Configure cursor
Take `deepSeek-V3` as an example, its model name is `deepseek-chat`, and the API address is https://api.deepseek.com/v1. For details, see the [API usage official website](https://api-docs.deepseek.com/zh-cn/)

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.
Create a new model on the `model` page and 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_
_Note: Currently, `cursor` officially does not support direct integration with `deepSeek`. We can achieve integration with `deepSeek` by overriding the `openAPI` interface address. During the setup process, you need to close other models first and only integrate the `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配置">
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_cursor_2.PNG" alt="Cursor Configuration">
</div>

## 2. Practice
## 2. Practical Usage

### Add Column Chart
### Add a Bar 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.
Use the `cmd+i` command to invoke AI interaction, and let the AI help us generate a simple bar chart code. After applying this spec, we can see the result - a simple bar chart is rendered. We can see that `deepSeek` has a certain understanding of `vchart`, and simple charts can be added directly. Let's 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">
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deep_seek_3.PNG" alt="Cursor Result" height="380">
<img src="https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/deepseek_4.PNG" alt="Rendering Result" height="380">
</p>

### Complex Scenario, Inject Docs
### Complex Scenario: Injecting 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.
We want to add a mean auxiliary line on the y-axis. Looking at the result, it's not correct. Upon closer inspection, we can see that although `markLine` is written as expected, the `spec` doesn't conform to the specification, and the mean line has been calculated. We'll 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
### Setting up Docs

Enter the `cursor` setting page, select `Features`, add docs, you can choose one of the following docs addresses:
Go to the `cursor` settings page, select `Features`, and add docs. You can choose from 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)
![Configure 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
You can also add new docs directly in the editor through `@Docs`

### Experimental Result
### Experimental Results

After editing the new added docs again, you can get the correct result!
By adding the new docs and editing again, we 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!
Through this tutorial, you've learned how to improve your VChart coding efficiency using `cursor+deepseek`, while exploring VChart's powerful features and flexibility to create colorful charts. Happy coding!
197 changes: 197 additions & 0 deletions ...tutorial_docs/Basic/Quickly_Get_Started_with_VisActor_Using_Trae_Context_Doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
---
title: Using Cursor with DeepSeek to Quickly Get Started with Unfamiliar Components

key words: VisActor, VChart, VTable, VStory, VMind, VGrammar, VRender, Visualization, Chart, Data, Table, Graph, Gis, LLM
---
In today's software development field, developers face the challenge of continuously improving development efficiency and reducing the learning curve. The core purpose of this document is to help developers achieve this goal, especially by cleverly using **component official documentation** and combining tools like **Cursor** and **DeepSeek** to let AI automatically generate the required code, quickly lowering the entry barrier. Next, we will experiment with several projects in the relatively new open-source project, VisActor (https://www.visactor.com; https://www.visactor.io/), an open-source visualization solution, to see how effective it is.

# Preparation

## Create a Test Project

For example, I have a simple project initialized with `npx create-react-app my-app --template typescript`, which looks like this after starting:

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/C4cabsu8goKMv4xiaBtcDqvmnuf.gif' alt='' width='1000' height='auto'>

## Obtain DeepSeek API Key

Register with DeepSeek and create your API key on the [DeepSeek API](https://platform.deepseek.com/api_keys) official website.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/JNQPbFzIOoYknHxr3aDcg60onCg.gif' alt='' width='1000' height='auto'>

## Configure Cursor

Official website: https://www.cursor.com/

Download and register, open your VChart project with Cursor, and configure Cursor.

Using DeepSeek-V3 as an example, its API model name is `deepseek-chat`, and the API address is https://api.deepseek.com/v1. For more details, see the [API usage official website](https://api-docs.deepseek.com/zh-cn).

Create a new model on the model page, set the corresponding API address and model name.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/WBBCb55WwoF3HUxnhGtc6P5Un5c.gif' alt='' width='1000' height='auto'>

Of course, you can also use any other AI model; here, we use DeepSeek.

# Inject Official Tutorial into @Docs

# Practical Verification

## VTable Test

VTable (https://www.visactor.io/vtable/; https://www.visactor.com/vtable/) is a powerful table component in the VisActor visualization library. It is designed to meet diverse data presentation needs, offering high flexibility and customizability. Whether it's simple data listing or complex data analysis display scenarios, VTable can provide excellent solutions.

VTable has the following core features:

- Supports various table types: basic tables, pivot tables, transposed tables, pivot charts, etc.

- Powerful interaction features: sorting, filtering, row and column dragging, cell editing, etc.

- Rich cell types: text, charts, progress bars, checkboxes, sparklines, etc.

- High-performance rendering: supports smooth display of millions of data

- Multi-platform adaptation: perfect support for mainstream frameworks like Vue, React

### Invoke AI Interaction Panel in Cursor and Generate Code

After setting up the project environment, use `cmd + i` to invoke the AI interaction panel. We directly let AI generate a basic table code snippet for inserting VTable.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/AIWSbqgyhog1DZxaYGCcl9kinsb.gif' alt='' width='1000' height='auto'>

However, the initial generation result shows that AI does not recognize VTable's `ListTable`, possibly due to the inability to accurately recognize VTable's ListTable configuration.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/IfZ4bjODTocB2oxPfDScNdvnnEg.gif' alt='' width='1000' height='auto'>

### Inject Official Tutorial into @Docs

To solve the above problem, we inject the official tutorial into @Docs.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/DOapbrW3gowfgDxw6v9cagArnPe.gif' alt='' width='1000' height='auto'>

Explicitly specify `VisActor VTable` in the `prompt` in @Docs. After this step, we are pleasantly surprised to find that AI can correctly write the implementation logic according to the `option` in VTable.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/HOHPbR1gho68fAxnA0XcWR3Xnuc.gif' alt='' width='1000' height='auto'>

### Code Application and Effect Display

Copy the generated code into the corresponding file, run the project, and you can see the initial effect, with the table correctly generated.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/Vbf8bECXsoJngRxMxdzcbZgunfb.gif' alt='' width='1000' height='auto'>

Then, we continue to let AI modify the table style. AI provided reasonable modification suggestions,

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/CM5lbR4tIokooxxxNotcvtakngd.gif' alt='' width='1000' height='auto'>

After running the project again, we got a display effect that better meets the requirements:

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/Co0mb5MdhoTuE1xGpwtcqC5Vngu.gif' alt='' width='406' height='auto'>

## VChart Test

### Add a Bar Chart

Invoke AI interaction with the `cmd+i` command, and let AI help us generate a simple bar chart code first.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/WnzubAlKKo70ePxjlVbclc6ynmg.gif' alt='' width='970' height='auto'>

Directly apply this spec, and we check the result; a simple bar chart is rendered. It can be seen that DeepSeek has a certain understanding of VChart, and simple charts can be directly added. Let's try a more complex scenario.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/HYjbb8u8ToXkbBxJ8o6cGqPgn8f.gif' alt='' width='1000' height='auto'>

### Complex Scenario, Inject Docs

We hope to add an average auxiliary line on the y-axis, check the result, but the result is incorrect. Upon closer inspection, it can be found that although the markLine is written as if it is correct, the spec does not conform to the specification, and the average line is calculated. We solve this problem by injecting docs.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/UJdkbdp0poJRSzxy94kcOHqZnsd.gif' alt='' width='980' height='auto'>

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/RQgwbW3WGopiNAxoEAXcJhornqc.gif' alt='' width='1000' height='auto'>

#### Set Docs

Enter the Cursor settings page, select `Features`, add new docs, the docs address is https://visactor.com/vchart (https://visactor.io/vchart); you can also directly add through @Docs on the editing page.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/JQarbKxBEoKc3FxjN4Fc9jydnXb.gif' alt='' width='1000' height='auto'>

### Experimental Results

By editing again with the newly added docs, the correct result can be obtained!

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/PJXKbmAccoeUmjxXButcR45dnZe.gif' alt='' width='1000' height='auto'>

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/SIFlbNJ5eo0bbjxRRMCcoruFnWp.gif' alt='' width='1000' height='auto'>

## VStory Test

VStory (GitHub: https://github.com/VisActor/VStory/; site: https://www.visactor.io/vstory/, https://www.visactor.com/vstory/) is a narrative-oriented visualization development framework that integrates the capabilities of all VisActor visualization components, making it more challenging to use. We conduct a simple test.

Invoke AI interaction with the `cmd+i` command, and let AI help us generate a simple dashboard demo first.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/WNZAbOsbVoBd46xTGChcqbm3nbh.gif' alt='' width='766' height='auto'>

It can be found that it is completely incorrect because DeepSeek uses data from 2023, and VStory had not been released at that time, so it does not know how to use it. At this point, we need to let it read the documentation to learn.

### Inject Docs

We solve this problem by injecting docs.

Enter the Cursor settings page, select `Features`, add new docs, the docs address is https://visactor.com/vstory/guide/tutorial_docs/VStory_Website_Guide; you can also directly add through @Docs on the editing page.

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/OtoTbG06lodqIaxBCkscQztNnoh.gif' alt='' width='1000' height='auto'>

### Experimental Results

By editing again with the newly added docs, the correct result can be obtained!

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/HqKdbVHgYoM9a6xmsZqcuZ4QnDq.gif' alt='' width='754' height='auto'>

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/X1UZb9HXsoIdiRxqLCucJbqPnZc.gif' alt='' width='1000' height='auto'>

**Since VStory uses VChart, VTable, and VRender, to achieve better results, you should add the documentation of VChart, VTable, and VRender to the context simultaneously.**

# Simple Summary

1. Improve Development Efficiency

- Quick Access: Directly access VisActor API documentation through Cursor

- Intelligent Suggestions: Precise code completion based on VisActor documentation

2. Enhance Development Experience

- Seamless Integration: Directly obtain VTable usage guidance in the development environment

- Real-time Feedback: Quickly verify code effects

3. Reduce Learning Costs

- Documentation Assistance: Access VisActor official examples at any time

- Code Generation: Automatically generate code that complies with VisActor standards

4. Improve Code Quality

- Standard Check: Ensure code complies with VTable best practices

- Performance Optimization: Automatically generate high-performance table configurations

# Contact Us

GitHub: [github.com/VisActor](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FVisActor)

Leave a message on the VisActor WeChat subscription account (you can join the WeChat group through the subscription account menu):

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/VyPsbaIz8offShxlv0ZcqqD8nfd.gif' alt='' width='258' height='auto'>

VisActor official website: [www.visactor.io/](https://link.juejin.cn/?target=https%3A%2F%2Fwww.visactor.io%2Fvtable); [www.visactor.](https://link.juejin.cn/?target=https%3A%2F%2Fwww.visactor.io%2Fvtable)com

Feishu Group:

<img src='https://cdn.jsdelivr.net/gh/xuanhun/articles/visactor/img/NAQhbtdelofTIyxk9pgcE3hqnQG.gif' alt='' width='264' height='auto'>

Discord: https://discord.com/invite/3wPyxVyH6m


---

The doc is contributed by [玄魂](https://github.com/xuanhun)
7 changes: 7 additions & 0 deletions docs/assets/guide/menu.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,13 @@
"zh": "Cursor+DeepSeek，快速上手属于你的 VChart 代码",
"en": "Cursor+DeepSeek: Quick Start to Your VChart Code"
}
},
{
"path": "Quickly_Get_Started_with_VisActor_Using_Trae_Context_Doc",
"title": {
"zh": "使用 Trae Context Doc 快速上手 VisActor",
"en": "Quickly Get Started with VisActor Using Trae Context Doc"
}
}
]
},
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/guide/zh/tutorial_docs/Basic/DeepSeek_With_Cursor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
在前面的章节中，我们已经大致了解了一份基础 spec 的组成部分以及基础图表的具体生成。然而 VChart 因为其功能的强大和 API 的多样性，想要使用 VChart 快速实现一个复杂的图表可能较为困难，那么有没有一种简单轻松的方式，可以快速上手，无需在 API 文档中苦苦寻找呢？

答案是肯定的！得益于当前 AI 技术的飞速发展，通过 AI 工具不仅可以快速理解和掌握 VChart 的使用方法，还能显著提升编码效率，让开发者专注于创造力和业务逻辑的实现。
这篇教程我们会通过配置`Cursor`和`DeepSeek`（可以是其他任何 AI），快速快速上手属于你的 VChart 代码！
这篇教程我们会通过配置`Cursor`和`DeepSeek`（可以是其他任何 AI,当然使用Cursor 默认的模型也是ok的，重点是自定义引入文档），快速快速上手属于你的 VChart 代码！

## 1. 前期准备

Expand Down
Loading
Loading