docs(common): Add AI code assistant docs

ai/copilot-extension.md

@@ -0,0 +1,70 @@
+---
+title: Copilot Extension
+page_title: Telerik Blazor GitHub Copilot Extension
+description: Learn how to add and use the Telerik Blazor GitHub Copilot extension for better developer productivity. The Telerik Blazor GitHub Copilot extension provides proprietary context about Telerik UI for Blazor to AI-powered software.
+slug: ai-copilot-extension
+tags: telerik,blazor,ai
+published: True
+position: 10
+---
+
+# Telerik Blazor GitHub Copilot Extension
+
+The Telerik Blazor [GitHub Copilot](https://github.com/features/copilot) extension provides proprietary Telerik UI for Blazor context. The extension can help you reach new levels of developer productivity by providing useful tips and generating tailored code snippets that include Telerik UI for Blazor components and API.
+
+## Prerequisites
+
+To use the Telerik GitHub Copilot extension for Blazor, you need to have:
+
+* An active [GitHub Copilot](https://github.com/features/copilot) subscription. You can enable or configure GitHub Copilot on the [Copilot Settings page in your GitHub account](https://github.com/settings/copilot).
+* A [Telerik user account](https://www.telerik.com/account/).
+* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
+
+## Installation
+
+To install the Telerik Blazor Copilot extension:
+
+1. Go to the [TelerikBlazor GitHub App](https://github.com/apps/telerikblazor) page and click the **Install** button.
+1. You will see a list that includes your GitHub account and all GitHub organizations that you are part of. Normally, select your GitHub account.
+1. Click the **Install & Authorize** button. This will authorize the GitHub Copilot extension to integrate with your GitHub account.
+1. Enter your GitHub password.
+1. You will be redirected to telerik.com. Enter your Telerik account credentials if prompted. This will authorize the GitHub Copilot extension to integrate with your Telerik account.
+1. Upon successful Telerik authentication, you will be redirected once again to a page that confirms successful Copilot extension installation.
+1. Restart your [Copilot-enabled apps](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio and VS Code).
+1. Start a new chat session in Copilot.
+
+## Usage
+
+To use the Telerik Blazor Copilot extension:
+
+1. Open the GitHub Copilot chat window in your [Copilot-enabled app](https://docs.github.com/en/copilot/building-copilot-extensions/about-building-copilot-extensions#supported-clients-and-ides) (for example, Visual Studio or VS Code).
+1. Make sure you are in **Ask** mode and not in **Edit** or **Agent** mode. The Edit and Agent modes do not use the Telerik Copilot extension. However, the Agent mode can use the [Telerik Blazor MCP server](slug:ai-mcp-server).
+1. Start your prompt with `@telerikblazor` and type your request. Make sure that `@telerikblazor` is recognized and highlighted, otherwise the extension may not be installed.
+1. Verify that you see **TelerikBlazor working...** in the output.
+1. Grant permission to the Telerik Blazor extension to read your workspace files.
+1. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information.
+
+### Sample Prompts
+
+The following list describes how your prompts may look like:
+
+* `@telerikblazor` Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data.
+* `@telerikblazor` What is DebounceDelay for the Telerik TextBox?
+* `@telerikblazor` Why am I getting a TelerikBlazor was undefined JavaScript error?
+
+## Number of Requests
+
+> The usage limits below will take place after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests.
+
+The Telerik Blazor Copilot extension allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):
+
+* Perpetual licenses: 50 requests per year
+* Subscription licenses: 300 requests per day
+* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests.
+
+> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik Copilot extension and the Telerik MCP server both take up from the same usage quota.
+
+## See Also 
+
+* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials)
+* [Telerik Blazor MCP Server](slug:ai-mcp-server)

ai/mcp-server.md

@@ -0,0 +1,202 @@
+---
+title: MCP Server
+page_title: Telerik Blazor MCP Server
+description: Learn how to add and use the Telerik Blazor MCP Server for better developer productivity. The Telerik Blazor MCP server provides proprietary context about Telerik UI for Blazor to AI-powered software.
+slug: ai-mcp-server
+tags: telerik,blazor,ai
+published: True
+position: 20
+---
+
+# Telerik Blazor MCP Server
+
+The Telerik Blazor [MCP Server](https://modelcontextprotocol.io/introduction) lets you interact with AI and reach new levels of developer productivity. The MCP server provides proprietary context to AI-powered IDEs, apps and tools. You can use the Telerik Blazor MCP server to ask about Telerik UI for Blazor components, features, or general usage. You can successfully prompt more complex questions and tasks, and generate tailored code that includes Telerik UI for Blazor components and API.
+
+## Prerequisites
+
+To use the Telerik Blazor MCP server, you need:
+
+* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*.
+* A [Telerik user account](https://www.telerik.com/account/).
+* An active [DevCraft or Telerik UI for Blazor license](https://www.telerik.com/purchase/blazor-ui) or a [Telerik UI for Blazor trial](https://www.telerik.com/blazor-ui).
+
+## Installation
+
+Use the documentation of your AI-powered MCP client to add the Telerik MCP server to a specific workspace or globally. You can see installation tips and examples for some popular MCP clients below.
+
+The generic settings of the Telerik Blazor MCP server are:
+
+* Server name: `telerik-blazor-assistant`
+* Type: `stdio` (standard input/output transport)
+* Command: `npx` (the MCP server works through an npm package)
+* Supported arguments: `-y`
+* npm package name: `@progress/telerik-blazor-mcp`
+* You also need to add your [Telerik licence key](slug:installation-license-key) as an `env` parameter in the `mcp.json` file. There are two options:
+    * (recommended) Use a `TELERIK_LICENSE_PATH` argument and point to your Telerik license file location.
+    * Use a `TELERIK_LICENSE_KEY` argument and paste your Telerik license key. Make sure to [update the license key](slug:installation-license-key#license-key-updates) when necessary.
+
+### Visual Studio
+
+For detailed instructions, refer to [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
+
+To enable the Telerik MCP Server in a specific Blazor app, add a `.mcp.json` file to the solution folder.
+
+> caption SOLUTIONDIR/.mcp.json
+
+````JSON.skip-repl
+{
+  "inputs": [
+    // ...
+  ],
+  "servers": {
+    "telerik-blazor-assistant": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@progress/telerik-blazor-mcp"],
+      "env": {
+        "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+      }
+    }
+  }
+}
+````
+
+To enable automatic global 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`.
+
+### VS Code
+
+For detailed instructions, refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
+
+To enable the Telerik MCP Server in a specific workspace or Blazor app, add a `.vscode` folder with an `mcp.json` file at the root of the workspace:
+
+>caption .vscode/mcp.json at the workspace root
+
+````JSON.skip-repl
+{
+  "servers": {
+    "telerik-blazor-assistant": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@progress/telerik-blazor-mcp"],
+      "env": {
+        "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+      }
+    }
+  }
+}
+````
+
+To [add the Telerik MCP Server globally for VS Code, edit the VS Code `settings.json` file](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings):
+
+>caption VS Code settings.json
+
+````JSON.skip-repl
+{
+    // ...
+    "chat.mcp.discovery.enabled": true,
+    "mcp": {
+        "inputs": [
+          // ...
+        ],
+        "servers": {
+            "telerik-blazor-assistant": {
+                "type": "stdio",
+                "command": "npx",
+                "args": ["-y", "@progress/telerik-blazor-mcp"],
+                "env": {
+                    "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+                }
+            }
+        }
+    }
+}
+````
+
+### Cursor
+
+For detailed instructions, refer to [Model Context Protocol](https://docs.cursor.com/context/model-context-protocol).
+
+To [enable the Telerik MCP Server in a specific workspace](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-workspace) or Blazor app, add a `.cursor` folder with an `mcp.json` file at the root of the workspace.
+
+>caption .cursor/mcp.json at the workspace root
+
+````JSON.skip-repl
+{
+  "mcpServers": {
+    "telerik-blazor-assistant": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@progress/telerik-blazor-mcp"],
+      "env": {
+        "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+      }
+    }
+  }
+}
+````
+
+To [add the Telerik MCP Server globally for Cursor](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server-to-your-user-settings), add a `.cursor` folder with an `mcp.json` file in your user folder:
+
+>caption .cursor/mcp.json inside your user folder
+
+````JSON.skip-repl
+{
+  "mcpServers": {
+    "telerik-blazor-assistant": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@progress/telerik-blazor-mcp"],
+      "env": {
+        "TELERIK_LICENSE_PATH": "C:\\Users\\___\\AppData\\Roaming\\Telerik\\telerik-license.txt"
+      }
+    }
+  }
+}
+````
+
+## Usage
+
+To use the Telerik MCP Server:
+
+1. Start your prompt with one of the following:
+    * `telerik`
+    * `/telerik`
+    * `@telerik`
+    * `telerikblazor`
+    * `/telerikblazor`
+    * `@telerikblazor`
+1. Confirm that the Telerik MCP server is used, because this doesn't happen deterministically. Look for a statement in the output, which is similar to:
+    * `Running telerik-blazor-assistant` (in VS Code)
+    * `Calling MCP tool telerik-blazor-assistant` (in Cursor)
+
+    If the Telerik MCP server is not used even though it's installed and enabled, then try rephrasing your prompt and use another trigger syntax from the list in step 1.
+1. Grant the Telerik tool permission to run for this session, workspace, or always.
+1. If you want to prompt for information or code that are not related to your previous prompts, it is a good practice to start a new session in a new chat window, so that the context is not polluted by irrelevant old information.
+
+To increase the probability of the Telerik MVC Server being used, or to call it without the need to mention "telerik" 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
+
+The following list describes how your prompts may look like:
+
+* Telerik Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model that is defined in the same .razor file and provide dummy data.
+* Telerik What is DebounceDelay for the Telerik TextBox?
+* Telerik Why am I getting a TelerikBlazor was undefined JavaScript error?
+
+## Number of Requests
+
+> The usage limits below will take place after after June 28, 2025. Until then, each customer with an active commercial or trial license can make up to 300 daily requests.
+
+The Telerik Blazor MCP Server allows the following maximum number of requests, depending on your [Telerik license type](https://www.telerik.com/purchase/faq/licensing-purchasing):
+
+* Perpetual licenses: 50 requests per year
+* Subscription licenses: 300 requests per day
+* Trial licenses: 300 requests per trial per year. Activating the same trial for a new release does not grant additional 300 requests.
+
+> One prompt may trigger several requests to the MCP server, depending on the complexity.
+>
+> All Telerik AI tools share a single request limit for your Telerik account. For example, the Telerik MCP server and the Telerik Copilot extension both take up from the same usage quota.
+
+## See Also 
+
+* [Telerik Blazor extension for GitHub Copilot](slug:ai-copilot-extension)

common-features/adaptive-rendering.md

@@ -5,7 +5,7 @@ description: Explore how the components with popup elements can react to the cha
 slug: adaptive-rendering
 tags: telerik,blazor,adaptive,rendering,mobile
 published: True
-position: 1
+position: 10
 ---
 
 # Adaptive Rendering

common-features/dimensions.md

@@ -5,7 +5,7 @@ description: How dimensions work and are set in the Telerik UI for Blazor compon
 slug: common-features/dimensions
 tags: telerik,blazor,dimensions,width,height,percent,pixel
 published: True
-position: 7
+position: 80
 ---
 
 # Dimensions

common-features/icons.md

@@ -6,7 +6,7 @@ slug: common-features-icons
 tags: telerik,blazor,icon,font,built-in
 published: True
 previous_url: /common-features/font-icons
-position: 1
+position: 20
 ---
 
 # Blazor SVG and Font Icons

common-features/input-adornments.md

@@ -5,7 +5,7 @@ description: How to add prefix and suffix adornments in the input elements of th
 slug: common-features/input-adornments
 tags: telerik,blazor,input,adornments,prefix,suffix
 published: True
-position: 2
+position: 30
 ---
 
 # Input Adornments

common-features/input-validation.md

@@ -5,7 +5,7 @@ description: How to validate Blazor inputs.
 slug: common-features/input-validation
 tags: telerik,blazor,validation,data,annotation,form
 published: True
-position: 3
+position: 40
 ---
 # Input Validation
 

common-features/loading-sign.md

@@ -5,7 +5,7 @@ description: Components that peform long running operations can show a loading i
 slug: common-features-loading-sign
 tags: telerik,blazor,loading,sign,busy,indicator,data
 published: True
-position: 5
+position: 70
 ---
 
 # Loading Sign

common-features/microsoft-extensions-ai-integration.md

@@ -5,7 +5,7 @@ description: How to integrate the UI for Blazor components with Microsoft.Extens
 slug: common-features-microsoft-extensions-ai-integration
 tags: telerik,blazor,aiprompt,ai,extensions,integration
 published: True
-position: 4
+position: 50
 ---
 
 # Integration with Microsoft.Extensions.AI

docs-builder.yml

@@ -591,6 +591,9 @@ meta:
   common-features:
     title: Common Features
     position: 15
+  ai:
+    title: AI Coding Assistant
+    position: 14
   styling-and-themes:
     title: Styling and Themes
     position: 12

getting-started/client-blazor.md

@@ -107,6 +107,10 @@ If you prefer video instructions, you can also check the video tutorial below.
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/fwR8Yxe7DPQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
+## Next Steps
+
+* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API.
+
 ## See Also
 
 * [Workflow Details for Telerik UI for Blazor](slug:getting-started/what-you-need)

getting-started/hybrid-blazor.md

@@ -127,6 +127,7 @@ Refer to the following articles for more information on each technology stack:
 ## Next Steps
 
 * [Explore the specifics of Telerik UI for Blazor in native MAUI](slug:hybrid-blazor-apps)
+* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API.
 
 ## See Also
 

getting-started/vs-code-integration/introduction.md

@@ -20,12 +20,14 @@ The extension for Visual Studio Code provides the following advantages:
 
 * It allows you to [add the Telerik Components to an existing project](slug:getting-started-vs-code-integration-convert-project ) with a few clicks.
 
-
-
 ## Get the Extension
 
 @[template](/_contentTemplates/common/general-info.md#vs-code-x-download)
 
 To access the VS Code extension, press `Ctrl`+`Shift`+`P` on Windows/Linux or `Cmd`+`Shift`+`P` on Mac to open the VS Code extension launcher.
 
 ![launch Telerik Blazor VS Code extension](images/launch-extension.png)
+
+## See Also
+
+* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension)

getting-started/vs-integration/introduction.md

@@ -35,3 +35,4 @@ To access the Telerik Visual Studio extension, go to the **Extensions** > **Tele
 * [Creating New Projects with Visual Studio](slug:getting-started-vs-integration-new-project)
 * [Converting Existing Projects with Visual Studio](slug:getting-started-vs-integration-convert-project)
 * [Downloading the Latest Telerik UI for Blazor Versions](slug:getting-started-vs-integration-latest-version)
+* [Telerik GitHub Copilot extension for Blazor](slug:ai-copilot-extension)

getting-started/web-app.md

@@ -121,6 +121,10 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a
 
 @[template](/_contentTemplates/common/get-started.md#add-component-sample)
 
+## Next Steps
+
+* Use the [Telerik Blazor MCP server](slug:ai-mcp-server) or the [Telerik Blazor GitHub Copilot extension](slug:ai-copilot-extension) to generate code snippets that include Telerik UI for Blazor components and API.
+
 ## See Also
 
 * [Workflow Details for Telerik UI for Blazor](slug:getting-started/what-you-need)