Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 1 addition & 2 deletions .spelling
Original file line number Diff line number Diff line change
Expand Up @@ -6920,7 +6920,6 @@ MCP
mcp
mcp.json
.mcp.json
telerikBlazorAssistant
telerik_blazor_assistant
telerikblazor
McP
copilot-instructions.md
16 changes: 8 additions & 8 deletions ai/mcp-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ To install the Telerik MCP server manually, use the documentation of your AI-pow
* Type: `stdio` (standard input/output transport)
* Command: `npx`
* Arguments: `-y`
* Server name: `telerikBlazorAssistant` (depends on your preferences)
* Server name: `telerik_blazor_assistant`. This name depends on your preferences. The suggestion here matches the MCP tool name in the npm package. See the notes below.
* Your [Telerik license key](#license-key) as an `env` parameter

> * Do not use hyphens (`-`) or underscores (`_`) in the MCP server name in the MCP `.json` file, due to potential compatibility issues with some MCP clients such as Visual Studio or Windsurf.
> * Some MCP clients expect the MCP servers to be listed under a `servers` JSON key, while others expect `mcpServers`.
> * Some MCP clients expect an `mcp.json` file, while others like Visual Studio 2022 expect an `.mcp.json` file.
> * Some MCP clients, including older Visual Studio versions, may not accept a server name that uses hyphens (`-`) or underscores (`_`). In such cases, update the MCP client version or use a different server name.

### License Key

Expand All @@ -64,7 +64,7 @@ To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` fil
````JSON.skip-repl
{
"servers": {
"telerikBlazorAssistant": {
"telerik_blazor_assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp@latest"],
Expand All @@ -78,7 +78,7 @@ To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` fil

To enable global automatic discovery of the Telerik MCP Server in Visual Studio, add the above `.mcp.json` file to your user directory (`%USERPROFILE%`), for example, `C:\Users\____\.mcp.json`.

> Once the Telerik MCP server is added, make sure that the `telerikBlazorAssistant` tool is [enabled (checked) in the Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server). This dropdown opens when clicking on a wrench icon 🔧 at the bottom of the Copilot Window. The Telerik MCP server may get disabled when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue with MCP servers in general.
> Once the Telerik MCP server is added, make sure that the `telerik_blazor_assistant` tool is [enabled (checked) in the Copilot Chat window's tool selection dropdown](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers?view=vs-2022#configuration-example-with-github-mcp-server). This dropdown opens when clicking on a wrench icon 🔧 at the bottom of the Copilot Window. The Telerik MCP server may get disabled when starting a new chat, changing threads, or relaunching Visual Studio. This is a known issue with MCP servers in general.

### VS Code

Expand All @@ -95,7 +95,7 @@ To enable the Telerik MCP Server in a specific [workspace](https://code.visualst
````JSON.skip-repl
{
"servers": {
"telerikBlazorAssistant": {
"telerik_blazor_assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp@latest"],
Expand Down Expand Up @@ -129,7 +129,7 @@ To [enable the Telerik MCP Server in a specific workspace, Blazor app, or global
````JSON.skip-repl
{
"mcpServers": {
"telerikBlazorAssistant": {
"telerik_blazor_assistant": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@progress/telerik-blazor-mcp@latest"],
Expand All @@ -148,7 +148,7 @@ By default, MCP clients do not call MCP tools in a deterministic way. Some MCP c
To use the Telerik MCP Server:

1. Start your prompt with `Telerik` to make it more likely for the Telerik MCP server to get called. If you are using VS Code, then start your prompt with:
* `#` and the MCP server name that you used in `mcp.json` (for example, `#telerikBlazorAssistant`)
* `#` and the MCP server name that you used in `mcp.json` (for example, `#telerik_blazor_assistant`)
* `#` and the name of the Telerik Blazor MCP tool (`#telerik_blazor_assistant`)
1. Confirm that the Telerik MCP server is used. Look for a statement in the output, which is similar to:
* `Running telerik_blazor_assistant` (in VS Code)
Expand All @@ -157,7 +157,7 @@ To use the Telerik MCP Server:

Also check the general [AI Coding Assistant Recommendations](slug:ai-overview#recommendations) for more usage tips.

To call the Telerik MCP server without the need to type `Telerik` or `#telerikBlazorAssistant` explicitly, add custom instructions to your AI-powered tool. Here are examples for [GitHub Copilot](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat) and [Cursor](https://docs.cursor.com/context/rules).
To call the Telerik MCP server without the need to type `Telerik` or `#telerik_blazor_assistant` explicitly, add custom instructions to your AI-powered tool. Here are examples for [GitHub Copilot](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat) and [Cursor](https://docs.cursor.com/context/rules).

### Sample Prompts

Expand Down
68 changes: 34 additions & 34 deletions ai/prompt-library.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ This article provides a list of sample prompts for use with the [Telerik Blazor

## How to Use the Prompts

All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-server). The [`#telerikBlazorAssistant` handle](slug:ai-mcp-server#usage) assumes that this is the server name you have [entered in the `mcp.json` file during installation](slug:ai-mcp-server#installation).
All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-server). The [`#telerik_blazor_assistant` handle](slug:ai-mcp-server#usage) assumes that this is the server name you have [entered in the `mcp.json` file during installation](slug:ai-mcp-server#installation).

1. Browse the prompt library to find a prompt that suits your needs.
2. Copy the prompt text including the `#telerikBlazorAssistant` handle.
2. Copy the prompt text including the `#telerik_blazor_assistant` handle.
3. (optional) Customize the prompt as needed for your specific use case. Make sure the changes comply with the [intended use](slug:ai-overview#intended-use) and the [recommendations](slug:ai-overview#recommendations) for the AI Coding Assistant.
4. Run the prompt against the MCP server.

Expand All @@ -28,39 +28,39 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Create a basic Grid component that displays employee data with columns for ID, Name, Position, and Salary. Include sorting and pagination functionality.
#telerik_blazor_assistant Create a basic Grid component that displays employee data with columns for ID, Name, Position, and Salary. Include sorting and pagination functionality.
````

````TEXT.skip-repl
#telerikBlazorAssistant Implement a Grid with enabled filtering and show how to set up different filter types for text, numeric, and date columns.
#telerik_blazor_assistant Implement a Grid with enabled filtering and show how to set up different filter types for text, numeric, and date columns.
````

````TEXT.skip-repl
#telerikBlazorAssistant Set up a Grid that loads data from a REST API endpoint.
#telerik_blazor_assistant Set up a Grid that loads data from a REST API endpoint.
````

````TEXT.skip-repl
#telerikBlazorAssistant Set up a Grid with virtual scrolling to handle large datasets efficiently
#telerik_blazor_assistant Set up a Grid with virtual scrolling to handle large datasets efficiently
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a Grid having Edit button on each row, and conditional formatting based on cell values.
#telerik_blazor_assistant Create a Grid having Edit button on each row, and conditional formatting based on cell values.
````

````TEXT.skip-repl
#telerikBlazorAssistant Implement Grid with enabled grouping and expand/collapse functionality for the groups.
#telerik_blazor_assistant Implement Grid with enabled grouping and expand/collapse functionality for the groups.
````

````TEXT.skip-repl
#telerikBlazorAssistant Set up a Grid with еnabled multiple selection.
#telerik_blazor_assistant Set up a Grid with еnabled multiple selection.
````

````TEXT.skip-repl
#telerikBlazorAssistant Set up a Grid with еnabled checkbox selection.
#telerik_blazor_assistant Set up a Grid with еnabled checkbox selection.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create an editable Grid that includes validation for different data types.
#telerik_blazor_assistant Create an editable Grid that includes validation for different data types.
````

</div>
Expand All @@ -70,23 +70,23 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Create a Scheduler component with month, week, and day views.
#telerik_blazor_assistant Create a Scheduler component with month, week, and day views.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a Scheduler with sample event data and enabled basic event creation, editing, and deletion functionality.
#telerik_blazor_assistant Create a Scheduler with sample event data and enabled basic event creation, editing, and deletion functionality.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a resource-based Scheduler with sample data grouped by Name of the event owner.
#telerik_blazor_assistant Create a resource-based Scheduler with sample data grouped by Name of the event owner.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a Scheduler that allows users to toggle between different views and displays appointments.
#telerik_blazor_assistant Create a Scheduler that allows users to toggle between different views and displays appointments.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a Scheduler that allows to create weekly repeating events.
#telerik_blazor_assistant Create a Scheduler that allows to create weekly repeating events.
````

</div>
Expand All @@ -96,11 +96,11 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Build a column chart that shows quarterly sales by region.
#telerik_blazor_assistant Build a column chart that shows quarterly sales by region.
````

````TEXT.skip-repl
#telerikBlazorAssistant Build a column chart that shows quarterly sales by region with drill-down functionality to show monthly data when clicking on a quarter.
#telerik_blazor_assistant Build a column chart that shows quarterly sales by region with drill-down functionality to show monthly data when clicking on a quarter.
````

</div>
Expand All @@ -110,11 +110,11 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant How to create a form with three TextBox fields.
#telerik_blazor_assistant How to create a form with three TextBox fields.
````

````TEXT.skip-repl
#telerikBlazorAssistant Generate a Form with required field validation for email and password inputs.
#telerik_blazor_assistant Generate a Form with required field validation for email and password inputs.
````

</div>
Expand All @@ -124,11 +124,11 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Create a simple Upload component allowing chunk file upload.
#telerik_blazor_assistant Create a simple Upload component allowing chunk file upload.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create an Upload component allowing single file upload to a predefined saving location.
#telerik_blazor_assistant Create an Upload component allowing single file upload to a predefined saving location.
````

</div>
Expand All @@ -138,11 +138,11 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Create two cascading DropDownLists where the second list depends on the first selection. Use Categories and Products data with a simple relationship.
#telerik_blazor_assistant Create two cascading DropDownLists where the second list depends on the first selection. Use Categories and Products data with a simple relationship.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a DropDownList with countries data and enabled filtering.
#telerik_blazor_assistant Create a DropDownList with countries data and enabled filtering.
````

</div>
Expand All @@ -152,23 +152,23 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Create a DatePicker that disables weekends.
#telerik_blazor_assistant Create a DatePicker that disables weekends.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create two DatePickers for "From" and "To" date selection where the "To" picker's min date updates based on "From" selection.
#telerik_blazor_assistant Create two DatePickers for "From" and "To" date selection where the "To" picker's min date updates based on "From" selection.
````

````TEXT.skip-repl
#telerikBlazorAssistant Render a DatePicker with a default selected date.
#telerik_blazor_assistant Render a DatePicker with a default selected date.
````

````TEXT.skip-repl
#telerikBlazorAssistant Configure the DatePicker to show week numbers in its calendar popup.
#telerik_blazor_assistant Configure the DatePicker to show week numbers in its calendar popup.
````

````TEXT.skip-repl
#telerikBlazorAssistant Change the display format in the DatePicker so dates show as 'MM/dd/yyyy'.
#telerik_blazor_assistant Change the display format in the DatePicker so dates show as 'MM/dd/yyyy'.
````

</div>
Expand All @@ -178,15 +178,15 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Create a Calendar component in which all past days are disabled.
#telerik_blazor_assistant Create a Calendar component in which all past days are disabled.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a Calendar component in which all weekends are disabled.
#telerik_blazor_assistant Create a Calendar component in which all weekends are disabled.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a Calendar that shows the past 5 years.
#telerik_blazor_assistant Create a Calendar that shows the past 5 years.
````

</div>
Expand All @@ -196,11 +196,11 @@ All prompts in this library target the [Telerik Blazor MCP Server](slug:ai-mcp-s
<div style="display: grid; gap: 10px; grid-template-columns: 1fr 1fr;">

````TEXT.skip-repl
#telerikBlazorAssistant Create a MultiSelect with an array of product objects and show the selected product names below the component.
#telerik_blazor_assistant Create a MultiSelect with an array of product objects and show the selected product names below the component.
````

````TEXT.skip-repl
#telerikBlazorAssistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count.
#telerik_blazor_assistant Create a MultiSelect with checkboxes bound to a simple list of countries and show the selected count.
````

</div>
Expand Down