Skip to content

Commit 65bad45

Browse files
Merge branch 'development' of https://github.com/syncfusion-content/blazor-docs into 982048-BulletChartUGDev
2 parents 576d565 + 6ed7d49 commit 65bad45

File tree

264 files changed

+1626
-1216
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

264 files changed

+1626
-1216
lines changed

blazor-toc.html

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,13 @@
8383
</li>
8484
</ul>
8585
</li>
86+
<li>AI Developer Tools
87+
<ul>
88+
<li><a href="/blazor/ai-developer-tools/overview">Overview</a></li>
89+
<li><a href="/blazor/ai-developer-tools/mcp-server">MCP Server</a></li>
90+
<li><a href="/blazor/ai-developer-tools/copilot-extension">Copilot Extension</a></li>
91+
</ul>
92+
</li>
8693
<li>Tutorials
8794
<ul>
8895
<li>
@@ -656,8 +663,6 @@
656663
<li><a href="/blazor/smart-ai-solutions/ai/custom-ai-service">Custom AI Providers</a></li>
657664
</ul>
658665
</li>
659-
</ul>
660-
<ul>
661666
<li>Tree Grid
662667
<ul>
663668
<li><a href="/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring">Adaptive Structuring</a></li>

blazor/accordion/getting-started-with-web-app.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ The following code explains how to initialize Blazor Accordion using header and
247247

248248
## See also
249249

250-
1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
251-
2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
250+
1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
251+
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
252252

