Skip to content

Commit 071c34d

Browse files
authored
docs: refine quick start section (#3388)
1 parent 23c302c commit 071c34d

File tree

1 file changed

+21
-22
lines changed

1 file changed

+21
-22
lines changed

ai/agentic-ui-generator/getting-started.md

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,41 +17,46 @@ This article describes how to install, configure, and use the Telerik UI for Bla
1717

1818
Follow these steps to set up the Agentic UI Generator:
1919

20-
1. Ensure you have a supported license—You need a DevCraft Complete or Ultimate Subscription to access the Agentic UI Generator. If you have a different license type, you can start a [30-day AI Tools trial](https://www.telerik.com/mcp-servers/thank-you-blazor).
20+
1. Ensure you have a supported license. You need a DevCraft Complete or Ultimate Subscription to access the Agentic UI Generator. If you have a different license type, you can start a [30-day AI Tools trial](https://www.telerik.com/mcp-servers/thank-you-blazor).
2121

2222
> For more information about access requirements based on the license type, see [Usage Limits](slug:agentic-ui-generator-overview#usage-limits).
23-
1. Add the MCP server to your IDE—Create an `mcp.json` file in your workspace with the following configuration:
23+
1. To add the MCP server to your IDE, create an `.mcp.json` file in your solution (if you are using Visual Studio), or an `mcp.json` file in your workspace (if you are using Visual Studio Code) with the following configuration:
2424
````JSON.skip-repl
2525
{
2626
"servers": {
27-
"blazor-ui-generator": {
28-
"type": "http",
29-
"url": "https://uiagent.mcp.telerik.com/mcp/blazor",
30-
"headers": {
31-
"x-api-key": "YOUR API KEY"
27+
"blazor-ui-generator": {
28+
"type": "http",
29+
"url": "https://uiagent.mcp.telerik.com/mcp/blazor",
30+
"headers": {
31+
"x-api-key": "YOUR API KEY"
32+
}
3233
}
34+
}
3335
}
34-
}
35-
}
3636
````
37-
> The server name `blazor-ui-generator` can be customized as desired. The name helps distinguish the MCP server in your configuration and does not affect how you invoke the generator tool in your prompt.
38-
1. Obtain your API key—Log in to your [Telerik account](https://www.telerik.com/account/) and generate an API key from the [API Keys page](https://www.telerik.com/account/downloads/api-keys). Replace `YOUR API KEY` in the `mcp.json` file with the generated key.
39-
1. Start using the generator—Open the AI chat interface of your IDE and start your prompt with the `#telerik_ui_generator` handle to invoke the main generator tool:
37+
The server name `blazor-ui-generator` can be customized as desired. The name helps distinguish the MCP server in your configuration and does not affect how you invoke the generator tool in your prompt.
38+
39+
> For more details on how to configure the MCP server, refer to the instructions for your specific IDE below:
40+
> * [Visual Studio](#visual-studio)
41+
> * [Visual Studio Code](#visual-studio-code)
42+
43+
1. Log in to your [Telerik account](https://www.telerik.com/account/) and generate an API key from the [API Keys page](https://www.telerik.com/account/downloads/api-keys). Replace `YOUR API KEY` in the `mcp.json` file with the generated key.
44+
45+
> Refer to the [Obtaining the API Key](#obtaining-the-api-key) section below for detailed instructions.
46+
1. Open the AI chat interface of your IDE and start your prompt with the `#telerik_ui_generator` handle to invoke the main generator tool:
4047
````TEXT.skip-repl
4148
#telerik_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.
4249
````
4350
44-
Step-by-step usage instructions are available in [Using the Agentic UI Generator](#using-the-agentic-ui-generator).
45-
46-
For comprehensive setup guide specific to your IDE, workspace and global configuration options, and detailed API key instructions, refer to the [Installation](#installation) section below.
51+
> Step-by-step usage instructions are available in [Using the Agentic UI Generator](#using-the-agentic-ui-generator).
4752
4853
## Installation
4954
5055
Use the documentation of your AI-powered MCP client to add the Agentic UI Generator to a specific workspace or globally. Below you can find installation tips and examples for some popular MCP clients, and instructions for obtaining your API key.
5156
5257
### Visual Studio
5358
54-
> This section will guide you through the details of **Step 2** from the [Quick Start](#quick-start).
59+
You can use the Agentic UI Generator in Visual Studio on an application level, and you can also enable global automatic discovery of the tool.
5560
5661
#### Application Configuration
5762
@@ -85,8 +90,6 @@ To enable global automatic discovery of the Agentic UI Generator in Visual Studi
8590
8691
### Visual Studio Code
8792

88-
> This section will guide you through the details of **Step 2** from the [Quick Start](#quick-start).
89-
9093
For more information about using MCP servers in Visual Studio Code, refer to [Use MCP servers in VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers).
9194

9295
Make sure that [`chat.mcp.enabled`](vscode://settings/chat.mcp.enabled) is enabled in the VS Code settings.
@@ -132,8 +135,6 @@ After adding the configuration, restart your IDE to load the Agentic UI Generato
132135

133136
### Obtaining the API Key
134137

135-
> This section will guide you through the details of **Step 3** from the [Quick Start](#quick-start).
136-
137138
The following steps provide detailed instructions for obtaining your [Telerik API key](https://www.telerik.com/account/downloads/api-keys), which you need to add as a `headers` parameter in the `mcp.json` file:
138139

139140
1. Log in to your [Telerik account](https://www.telerik.com/account/).
@@ -150,8 +151,6 @@ The following steps provide detailed instructions for obtaining your [Telerik AP
150151

151152
## Using the Agentic UI Generator
152153

153-
> This section will guide you through the details of **Step 4** from the [Quick Start](#quick-start).
154-
155154
Once installed, start a new chat session in your IDE to begin interacting with the Agentic UI Generator via natural language prompts. The Agentic UI Generator can be used in two primary modes: basic usage through [the main tool](#call-the-agentic-ui-generator), or advanced usage by [calling specific MCP tools directly](#target-the-tools-advanced).
156155

157156
### Call the Agentic UI Generator

0 commit comments

Comments
 (0)