You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ai/agentic-ui-generator/getting-started.md
+21-22Lines changed: 21 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,41 +17,46 @@ This article describes how to install, configure, and use the Telerik UI for Bla
17
17
18
18
Follow these steps to set up the Agentic UI Generator:
19
19
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).
21
21
22
22
> 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:
> 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:
40
47
````TEXT.skip-repl
41
48
#telerik_ui_generator Create a dashboard page with a grid showing sales data and a chart visualizing monthly trends.
42
49
````
43
50
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).
47
52
48
53
## Installation
49
54
50
55
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.
51
56
52
57
### Visual Studio
53
58
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.
55
60
56
61
#### Application Configuration
57
62
@@ -85,8 +90,6 @@ To enable global automatic discovery of the Agentic UI Generator in Visual Studi
85
90
86
91
### Visual Studio Code
87
92
88
-
> This section will guide you through the details of **Step 2** from the [Quick Start](#quick-start).
89
-
90
93
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).
91
94
92
95
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
132
135
133
136
### Obtaining the API Key
134
137
135
-
> This section will guide you through the details of **Step 3** from the [Quick Start](#quick-start).
136
-
137
138
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:
138
139
139
140
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
150
151
151
152
## Using the Agentic UI Generator
152
153
153
-
> This section will guide you through the details of **Step 4** from the [Quick Start](#quick-start).
154
-
155
154
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).
0 commit comments