Merge branch 'didi/bottomsheet' of https://github.com/telerik/maui-docs into didi/bottomsheet

Author: didiyordanova

_config.yml

@@ -30,6 +30,9 @@ navigation:
     styling-and-themes:
         title: "Styling and Themes"
         position: 5
+    ai:
+        title: "AI Coding Assistant"
+        position: 6
     security:
         title: "Security"
         position: 7

_contentTemplates/common/ai-coding-assistant.md

@@ -0,0 +1,9 @@
+#getting-started
+* A [Telerik user account](https://www.telerik.com/account/).
+* An active [DevCraft or Telerik UI for MAUI license](https://www.telerik.com/purchase/maui-ui) or a [Telerik UI for MAUI trial](https://www.telerik.com/maui-ui).
+* A [.NET MAUI application that includes Telerik UI for .NET MAUI]({%slug maui-getting-started%}).
+#end
+
+#number-of-requests
+A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik MAUI AI Coding Assistant without restrictions. Perpetual license holders and trial users can make a [limited number of requests per year]({%slug ai-overview%}#number-of-requests).
+#end

_contentTemplates/get-started.md

@@ -17,21 +17,21 @@ To use the controls in the Telerik UI for .NET MAUI library, add the Telerik nam
 1. In the `MainPage.xaml` file, locate the root element at the top.
 1. Paste the Telerik namespace below the last already available namespace:
 
-	```
+	```XAML
 	xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
 	```
 
 To visualize the Telerik controls, register them in the `MauiProgram.cs` file of your project:
 
 1. In the `MauiProgram.cs` file, add the following using statement:
 
-	```
+	```C#
 	using Telerik.Maui.Controls.Compatibility;
 	```
 
 1. In the `CreateMauiApp` method, call the `UseTelerik` extension method:
 
-	```
+	```C#
 	<!-- Code omitted for brevity -->
 	.UseMauiApp<App>()
 	.UseTelerik()
@@ -51,9 +51,9 @@ To add the TemplatedButton control to the application:
 
 1. In the `MainPage.xaml` file, add the Telerik UI for .NET MAUI TemplatedButton and set its content to a string:
 
-	```
+	```XAML
 	<telerik:RadTemplatedButton x:Name="templatedButton"
-		Content="My TemplatedButton Content" />
+		                        Content="My TemplatedButton Content" />
 	```
 
 After adding the basic TemplatedButton and setting the initial content, you can hit `F5` to confirm that the app is running. In the next steps, you will configure the control by adding some interactivity.
@@ -68,7 +68,7 @@ In this step, you will edit the code-behind file by adding logic that makes the
 	* In the `Grid`, add a [BusyIndicator](https://docs.telerik.com/devtools/maui/controls/busyindicator/overview) control and adjust its [styling options](https://docs.telerik.com/devtools/maui/controls/busyindicator/animations).
 	* In the `Grid`, add a label control for the loading indicator.
 
-		```
+		```XAML
 		<telerik:RadTemplatedButton x:Name="templatedButton">
 			<telerik:RadTemplatedButton.Content>
 				<Grid ColumnDefinitions="Auto, *" HorizontalOptions="Center">
@@ -90,7 +90,7 @@ In this step, you will edit the code-behind file by adding logic that makes the
 
 1. In the `MainPage.xaml.cs` file, add a new member method within the `MainPage` class. This new method adds the logic that controls the content of the button:
 
-	```
+	```C#
 	private async void OnTemplatedButtonClicked(object sender, EventArgs e)
 	{
 		this.busy.IsBusy = true;
@@ -103,7 +103,7 @@ In this step, you will edit the code-behind file by adding logic that makes the
 
 1. Finally, set the `Clicked` event and add some styles to the TemplatedButton. Use the various [appearance options](https://docs.telerik.com/devtools/maui/controls/templatedbutton/styling) provided by the component, for example, `TextColor`, `Background`, `BorderBrush`, and so on:  
 
-	```
+	```XAML
 	<telerik:RadTemplatedButton x:Name="templatedButton"
 								TextColor="Black"
 								Background="#FAFAFA"

ai/copilot-extension.md

@@ -0,0 +1,80 @@
+---
+title: Copilot Extension
+page_title: Telerik MAUI GitHub Copilot Extension
+description: Learn how to add and use the Telerik MAUI GitHub Copilot extension as a .NET MAUI AI coding assistant and code generator for better developer productivity. The Telerik MAUI GitHub Copilot extension provides proprietary context about Telerik UI for .NET MAUI to AI-powered software.
+slug: ai-copilot-extension
+tags: telerik, maui, ai, dotnetmaui, coding assistant, ai server
+position: 10
+---
+
+# Telerik MAUI GitHub Copilot Extension
+
+The Telerik MAUI [GitHub Copilot](https://github.com/features/copilot) extension is an AI-powered coding assistant that provides specialized knowledge about [Telerik UI for .NET MAUI components](https://www.telerik.com/maui-ui). 
+
+This extension enhances GitHub Copilot with proprietary context about Telerik MAUI controls, helping you:
+
+* Generate code snippets using Telerik MAUI components.
+* Get contextual suggestions for component properties and methods.
+* Access best practices and implementation patterns.
+* Speed up development with AI-powered code completion.
+
+## Prerequisites
+
+Before using the Telerik MAUI GitHub Copilot extension, ensure you 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).
+@[template](/_contentTemplates/common/ai-coding-assistant.md#getting-started)
+* The latest version of 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 Visual Studio Code).
+
+## Installation
+
+Follow these steps to install and configure the Telerik MAUI Copilot extension:
+
+1. Go to the [Telerik MAUI GitHub App](https://github.com/apps/telerikmaui) 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. Select your GitHub account.
+1. Click the **Install & Allow** button. This will allow the GitHub Copilot extension to integrate with your GitHub account.
+1. Enter your GitHub password when prompted.
+1. You will be redirected to telerik.com. Enter your Telerik account credentials if prompted. This step links the GitHub Copilot extension with your Telerik account.
+1. Upon successful Telerik authentication, you will be redirected to a confirmation page that indicates successful Copilot extension installation.
+1. Restart 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 and Visual Studio Code).
+1. Start a new chat session in Copilot.
+
+## Usage
+
+To use the Telerik MAUI 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. Ensure you are in **Chat** 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 MAUI MCP server]({%slug ai-mcp-server%}).
+1. Start your prompt with `@telerikmaui` and type your request. Verify that `@telerikmaui` is recognized and highlighted; otherwise, the extension may not be properly installed.
+1. Look for a status label such as **Telerik MAUI working...** or **Telerik MAUI generating response...** in the output to confirm the extension is active.
+1. Grant permission to the Telerik MAUI extension to read your workspace files when prompted.
+1. For unrelated queries, start a new chat session in a new window to avoid context pollution from previous conversations.
+
+### Sample Prompts
+
+The following examples demonstrate useful prompts for the Telerik MAUI extension:
+
+* "`@telerikmaui` Generate a DataGrid with sorting and paging enabled."
+* "`@telerikmaui` Create a Telerik ComboBox for MAUI with multiple selection enabled."
+* "`@telerikmaui` Show me how to implement a Chart with line series."
+* "`@telerikmaui` Generate a CollectionView with grouping and filtering capabilities."
+
+## Number of Requests
+
+@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)
+
+## Troubleshooting
+
+If you encounter issues:
+
+* Ensure the `@telerikmaui` mention is properly highlighted in your prompt.
+* Verify that you have an active GitHub Copilot subscription.
+* Restart your IDE after installation.
+* Check that you're in Chat mode, not Edit or Agent mode.
+
+## See Also 
+
+* [GitHub Copilot Documentation](https://docs.github.com/en/copilot)
+* [GitHub Copilot Tutorials](https://github.com/features/copilot/tutorials)
+* [Telerik MAUI MCP Server]({%slug ai-mcp-server%})
+* [Telerik UI for .NET MAUI Documentation](https://docs.telerik.com/devtools/maui/)

ai/mcp-server.md

@@ -0,0 +1,211 @@
+---
+title: MCP Server
+page_title: Telerik MAUI MCP Server
+description: Learn how to add and use the Telerik MAUI MCP Server as a .NET MAUI AI coding assistant and code generator for better developer productivity. The Telerik MAUI MCP server provides proprietary context about Telerik UI for .NET MAUI to AI-powered software.
+slug: ai-mcp-server
+tags: telerik,maui,ai,ai server,dotnetmaui,coding assistant
+position: 20
+---
+
+# Telerik .NET MAUI MCP Server
+
+The Telerik MAUI [MCP (Model Context Protocol) Server](https://modelcontextprotocol.io/introduction) enhances your AI-powered development experience by providing specialized context about Telerik UI for .NET MAUI components.
+
+This MCP server enables AI-powered IDEs and tools to generate more accurate, tailored code that leverages [Telerik UI for .NET MAUI components](https://www.telerik.com/maui-ui) and APIs. You can ask complex questions about Telerik components, request specific implementations, and generate comprehensive code solutions.
+
+## Prerequisites
+
+To use the Telerik MAUI MCP server, you need:
+
+* [Node.js](https://nodejs.org/en) 18 or newer.
+* An [MCP-compatible client](https://modelcontextprotocol.io/clients) that supports **MCP tools** (latest version recommended).
+
+@[template](/_contentTemplates/common/ai-coding-assistant.md#getting-started)
+
+## Installation
+
+Install the Telerik MAUI MCP server using npm:
+
+```bash
+npm i @progress/telerik-maui-mcp
+```
+
+### Configuration
+
+Use these settings when configuring the server in your MCP client:
+
+| Setting | Value |
+|---------|-------|
+| Package Name | `@progress/telerik-maui-mcp` |
+| Type | `stdio` (standard input/output transport) |
+| Command | `npx` |
+| Arguments | `-y` |
+| Server Name | `telerikMauiAssistant` (customizable) |
+
+### License Configuration
+
+Add your [Telerik license key]({%slug set-up-your-license%}) as an environment parameter in your `mcp.json` file using one of these options:
+
+Option 1: License File Path (Recommended)
+
+ ```json
+ "env": {
+     "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FIL"
+ }
+ ```
+
+Option 2: Direct License Key
+
+ ```json
+ "env": {
+     "TELERIK_LICENSE": "YOUR_LICENSE_KEY_HERE"
+ }
+ ```
+
+> Option 1 is recommended unless you're sharing settings across different systems. Remember to [update your license key]({%slug set-up-your-license%}#updating-your-license-key) when necessary.
+
+## Visual Studio
+
+For complete setup instructions, see [Use MCP servers in Visual Studio](https://learn.microsoft.com/en-us/visualstudio/ide/mcp-servers).
+
+> Early Visual Studio 17.14 versions require the Copilot Chat window to be open when opening a solution for the MCP server to work properly.
+
+### Workspace-Specific Setup:
+
+1. Add `.mcp.json` to your solution folder:
+
+ ```json
+ {
+   "servers": {
+     "telerikMauiAssistant": {
+       "type": "stdio",
+       "command": "npx",
+       "args": ["-y", "@progress/telerik-maui-mcp@latest"],
+       "env": {
+         "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
+         // or
+         "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
+       }
+     }
+   }
+ }
+ ```
+
+2. Restart Visual Studio.
+3. Enable the `telerikMauiAssistant` tool 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).
+
+### Global Setup:
+
+Add the `.mcp.json` file to your user directory (`%USERPROFILE%`, e.g., `C:\Users\YourName\.mcp.json`).
+
+## Visual Studio Code
+
+For complete setup instructions, see [Use MCP servers in Visual Studio Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
+
+> Visual Studio Code 1.102.1 or newer is required to use the Telerik MCP Server
+
+The basic setup in Visual Studio Code follows these steps:
+
+1. Enable [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) in Visual Studio Code settings.
+2. Create `.vscode/mcp.json` in your workspace root (or user folder for global setup):
+
+ ```json
+ {
+   "servers": {
+     "telerik-maui-assistant": {
+       "type": "stdio",
+       "command": "npx",
+       "args": ["-y", "@progress/telerik-maui-mcp@latest"],
+       "env": {
+         "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
+         // or
+         "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
+       }
+     }
+   }
+ }
+ ```
+
+3. For global discovery, enable [`chat.mcp.discovery.enabled`](vscode://settings/chat.mcp.discovery.enabled) in `settings.json`:
+
+ ```json
+ {
+   "chat.mcp.discovery.enabled": true
+ }
+ ```
+
+4. Restart Visual Studio Code.
+
+## Cursor
+
+For complete setup instructions, see [Model Context Protocol](https://docs.cursor.com/context/mcp).
+
+Create `.cursor/mcp.json` in your workspace root (or user folder for global setup):
+
+```json
+{
+  "mcpServers": {
+    "telerikMauiAssistant": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@progress/telerik-maui-mcp@latest"],
+      "env": {
+        "TELERIK_LICENSE_PATH": "THE_PATH_TO_YOUR_LICENSE_FILE",
+        // or
+        "TELERIK_LICENSE": "YOUR_LICENSE_KEY"
+      }
+    }
+  }
+}
+```
+
+## Usage
+
+To use the Telerik MCP Server:
+
+1. Start your prompt with one of these triggers:
+   - `/telerik` / `@telerik` / `#telerik`
+   - `/telerikmaui` / `@telerikmaui` / `#telerikmaui`
+   - `#telerik-maui-assistant`
+
+2. Verify server activation by looking for these messages:
+   - Visual Studio: `Running telerikMauiAssistant`
+   - Visual Studio Code: `Running telerik-maui-assistant`
+   - Cursor: `Calling MCP tool telerikMauiAssistant`
+
+3. Grant permissions when prompted (per session, workspace, or always).
+
+4. Start fresh sessions for unrelated prompts to avoid context pollution.
+
+### Improving Server Usage
+
+To increase the likelihood of the Telerik MCP server being used, add custom instructions to your AI tool:
+- [GitHub Copilot custom instructions](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat)
+- [Cursor rules](https://docs.cursor.com/context/rules)
+
+### Sample Prompts
+
+The following examples demonstrate useful prompts for the Telerik .NET MAUI MCP Server:
+
+* "`/telerik` Generate a DataGrid with sorting and paging. Bind it to a Person model with sample ViewModel."
+* "`/telerikmaui` Create a ComboBox showing a product list. Include Product class and sample data."
+* "`/telerik` Build a CollectionView with sorting and filtering capabilities."
+
+## Number of Requests
+
+@[template](/_contentTemplates/common/ai-coding-assistant.md#number-of-requests)
+
+## Local AI Model Integration
+
+You can use the Telerik MAUI MCP server with local large language models (LLMs):
+
+1. Run a local model, for example, through [Ollama](https://ollama.com).
+2. Use a bridge package like [MCP-LLM Bridge](https://github.com/patruff/ollama-mcp-bridge).
+3. Connect your local model to the Telerik MCP server.
+
+This setup allows you to use the Telerik AI Coding Assistant without cloud-based AI models.
+
+## See Also
+
+* [Telerik MAUI GitHub Copilot Extension]({%slug ai-copilot-extension%})
+* [AI Coding Assistant Overview]({%slug ai-overview%})