diff --git a/_contentTemplates/common/get-started.md b/_contentTemplates/common/get-started.md index 6a8d07439..a59f43f57 100644 --- a/_contentTemplates/common/get-started.md +++ b/_contentTemplates/common/get-started.md @@ -79,8 +79,6 @@ In this tutorial, you will use the [Telerik NuGet feed](slug:installation/nuget) Well done! Now you have your first Telerik UI for Blazor component running in your Blazor app, showcasing the power of front-end development with Blazor. -@[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) - #end #next-steps-after-getting-started diff --git a/ai/copilot-extension.md b/ai/copilot-extension.md index c150f1f8a..d2087f112 100644 --- a/ai/copilot-extension.md +++ b/ai/copilot-extension.md @@ -19,6 +19,7 @@ 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). +* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). ## Installation @@ -48,9 +49,9 @@ To use the Telerik Blazor Copilot extension: 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` Generate a Telerik ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data. -* `@telerikblazor` Show me sample code for a Telerik Blazor Grid with virtual scrolling for the rows and columns. +* "`@telerikblazor` Generate a Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data." +* "`@telerikblazor` Generate a Telerik ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data." +* "`@telerikblazor` Show me sample code for a Telerik Blazor Grid with virtual scrolling for the rows and columns." ## Number of Requests @@ -59,7 +60,7 @@ The following list describes how your prompts may look like: 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 +* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 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. diff --git a/ai/mcp-server.md b/ai/mcp-server.md index 8b68aee07..bd6f5ee83 100644 --- a/ai/mcp-server.md +++ b/ai/mcp-server.md @@ -19,6 +19,7 @@ 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). +* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). ## Installation @@ -162,9 +163,9 @@ To increase the probability of the Telerik MVC Server being used, or to call it The following list describes how your prompts may look like: -* Telerik Generate a Blazor Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data. -* Telerik Generate a ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data. -* Telerik Show me sample code for a Blazor Grid with virtual scrolling for the rows and columns. +* "Telerik Generate a Blazor Grid with sorting and paging enabled. Bind the Grid to a Person model and provide dummy data." +* "Telerik Generate a ComboBox for Blazor that shows a list of products. Create a Product class and generate sample data." +* "Telerik Show me sample code for a Blazor Grid with virtual scrolling for the rows and columns." ## Number of Requests @@ -174,7 +175,7 @@ The following list describes how your prompts may look like: 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 +* Subscription licenses: virtually unlimited number of requests with a fair use threshold of 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. diff --git a/ai/overview.md b/ai/overview.md new file mode 100644 index 000000000..cc6aecffc --- /dev/null +++ b/ai/overview.md @@ -0,0 +1,41 @@ +--- +title: Overview +page_title: Telerik Blazor AI Tooling Overview +description: Learn about the AI-powered developer tools that integrate with your IDE or code editor for greater productivity and enhanced developer experience. +slug: ai-overview +tags: telerik,blazor,ai +published: True +position: 1 +--- + +# Telerik Blazor AI Coding Assistant Overview + +The Telerik Blazor AI Coding Assistant improves your developer experience and increases your productivity when implementing Blazor apps that include Telerik UI for Blazor. The coding assistant is an AI code generator that provides proprietary context to AI models in order to produce higher quality code samples with the [Telerik UI for Blazor components](https://www.telerik.com/blazor-ui) and API. + +The Telerik AI Coding Assistant is integrated in: + +* The [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension) +* The [Telerik Blazor MCP Server](slug:ai-mcp-server) + +The major differences between these tools are: + +* The MCP server is more powerful and can handle more complex prompts that require several requests to the AI model. An MCP-enabled client like GitHub Copilot in **Agent** mode can make changes to your app and rebuild it to verify the AI suggestions. +* The responses of the GitHub Copilot extension may contain shorter or partial code snippets and more explanations how to accomplish the task. When using the MCP server, the AI response is mostly code. + +## Getting Started + +To use the Telerik Blazor AI Coding Assistant, you need: + +* 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). +* A [Blazor application that includes Telerik UI for Blazor](slug:blazor-overview#getting-started). + +> A Telerik [Subscription license](https://www.telerik.com/purchase/faq/licensing-purchasing) is recommended in order to use the Telerik Blazor AI Coding Assistant: +> +> * Subscription license holders can make an unlimited number of requests. +> * Perpetual license holders and trial users have a limited number of requests per year. + +## Next Steps + +* Install the [Telerik Blazor GitHub Copilot Extension](slug:ai-copilot-extension). +* Add the [Telerik Blazor MCP Server](slug:ai-mcp-server) to an MCP-enabled client. diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index 3127341ab..2f8842922 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -101,6 +101,12 @@ 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) +## Step 7: Install Telerik AI Coding Assistants + +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. + +@[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) + ## Video Tutorial If you prefer video instructions, you can also check the video tutorial below. diff --git a/getting-started/hybrid-blazor.md b/getting-started/hybrid-blazor.md index 65ac8bfe0..11e97cc0f 100644 --- a/getting-started/hybrid-blazor.md +++ b/getting-started/hybrid-blazor.md @@ -114,6 +114,10 @@ namespace MyBlazorMauiAppName Add your desired Telerik Blazor components in the app as in a native Blazor app. Explore the available UI for Blazor components and their features in our [live demos](https://demos.telerik.com/blazor-ui). +### 8. Install Telerik AI Coding Assistants + +* 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. + ## Running the Blazor Hybrid App You can now run the hybrid application in debug mode, but it's recommended to [be aware of possible caveats during deployment and prevent them upfront](slug:hybrid-blazor-apps#known-issues). @@ -127,7 +131,6 @@ 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 diff --git a/getting-started/web-app.md b/getting-started/web-app.md index 1f3c7d644..d279ea385 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -121,9 +121,11 @@ 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 +## Step 7: Install Telerik AI Coding Assistants -* 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. +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. + +@[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) ## See Also diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index dddacd501..4f73679c6 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -37,6 +37,7 @@ The required milestones to obtain and use Telerik UI for Blazor are: 1. Add the [CSS theme and JavaScript file](#css-theme-and-javascript-files). 1. Add the [``](#telerikrootcomponent). 1. [Add components to a view](#add-telerik-components-to-a-view). +1. Install [Telerik Blazor AI coding assistants](#install-telerik-ai-coding-assistants). ## NuGet Packages @@ -260,12 +261,13 @@ The Blazor application is ready to use Telerik components. } ```` -@[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) - -## Next Steps +## Install Telerik AI Coding Assistants * 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. +@[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started) + + ## See Also * [Automated MSI installer](slug:installation-msi)