253253
N> You can also explore our [Blazor Accordion example](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Accordion.

blazor/accordion/getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ The following code explains how to initialize Blazor Accordion using header and
177177

178178
## See also
179179

180-
1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
181-
2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
180+
1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
181+
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
182182

183183
N> You can also explore our [Blazor Accordion example](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Accordion.

blazor/accumulation-chart/adaptive-layout.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Adaptive Layout in Blazor Accumulation Chart Component
1111

12-
When viewing the accumulation chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion Accumulation Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, data labels, chart title, and more.
12+
When viewing the accumulation chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion<sup style="font-size:70%">&reg;</sup> Accumulation Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, data labels, chart title, and more.
1313

1414
```cshtml
1515

blazor/accumulation-chart/getting-started-with-web-app.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -357,5 +357,5 @@ Legend is used for the accumulation chart by setting the [Visible](https://help.
357357
## See also
358358

359359

360-
1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
361-
2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
360+
1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
361+
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)

blazor/accumulation-chart/getting-started.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -287,5 +287,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
287287

288288
## See also
289289

290-
* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
291-
* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
290+
* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
291+
* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)

blazor/ai-assistview/ai-integrations/gemini-integration.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Integration of Gemini AI With Blazor AI AssistView component
1111

12-
The Syncfusion AI AssistView supports integration with [Gemini](Gemini API quickstart | Google AI for Developers), enabling advanced conversational AI features in your applications.
12+
The Syncfusion AI AssistView supports integration with [Gemini](https://ai.google.dev/gemini-api/docs/quickstart), enabling advanced conversational AI features in your applications.
1313

1414
## Prerequisites
1515

@@ -54,7 +54,7 @@ Install-Package Mscc.GenerativeAI
5454
5555
## Integration Gemini AI with AI AssistView
5656

57-
> Add your generated `API Key` at the line
57+
* Add your generated `API Key` at the line
5858

5959
```bash
6060

@@ -128,4 +128,4 @@ const string GeminiApiKey = 'Place your API key here';
128128
{% endhighlight %}
129129
{% endtabs %}
130130

131-
![Blazor AI AssistView Gemini Integration](images/gemini-integration.png)
131+
![Blazor AI AssistView Gemini Integration](./images/gemini-integration.png)

blazor/ai-assistview/ai-integrations/openai-integration.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ The Syncfusion AI AssistView supports integration with [OpenAI](https://platfor
1313

1414
## Prerequisites
1515

16-
*OpenAI account to generate an API key for accessing the `OpenAI` API
16+
* OpenAI account to generate an API key for accessing the `OpenAI` API
1717
* Syncfusion AI AssistView for Blazor `Syncfusion.Blazor.InteractiveChat` installed in your project.
1818

1919
## Getting Started with the AI AssistView Component
@@ -54,7 +54,7 @@ Install-Package OpenAI
5454
5555
## Integration Open AI with AI AssistView
5656

57-
> Add your generated `API Key` at the line
57+
* Add your generated `API Key` at the line
5858

5959
```bash
6060

@@ -129,4 +129,4 @@ const string openaiApiKey = 'Place your API key here';
129129
{% endhighlight %}
130130
{% endtabs %}
131131

132-
![Blazor AI AssistView Open AI Integration](images/openai-integration.png)
132+
![Blazor AI AssistView Open AI Integration](./images/openai-integration.png)

blazor/ai-assistview/how-to/integration-with-ai.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
---
22
layout: post
3-
title: Integration of Microsoft.Extensions.AI with the Blazor AI AssistView component | Syncfusion
3+
title: Integration | Blazor AI AssistView component | Syncfusion
44
description: Checkout and learn about Integration with Microsoft.Extensions.AI and Keyboard interaction with Blazor AI AssistView component and more details.
55
platform: Blazor
66
control: AI AssistView
77
documentation: ug
88
---
99

10-
# Integration of Microsoft.Extensions.AI with the Blazor AI AssistView component
10+
# Integration of Microsoft.Extensions.AI with AI AssistView component
1111

12-
The Syncfusion AI AssistView component supports integration with the `Microsoft.Extensions.AI` framework, enabling seamless communication with various large language models (LLMs) such as `Azure OpenAI`, `OpenAI`, and more.
12+
The Syncfusion<sup style="font-size:70%">&reg;</sup> AI AssistView component supports integration with the `Microsoft.Extensions.AI` framework, enabling seamless communication with various large language models (LLMs) such as `Azure OpenAI`, `OpenAI`, and more.
1313

1414
`The Microsoft.Extensions.AI` simplifies integration with different models, requiring minimal configuration changes depending on the provider. The following example demonstrates integration using `Azure OpenAI`.
1515

@@ -48,7 +48,7 @@ dotnet add package Markdig
4848

4949
### Configure services in Program.cs
5050

51-
Register the `Azure OpenAI` client and Syncfusion AI Assistview component within the Blazor application.
51+
Register the `Azure OpenAI` client and Syncfusion<sup style="font-size:70%">&reg;</sup> AI AssistView component within the Blazor application.
5252

5353
{% tabs %}
5454
{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
@@ -88,7 +88,7 @@ var app = builder.Build();
8888

8989
### AI AssistView with IChatClient
9090

91-
The Syncfusion `AI AssistView` component is built to seamlessly integrate with external AI services. When the `IChatClient` is registered via `Microsoft.Extensions.AI`, the component automatically uses it to handle user prompts without any additional configuration.
91+
The Syncfusion<sup style="font-size:70%">&reg;</sup> `AI AssistView` component is built to seamlessly integrate with external AI services. When the `IChatClient` is registered via `Microsoft.Extensions.AI`, the component automatically uses it to handle user prompts without any additional configuration.
9292

9393
In the following example, the user input is processed using the injected `IChatClient`. The AI model's response is returned in Markdown format which is converted to HTML using the `Markdig` library before rendering in the AI AssistView component.
9494

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
layout: post
3+
title: SyncfusionBlazor GitHub Copilot Extension | Syncfusion
4+
description: Learn how the SyncfusionBlazor GitHub Copilot extension enhances your Blazor development with intelligent code suggestions, best practices, contextual guidance.
5+
control: Getting started with SyncfusionBlazor copilot extension
6+
platform: Blazor
7+
documentation: ug
8+
---
9+
10+
11+
# SyncfusionBlazor GitHub Copilot Extension
12+
13+
## Overview
14+
15+
The [SyncfusionBlazor GitHub Copilot Extension](https://github.com/apps/syncfusionblazor) provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This extension seamlessly integrates with GitHub Copilot to enhance your development workflow.
16+
17+
### What is a GitHub Copilot Extension?
18+
19+
A GitHub Copilot extension enhances Copilot's capabilities by integrating specialized, third-party tools and knowledge directly into the chat interface. It allows Copilot to access specific data, APIs, and services—such as a component vendor's official documentation—to provide more accurate, context-aware, and relevant assistance for a developer's specific technology stack.
20+
21+
### Key Benefits
22+
23+
* Smart code suggestions for Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
24+
* Best practice guidance for component usage and configuration.
25+
* Context-aware troubleshooting for complex scenarios.
26+
27+
## Prerequisites
28+
29+
Before using this extension, ensure you have:
30+
31+
* [Github copilot](https://github.com/copilot/)
32+
* An active Syncfusion<sup style="font-size:70%">&reg;</sup> license (any of the following):
33+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
34+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Community License](https://www.syncfusion.com/products/communitylicense)
35+
- [Syncfusion<sup style="font-size:70%">&reg;</sup> Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
36+
* An active [API KEY](https://staging.syncfusion.com/account/user-token-generation)
37+
38+
## Unlimited Access
39+
40+
Syncfusion<sup style="font-size:70%">&reg;</sup> users enjoy completely unlimited access to this copilot extension. There are no restrictions on:
41+
42+
* No request limits
43+
* No component restrictions
44+
* No query type limitations
45+
* No usage duration constraints
46+
47+
We believe in providing unrestricted access to tools that enhance your development experience, ensuring you can fully leverage Syncfusion<sup style="font-size:70%">&reg;</sup> components without limitations.
48+
49+
## Installation
50+
51+
* Visit the [SyncfusionBlazor GitHub App](https://github.com/apps/syncfusionblazor) and click **Install**.
52+
* Grant the required read-access permissions to allow the extension to function with Copilot chat.
53+
* Click **Install & Authorize**.
54+
* Sign in with your Syncfusion<sup style="font-size:70%">&reg;</sup> account credentials to complete the authorization.
55+
56+
Based on the authorization, we will fetch the API key from your account and utilize it for response generation. After successful authentication, the extension will be integrated with your GitHub account.
57+
58+
Restart your apps and begin a new Copilot chat session to start using it.
59+
60+
## Getting Started
61+
62+
* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot.
63+
* In the chat prompt, type `@` and select the `SyncfusionBlazor` extension from the list.
64+
* Enter your query related to any Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor component.
65+
66+
**Note:** When using this extension in VS Code, make sure you are in Ask mode and not in Edit or Agent mode. The Edit and Agent modes do not use the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extension.
67+
68+
### Best Practices for Effective Usage
69+
70+
1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?").
71+
2. `Provide context`: Include details about your use case for more targeted solutions.
72+
3. `Use descriptive queries`: Avoid vague questions that lack necessary context.
73+
4. `Start fresh for new topics`: Begin a new chat session when switching components or topics.
74+
75+
## Example Queries
76+
77+
Here are some examples of queries you can use with the Syncfusion<sup style="font-size:70%">&reg;</sup> Copilot extensions:
78+
79+
* "@SyncfusionBlazor Create a Syncfusion data grid with paging and sorting"
80+
* "@SyncfusionBlazor How do I implement a responsive Syncfusion chart with tooltips?"
81+
* "@SyncfusionBlazor Show me a Syncfusion Kanban board implementation with drag and drop"
82+
83+
## Uninstallation
84+
85+
To remove the extension from your account:
86+
87+
* Go to [GitHub App Installations](https://github.com/settings/installations/).
88+
* Locate the `SyncfusionBlazor` extension in the list.
89+
* Click `Configure` and Select `Uninstall`.
90+
91+
## Support
92+
93+
* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
94+
* [Community forum](https://www.syncfusion.com/forums/essential-js2)
95+
* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript)
96+
* Live chat
97+
98+
## See also
99+
100+
* [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Documentation](https://blazor.syncfusion.com/documentation)
101+
* [Github Copilot Documentation](https://docs.github.com/en/copilot)

0 commit comments

Comments
 (0)