Meet the Syncfusion AI Coding Assistants: Build Blazor and React Apps at Lightning Speed [Webinar Show Notes]
ChatGPT
Perplexity
Claude
GrokIn this webinar, Senior Product Manager Shriram Sankaran introduced the Syncfusion AI Coding Assistants, powerful tools that help developers build Blazor and React apps at lightning speed. If you missed the webinar or would like to watch it again, the recording of it is uploaded to our YouTube channel and embedded in these show notes.
Time stamps
- [00:00] Introduction and agenda
- [01:34] Overview of Syncfusion AI Coding Assistants
- [04:11] Why use the AI Coding Assistants
- [05:22] Getting started: prerequisites and setup
- [06:28] Live demo: React AI Coding Assistant
- [12:36] Generate your Syncfusion API key
- [13:24] Using the assistants in Code Studio
- [16:12] Live demo: Blazor AI Coding Assistant
- [20:47] Using the assistants effectively
- [22:53] Privacy and data protection
- [23:40] Unlimited access model
- [24:22] Key takeaways and getting started
Accelerating development with AI
Syncfusion’s AI Coding Assistants are model context protocol (MCP) servers designed to work seamlessly with Syncfusion’s Blazor and React component libraries. Unlike generic AI tools, they deliver context-aware, component-specific guidance, offering accurate code generation, configuration help, and troubleshooting support directly within your IDE.
Why use the Syncfusion AI Coding Assistants
These assistants are built to automate repetitive coding tasks, integrate documentation and examples directly in your workflow, and help you resolve issues faster. Developers can focus on unique business logic while letting the assistant handle boilerplate setup.
For example, simply type a prompt like, “Create a Blazor grid with paging, sorting, and filtering,” and the assistant will instantly generate fully functional code for you to customize.
Getting started
To begin using the AI Coding Assistants, you’ll need:
- A Free or licensed Syncfusion account.
- A Syncfusion API Key, generated through your account dashboard.
- A Blazor or React project with Syncfusion libraries installed.
Once configured, you can access the assistants within Visual Studio Code or Syncfusion Code Studio by adding a simple MCP configuration file and linking your API key.
Live demos
Shriram demonstrated two live examples:
- React AI Coding Assistant: Automatically generate a React Data Grid component with sorting enabled.
- Blazor AI Coding Assistant: Add a functional Accordion component with expand mode using a simple prompt.
Each demo showcased how quickly the assistants can set up and customize components, saving developers hours of manual work.
Best practices for effective use
- Be specific in your prompts for the most accurate results.
- Provide context about your project type (e.g., dashboard, SPA).
- Use fresh sessions when switching tasks.
- Avoid using sensitive or production data in prompts.
- Review step-by-step code explanations to learn as you build.
Privacy and security
Syncfusion ensures enterprise-grade privacy. Your code and project files remain private, the assistants do not access or store your data, nor is it used for model training. All processing occurs securely within your selected IDE environment.
Unlimited access model
Unlike other AI tools, Syncfusion’s AI Coding Assistants offer unlimited usage. You can explore, iterate, and build freely without quotas or restrictions. They work for both individual developers and large teams.
Key takeaways
The AI Coding Assistants:
- Accelerate development for Blazor and React.
- Are easy to configure in VS Code or Code Studio.
- Are secure, private, and unrestricted in use.
- Were designed to enhance productivity and learning through context-aware assistance.
Q&A
Q1: How do I do an aggregated product grid?
A: To create a Syncfusion DataGrid with aggregates, use one of the following prompts:
“#SyncfusionReactAssistant Add Grid component with aggregates.”
“#SyncfusionBlazorAssistant Add Grid component with aggregates.”
Q2: How do I set up the assistants using VS Code?
A: The AI assistant can be set up in VS Code by following the steps outlined in the React documentation or Blazor documentation.
Q3: I have installed Code Studio. I have generated an API Key. How do I proceed?
A: Once the API key is generated, follow the steps in the React documentation or Blazor documentation to install and use the AI Coding Assistant.
Q4: I visited the get started page. I have what is required. However, I can’t find information on how to activate the license or use the API key.
A: The API key can be generated on this page when you are signed in. Once generated, you can configure the MCP server according to our documentation.