Using Cursor with DeepSeek to Quickly Get Started with Unfamiliar Components

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: Obtain DeepSeek API Key Register with DeepSeek and create your API key on the DeepSeek API official website. 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. Create a new model on the model page, set the corresponding API address and model name. 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. 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. Inject Official Tutorial into @Docs To solve the above problem, we inject the official tutorial into @Docs. 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. 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. Then, we continue to let AI modify the table style. AI provided reasonable modification suggestions, After running the project again, we got a display effect that better meets the requirements: 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. 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. 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. 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. Experimental Results By editing again with the newly added docs, the correct result can be obtained! 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 intera

Feb 8, 2025 - 11:39

Using Cursor with DeepSeek to Quickly Get Started with Unfamiliar Components

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:

Obtain DeepSeek API Key

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.

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

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.

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.

Inject Official Tutorial into @Docs

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

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.

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.

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

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

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.

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.

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.

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.

Experimental Results

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

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.

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.

Experimental Results

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

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

Improve Development Efficiency

Quick Access: Directly access VisActor API documentation through Cursor
Intelligent Suggestions: Precise code completion based on VisActor documentation

Enhance Development Experience

Seamless Integration: Directly obtain VTable usage guidance in the development environment
Real-time Feedback: Quickly verify code effects

Reduce Learning Costs

Documentation Assistance: Access VisActor official examples at any time
Code Generation: Automatically generate code that complies with VisActor standards