@progress/kendo-angular-mcp 1.4.2 → 1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -33
- package/dist/index.js +54 -39
- package/package.json +2 -2
- package/proto/service.proto +3 -0
package/README.md
CHANGED
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
The Kendo UI for Angular [MCP Server](https://modelcontextprotocol.io/introduction) enables you to achieve integration with your already existing AI workflows and reach new levels of developer productivity. The MCP server provides proprietary context to AI-powered IDEs, apps and tools. You can use the Kendo UI for Angular MCP server to ask about Kendo UI for Angular components, features, or general usage. You can successfully prompt more complex questions and tasks, and generate tailored code that includes Kendo UI for Angular components and API.
|
|
4
4
|
|
|
5
|
-
As of version 1.
|
|
5
|
+
As of version 1.4 the Kendo UI for Angular MCP server automatically recognizes your [Telerik license](https://www.telerik.com/purchase/faq/licensing-purchasing) and activates the Agentic UI Generator and [the available assistants](https://www.telerik.com/kendo-angular-ui/components/ai-tools#what-are-the-kendo-ui-for-angular-ai-tools):
|
|
6
6
|
|
|
7
|
-
* **Agentic UI Generator**—Includes all
|
|
8
|
-
* **AI Coding Assistant**—Includes the Component Tool and Icon Tool, coordinated by an orchestrator optimized for component-level development.
|
|
7
|
+
* **Agentic UI Generator**—Includes all five specialized assistants (Component, Layout, Styling, Icon and Accessibility), coordinated by a comprehensive orchestrator designed for complete UI generation.
|
|
9
8
|
|
|
10
9
|
## **Agentic UI Generator** Intended Use
|
|
11
10
|
|
|
@@ -18,20 +17,12 @@ As of version 1.3 the Kendo UI for Angular MCP server supports [two modes of ope
|
|
|
18
17
|
* Create new responsive pages and sections.
|
|
19
18
|
* Convert existing pages to be responsive for mobile and tablet views.
|
|
20
19
|
|
|
21
|
-
## **AI Coding Assistant** Intended Use
|
|
22
|
-
|
|
23
|
-
* **Initial code generation**: Quickly add components to your app to speed up the initial development.
|
|
24
|
-
* **Component configuration**: Enable or disable specific component features, or fine tune the configuration through prompting. More * complex configurations are possible but may require additional manual work to be production-ready.
|
|
25
|
-
* **Dummy data generation and data binding**: Quickly add data to your app for testing and prototyping purposes. Avoid exposing or providing access to your proprietary or production data to AI-enabled tools.
|
|
26
|
-
* **Step-by-step explanations**: Understand the solutions provided by the AI Coding Assistant through the detailed explanations (depends * on the tool, mode, and model used). To further develop your knowledge, check the respective documentation.
|
|
27
|
-
* **Preliminary troubleshooting**: Resolve obvious and easy-to-solve issues affecting your code. For more complex issues, look for assistance from the community or contact the support team.
|
|
28
|
-
|
|
29
20
|
## Prerequisites
|
|
30
21
|
|
|
31
22
|
To use the Kendo UI for Angular MCP server, you need:
|
|
32
23
|
|
|
33
24
|
* A [compatible MCP client (IDE, code editor or app)](https://modelcontextprotocol.io/clients) that supports *MCP tools*.
|
|
34
|
-
* An active [Telerik license](https://www.telerik.com/kendo-angular-ui/components/ai-tools#license-requirements) that provides access to the Kendo UI for Angular MCP server.
|
|
25
|
+
* An active [Telerik Subscription license](https://www.telerik.com/kendo-angular-ui/components/ai-tools#license-requirements) that provides access to the Kendo UI for Angular MCP server.
|
|
35
26
|
|
|
36
27
|
## Installation
|
|
37
28
|
|
|
@@ -139,27 +130,8 @@ Also check more useful documentation about how to use the Agentic UI Generator h
|
|
|
139
130
|
- [Best Practices](https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started#best-practices) for more usage tips.
|
|
140
131
|
- [Prompt Library](https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/prompt-library)
|
|
141
132
|
|
|
142
|
-
### AI Coding Assistant
|
|
143
|
-
|
|
144
|
-
To use the AI Coding Assistant mode:
|
|
145
|
-
|
|
146
|
-
1. Start your prompt with `#kendo_angular_assistant` (the main MCP tool to start the agentic workflow in the coding agent).
|
|
147
|
-
1. This will trigger an agentic workflow using the other available MCP tools to retrieve relevant context based on your prompt.
|
|
148
|
-
1. Inspect the output and verify that the Kendo UI for Angular MCP Server is used. Look for a statement in the output, which is similar to:
|
|
149
|
-
* `Running kendo-angular-mcp-server` (in VS Code)
|
|
150
|
-
* `Calling MCP tool kendo-angular-mcp-server` (in Cursor)
|
|
151
|
-
|
|
152
|
-
If the Kendo UI for Angular MCP server is not used even though it's installed and enabled, double-check the server name in your configuration and try rephrasing your prompt.
|
|
153
|
-
1. If requested, grant the Kendo UI for Angular MCP server a permission to run for this session, workspace, or always.
|
|
154
|
-
|
|
155
|
-
Also check more useful documentation about how to use the AI Coding Assistant here:
|
|
156
|
-
- [Getting Started](https://www.telerik.com/kendo-angular-ui/components/ai-tools/ai-assistant/getting-started)
|
|
157
|
-
- [Use Cases](https://www.telerik.com/kendo-angular-ui/components/ai-tools/ai-assistant/getting-started#use-cases)
|
|
158
|
-
- [Best Practices](https://www.telerik.com/kendo-angular-ui/components/ai-tools/ai-assistant/getting-started#best-practices)
|
|
159
|
-
- [Prompt Library](https://www.telerik.com/kendo-angular-ui/components/ai-tools/ai-assistant/prompt-library)
|
|
160
|
-
|
|
161
133
|
### AI Tools Usage
|
|
162
|
-
|
|
134
|
+
The Kendo UI for Angular MCP server and its tools are offered as a single experience through the Agentic UI Generator (#kendo_ui_generator) in all active [Telerik subscription models](https://www.telerik.com/purchase.aspx?filter=web).
|
|
163
135
|
- [License Requirements](https://www.telerik.com/kendo-angular-ui/components/ai-tools#license-requirements)
|
|
164
|
-
- [Usage Limits](https://www.telerik.com/kendo-angular-ui/components/ai-tools#usage-limits)
|
|
136
|
+
- [Usage Limits](https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/getting-started#usage-limits)
|
|
165
137
|
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import{McpServer as
|
|
3
|
-
`,
|
|
2
|
+
import{McpServer as dt}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport as ut}from"@modelcontextprotocol/sdk/server/stdio.js";import{dirname as et,join as tt}from"path";import{fileURLToPath as ot}from"url";import{loadLicense as je,decodeLicenseKey as We,decodeLicenseEvidence as Ye}from"@progress/kendo-licensing/utils";var G=class extends Error{constructor(t){super(t),this.name="LicenseError"}};function ee(e){return e.replace(/^\uFEFF/,"")}async function te(){let e=null,t=null;try{let o=je();if(!o.success)throw new G(o.message);try{e=(await We(o.value)).licenses.find(async s=>!!(await Ye(s)).userId)}catch(n){console.log(n.message)}if(!e)return[ee(o.value),null]}catch(o){return t=o.message||"Unknown error loading license.",[null,t]}return[ee(e),null]}import R from"node:fs";import D from"node:path";var q=!1,I=process.env.DEBUG_LOG_FILE,oe=!!(I&&typeof I=="string");if(oe){let e=D.resolve(I),t=D.dirname(e);if(t!=="."&&t!==process.cwd()&&!R.existsSync(t))try{R.mkdirSync(t,{recursive:!0})}catch(o){console.error("Error creating log directory:",o)}if(!R.existsSync(e))try{R.writeFileSync(e,"")}catch(o){console.error("Error creating log file:",o)}}else q=!1;q=oe&&!!I&&R.existsSync(D.resolve(I));function y(...e){if(q&&I){let n=`${new Date().toISOString()}: ${e.join(" ")}
|
|
3
|
+
`,s=D.resolve(I);R.appendFile(s,n,r=>{r&&console.error("Error writing to log file:",r)})}}import ze from"@grpc/proto-loader";import $ from"@grpc/grpc-js";import re from"path";import ne from"fs";import{fileURLToPath as He}from"url";var Qe=He(import.meta.url),Je=re.dirname(Qe),ae={version:"unknown"},se=re.resolve(Je,"../package.json");ne.existsSync(se)&&(ae=JSON.parse(ne.readFileSync(se,"utf-8")));function Xe(e){return e.replace(/\u2014/g,"--").replace(/\u2013/g,"-").replace(/[^\x20-\x7E]/g,"")}var _=class{constructor(t,o,n){this.contextApiUrl=t;this.protoPath=o;this.options=n;this.toolNameHeader="assistant";let s=ze.loadSync(this.protoPath,{keepCase:!0,longs:String,enums:String,defaults:!0,oneofs:!0});this.isDev=this.contextApiUrl?.includes("localhost")||this.contextApiUrl?.includes("127.0.0.1"),y("Using ContextApi URl:",this.contextApiUrl);let r=$.loadPackageDefinition(s);this.client=new r.ContextQueryService(this.contextApiUrl||"contextapi.telerik.com:443",this.isDev?$.credentials.createInsecure():$.credentials.createSsl())}async getMetadata({meta:t}={meta:{}}){let[o,n]=this.isDev?"fake_license":await te(),s=process.env.CONTEXTAPI_API_KEY,r=s&&typeof s=="string",l=o&&typeof o=="string";if(!l&&!r&&n)throw new Error(`Failed to authenticate with API key or License key!
|
|
4
4
|
|
|
5
|
-
License Error: ${n}`);let p=new _.Metadata;if(c)try{p.add("x-license-key",o)}catch(g){throw h("Error adding license key to metadata:",g),new Error(`Failed to use license key: ${g.message}`)}s&&p.add("x-api-key",r),this.options?.libName&&p.add("x-library-name",this.options.libName),p.add("x-tool-name",this.toolNameHeader);let u=JSON.stringify({...t,source:"npm",version:ae.version,os:process.platform,node_version:process.version});return p.add("x-request-metadata",Xe(u)),p}async query(t){let o=await this.getMetadata();return new Promise((n,r)=>{this.client.query(t,o,(s,c)=>{s?r(new Error(s)):n(c)})})}async queryCssUtils(t){let o=await this.getMetadata();return new Promise((n,r)=>{this.client.cssUtilsSearch(t,o,(s,c)=>{s?(h("Error querying CSS Utils:",s),r(new Error(s))):n(c)})})}async queryIconsSearch(t){let o=await this.getMetadata();return new Promise((n,r)=>{this.client.iconsSearch(t,o,(s,c)=>{s?(h("Error querying Icons Search:",s),r(new Error(s))):n(c)})})}async queryBuildingBlocks(t){let o=await this.getMetadata();return new Promise((n,r)=>{this.client.buildingBlocksSearch(t,o,(s,c)=>{s?(h("Error querying Building Blocks:",s),r(new Error(s))):n(c)})})}async validateUserLicense(){let t=await this.getMetadata();return new Promise((o,n)=>{this.client.validateUserLicense(null,t,(r,s)=>{r?(h("Error validating user license:",r),n(new Error(r))):o(s)})})}async queryThemeGenerate(t){let o=await this.getMetadata();return new Promise((n,r)=>{this.client.generateTheme(t,o,(s,c)=>{s?(h("Error querying context API/GenerateTheme:",s),r(new Error(s))):n(c)})})}async recordOrchestratorUserRequest({meta:t}){let o=await this.getMetadata({meta:t});return new Promise((n,r)=>{this.client.recordOrchestratorUserRequest(null,o,(s,c)=>{s?(h("Error recording orchestrator user request:",s),r(new Error(s))):n(c)})})}};import{z as B}from"zod";var _t=B.object({user_id:B.string(),user_email:B.string().email()});import{z as f}from"zod";var Ze=f.object({Product:f.object({Id:f.number().int(),Code:f.string(),Name:f.string()}),License:f.nullable(f.object({Id:f.number().int(),Name:f.string(),Type:f.string(),Active:f.boolean()})),Availability:f.array(f.object({LicenseStart:f.nullable(f.string().datetime()),LicenseEnd:f.nullable(f.string().datetime())})),IsLicenseAvailable:f.optional(f.boolean())}),Mt=f.array(Ze);async function ie(e){let t=process.env.KENDO_MCP_ACCESS;if(t==="true"||t==="1"||t==="full")return"full";if(typeof t=="string"&&(t.toLowerCase()==="agent"||t.toLowerCase()==="assistant"))return t.toLowerCase();let o=await e();return o.toLocaleLowerCase()==="agentic_ui_generator"?"agent":o.toLocaleLowerCase()==="ai_coding_assistants"?"assistant":"none"}function le(){return'**Accessibility Guidelines: WCAG 2.2 Level AA Compliance**\n\n**Core Principles:**\n1. Use semantic HTML and ARIA correctly\n2. Ensure WCAG 2.2 AA compliance\n3. Follow W3C ARIA Authoring Practices\n4. Provide standards-based accessibility fixes\n\n**1. Form Control Labels** (WCAG 1.3.1, 3.3.2, 4.1.2)\nEvery input must have an associated label.\nCORRECT: `<input type="search" aria-label="Search products" placeholder="Search...">`\nWRONG: `<span>Email</span><input type="email">` (no association)\nWRONG: `<input type="email" placeholder="Email">` (placeholder as label)\n\n**2. Button Accessibility** (WCAG 4.1.2, 2.4.6, 2.5.3)\nAll buttons need accessible names describing their purpose.\nCORRECT: `<button type="button">Save Changes</button>`\nCORRECT: `<button aria-label="Close dialog"><svg aria-hidden="true" focusable="false">...</svg></button>`\nWRONG: `<button><svg>...</svg></button>` (no accessible name)\nWRONG: `<button>Click here</button>` (generic text)\n\n**3. Popup/Menu Triggers** (WCAG 4.1.2, 1.3.1)\nIndicate popup purpose and state using aria-haspopup, aria-expanded, aria-controls.\nCORRECT: `<button aria-expanded="false" aria-haspopup="menu" aria-controls="menu-id">Settings</button>`\n\n**4. Image Accessibility** (WCAG 1.1.1)\nInformative: `<img src="chart.png" alt="Sales increased 25% in Q4 2024">`\nFunctional: `<a href="/home"><img src="logo.png" alt="Company Name Home"></a>`\nDecorative: `<img src="border.png" alt="" role="presentation">`\nComplex: `<img src="chart.png" alt="Sales data" aria-describedby="desc-id">`\nWRONG: Missing alt, filename as alt, generic alt for decorative images\n\n**5. Link Accessibility** (WCAG 2.4.4, 2.4.6)\nLinks must be descriptive and understandable out of context.\nCORRECT: `<a href="/products">View All Products</a>`\nCORRECT: `<a href="/article" aria-label="Read more about New Product Launch">Read more</a>`\nWRONG: "Click here", "Read more", "Learn more" without context\n\n**6. Form Validation** (WCAG 3.3.1, 3.3.2, 3.3.3)\nErrors must be identified, associated with inputs, and provide suggestions. Use aria-describedby, aria-invalid="true", and role="alert".\n\n**7. Heading Structure** (WCAG 1.3.1, 2.4.6)\nEach page should have an `<h1>` that describes its content. Use hierarchical, descriptive headings with no skipped levels (h1\u2192h2\u2192h3).\nCORRECT: `<h1>Dashboard</h1> <h2>Sales</h2> <h3>By Region</h3>`\nWRONG: No `<h1>` on the page, or skipping levels (h1\u2192h3)\nIf a heading should look smaller than its semantic level, use CSS: `<h2 class="text-sm">Subtitle</h2>`\n\n**8. Page Component Landmark Rules** (WCAG 1.3.1, 4.1.2)\nPage components (route components) may be rendered inside a layout that already provides `<main>`, `<header>`, or `<footer>`. Since the layout configuration is unknown, avoid using these landmarks in page components to prevent potential duplication and nesting violations. Use `<div>`, `<section>`, or `<article>` as the top-level wrapper instead.\n\n**Quick Checklist:**\n- **Forms:** Associated labels, aria-required on required fields, autocomplete attributes, aria-describedby for errors, aria-invalid for invalid fields, fieldsets with legends\n- **Buttons/Links:** Accessible names, aria-label for icon buttons, aria-hidden on decorative icons, descriptive link text\n- **Popups/Dialogs:** aria-haspopup, aria-expanded, aria-controls, role="dialog", aria-modal="true", aria-labelledby, focus trap, Escape to close\n- **Images:** alt on all images, descriptive alt for informative, empty alt for decorative, aria-describedby for complex\n- **Structure:** One h1, logical heading hierarchy, avoid `<main>`, `<header>`, or `<footer>` in page/route components (the layout may already provide them), use `<section>` or `<div>` as page-level wrappers, semantic HTML\n- **Dynamic Content:** role="status"/aria-live="polite" for updates, role="alert"/aria-live="assertive" for critical alerts\n- **Keyboard/Focus:** All interactive elements keyboard accessible, logical focus order, visible focus indicators, no keyboard traps (except modals)\n- **Color/Contrast:** 4.5:1 text contrast (3:1 large text), 3:1 UI component contrast, no color-only information, 3:1 focus indicator contrast'}var d="Kendo UI for Angular",k="angular",I="kendo",P=["AIPrompt","ActionSheet","AppBar","ArcGauge","AutoComplete","Avatar","Badge","Barcode","BottomNavigation","BreadCrumb","Button","ButtonGroup","Calendar","Card","ChartWizard","Charts","CheckBox","Chip","ChipList","ChunkProgressBar","CircularGauge","CircularProgressBar","ColorGradient","ColorPalette","ColorPicker","ComboBox","ContextMenu","ConversationalUI","DataQuery","DateInput","DateMath","DatePicker","DateRange","DateTimePicker","Diagram","Dialog","DragandDrop","Drawer","Drawing","DropDownButton","DropDownList","DropDownTree","Editor","ExcelExport","ExpansionPanel","FileSaver","FileSelect","Filter","FlatColorPicker","FloatingActionButton","FloatingLabel","Forms","FormField","Gantt","Gauges","General","Grid","GridLayout","Icon","InlineAIPrompt","Label","LinearGauge","ListBox","ListView","Loader","Map","MaskedTextBox","Menu","MultiColumnComboBox","MultiSelect","MultiSelectTree","MultiViewCalendar","Notification","NumericTextBox","OTPInput","Pager","PanelBar","PDFExport","PDFViewer","PivotGrid","Popover","Popup","ProgressBar","PromptBox","QRCode","RadialGauge","RadioButton","RangeSlider","Rating","Ripple","Sankey","Scheduler","ScrollView","Signature","Skeleton","Slider","SmartPasteButton","Sortable","StockChart","Sparkline","SpeechToTextButton","SplitButton","Splitter","Spreadsheet","StackLayout","Stepper","SVGIcon","Switch","TabStrip","TextArea","TextBox","TileLayout","Timeline","TimePicker","ToolBar","Tooltip","TreeList","TreeView","Typography","Upload","Window"],ce=new Map([["actionsheet","@progress/kendo-angular-navigation"],["aiprompt","@progress/kendo-angular-conversational-ui"],["appbar","@progress/kendo-angular-navigation"],["arcgauge","@progress/kendo-angular-gauges"],["autocomplete","@progress/kendo-angular-dropdowns"],["avatar","@progress/kendo-angular-layout"],["badge","@progress/kendo-angular-indicators"],["barcode","@progress/kendo-angular-barcodes"],["bottomnavigation","@progress/kendo-angular-navigation"],["breadcrumb","@progress/kendo-angular-navigation"],["button","@progress/kendo-angular-buttons"],["buttongroup","@progress/kendo-angular-buttons"],["calendar","@progress/kendo-angular-dateinputs"],["card","@progress/kendo-angular-layout"],["chartwizard","@progress/kendo-angular-chart-wizard"],["checkbox","@progress/kendo-angular-inputs"],["chip","@progress/kendo-angular-buttons"],["chiplist","@progress/kendo-angular-buttons"],["chunkprogressbar","@progress/kendo-angular-progressbar"],["circulargauge","@progress/kendo-angular-gauges"],["circularprogressbar","@progress/kendo-angular-progressbar"],["colorgradient","@progress/kendo-angular-inputs"],["colorpalette","@progress/kendo-angular-inputs"],["colorpicker","@progress/kendo-angular-inputs"],["combobox","@progress/kendo-angular-dropdowns"],["contextmenu","@progress/kendo-angular-menu"],["dataquery","@progress/kendo-data-query"],["dateinput","@progress/kendo-angular-dateinputs"],["datemath","@progress/kendo-date-math"],["datepicker","@progress/kendo-angular-dateinputs"],["daterangepicker","@progress/kendo-angular-dateinputs"],["datetimepicker","@progress/kendo-angular-dateinputs"],["diagram","@progress/kendo-angular-diagrams"],["dialog","@progress/kendo-angular-dialog"],["drawer","@progress/kendo-angular-layout"],["drawing","@progress/kendo-drawing"],["dropdownbutton","@progress/kendo-angular-buttons"],["dropdownlist","@progress/kendo-angular-dropdowns"],["dropdowntree","@progress/kendo-angular-dropdowns"],["editor","@progress/kendo-angular-editor"],["excelexport","@progress/kendo-angular-excel-export"],["expansionpanel","@progress/kendo-angular-layout"],["filesaver","@progress/kendo-file-saver"],["fileselect","@progress/kendo-angular-upload"],["filter","@progress/kendo-angular-filter"],["flatcolorpicker","@progress/kendo-angular-inputs"],["floatingactionbutton","@progress/kendo-angular-buttons"],["floatinglabel","@progress/kendo-angular-label"],["formfield","@progress/kendo-angular-inputs"],["forms","@progress/kendo-angular-inputs"],["gantt","@progress/kendo-angular-gantt"],["grid","@progress/kendo-angular-grid"],["gridlayout","@progress/kendo-angular-layout"],["icon","@progress/kendo-angular-icons"],["inlineaiprompt","@progress/kendo-angular-conversational-ui"],["label","@progress/kendo-angular-label"],["lineargauge","@progress/kendo-angular-gauges"],["listbox","@progress/kendo-angular-listbox"],["listview","@progress/kendo-angular-listview"],["loader","@progress/kendo-angular-indicators"],["map","@progress/kendo-angular-map"],["maskedtextbox","@progress/kendo-angular-inputs"],["menu","@progress/kendo-angular-menu"],["multicolumncombobox","@progress/kendo-angular-dropdowns"],["multiselect","@progress/kendo-angular-dropdowns"],["multiselecttree","@progress/kendo-angular-dropdowns"],["multiviewcalendar","@progress/kendo-angular-dateinputs"],["notification","@progress/kendo-angular-notification"],["numerictextbox","@progress/kendo-angular-inputs"],["otpinput","@progress/kendo-angular-inputs"],["pager","@progress/kendo-angular-pager"],["panelbar","@progress/kendo-angular-layout"],["pdfexport","@progress/kendo-angular-pdf-export"],["pdfviewer","@progress/kendo-angular-pdfviewer"],["pivotgrid","@progress/kendo-angular-pivotgrid"],["popover","@progress/kendo-angular-tooltip"],["popup","@progress/kendo-angular-popup"],["progressbar","@progress/kendo-angular-progressbar"],["promptbox","@progress/kendo-angular-conversational-ui"],["qrcode","@progress/kendo-angular-barcodes"],["radialgauge","@progress/kendo-angular-gauges"],["radiobutton","@progress/kendo-angular-inputs"],["rangeslider","@progress/kendo-angular-inputs"],["rating","@progress/kendo-angular-inputs"],["ripple","@progress/kendo-angular-ripple"],["sankey","@progress/kendo-angular-charts"],["scheduler","@progress/kendo-angular-scheduler"],["scrollview","@progress/kendo-angular-scrollview"],["signature","@progress/kendo-angular-inputs"],["skeleton","@progress/kendo-angular-indicators"],["slider","@progress/kendo-angular-inputs"],["smartpastebutton","@progress/kendo-angular-buttons"],["sortable","@progress/kendo-angular-sortable"],["sparkline","@progress/kendo-angular-charts"],["speechtotextbutton","@progress/kendo-angular-buttons"],["splitbutton","@progress/kendo-angular-buttons"],["splitter","@progress/kendo-angular-layout"],["spreadsheet","@progress/kendo-angular-spreadsheet"],["stacklayout","@progress/kendo-angular-layout"],["stepper","@progress/kendo-angular-layout"],["stockchart","@progress/kendo-angular-charts"],["svgicon","@progress/kendo-angular-icons"],["switch","@progress/kendo-angular-inputs"],["tabstrip","@progress/kendo-angular-layout"],["textarea","@progress/kendo-angular-inputs"],["textbox","@progress/kendo-angular-inputs"],["tilelayout","@progress/kendo-angular-layout"],["timeline","@progress/kendo-angular-layout"],["timepicker","@progress/kendo-angular-dateinputs"],["toolbar","@progress/kendo-angular-toolbar"],["treelist","@progress/kendo-angular-treelist"],["treeview","@progress/kendo-angular-treeview"],["typography","@progress/kendo-angular-typography"],["upload","@progress/kendo-angular-upload"],["window","@progress/kendo-angular-dialog"],["charts","@progress/kendo-angular-charts"],["conversationalui","@progress/kendo-angular-conversational-ui"],["tooltip","@progress/kendo-angular-tooltip"]]);var nt=tt(et(ot(import.meta.url)),"../proto/service.proto"),G=new $("contextapi.telerik.com:443",nt,{libName:k});var pe=async()=>G.validateUserLicense();import ut from"fs";import Fe from"path";import{fileURLToPath as mt}from"url";import{z as m}from"zod";var C=class{constructor(t,o,n){this.name=t;this.config=o;this.cb=n}register(t){this.server=t,this.server.registerTool(this.name,this.config,this.cb)}hasAccess(t){return!this.config.requiredAccess||this.config.requiredAccess.length===0?!0:t==="full"||this.config.requiredAccess.includes(t)}};var R=(e,t)=>`# ${e.suiteName} - Code Validation & Quality Assurance
|
|
5
|
+
License Error: ${n}`);let p=new $.Metadata;if(l)try{p.add("x-license-key",o)}catch(g){throw y("Error adding license key to metadata:",g),new Error(`Failed to use license key: ${g.message}`)}r&&p.add("x-api-key",s),this.options?.libName&&p.add("x-library-name",this.options.libName),p.add("x-tool-name",this.toolNameHeader);let u=JSON.stringify({...t,source:"npm",version:ae.version,os:process.platform,node_version:process.version});return p.add("x-request-metadata",Xe(u)),p}async query(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.query(t,o,(r,l)=>{r?s(new Error(r)):n(l)})})}async getApiRefMatches(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.getApiRefMatches(t,o,(r,l)=>{r?s(new Error(r)):n(l)})})}async queryCssUtils(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.cssUtilsSearch(t,o,(r,l)=>{r?(y("Error querying CSS Utils:",r),s(new Error(r))):n(l)})})}async queryIconsSearch(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.iconsSearch(t,o,(r,l)=>{r?(y("Error querying Icons Search:",r),s(new Error(r))):n(l)})})}async queryBuildingBlocks(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.buildingBlocksSearch(t,o,(r,l)=>{r?(y("Error querying Building Blocks:",r),s(new Error(r))):n(l)})})}async validateUserLicense(){let t=await this.getMetadata();return new Promise((o,n)=>{this.client.validateUserLicense(null,t,(s,r)=>{s?(y("Error validating user license:",s),n(new Error(s))):o(r)})})}async queryThemeGenerate(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.generateTheme(t,o,(r,l)=>{r?(y("Error querying context API/GenerateTheme:",r),s(new Error(r))):n(l)})})}async recordOrchestratorUserRequest({meta:t}){let o=await this.getMetadata({meta:t});return new Promise((n,s)=>{this.client.recordOrchestratorUserRequest(null,o,(r,l)=>{r?(y("Error recording orchestrator user request:",r),s(new Error(r))):n(l)})})}};import{z as B}from"zod";var _t=B.object({user_id:B.string(),user_email:B.string().email()});import{z as A}from"zod";var Ze=A.object({Product:A.object({Id:A.number().int(),Code:A.string(),Name:A.string()}),License:A.nullable(A.object({Id:A.number().int(),Name:A.string(),Type:A.string(),Active:A.boolean()})),Availability:A.array(A.object({LicenseStart:A.nullable(A.string().datetime()),LicenseEnd:A.nullable(A.string().datetime())})),IsLicenseAvailable:A.optional(A.boolean())}),qt=A.array(Ze);async function ie(e){let t=process.env.KENDO_MCP_ACCESS;if(t==="true"||t==="1"||t==="full")return"full";if(typeof t=="string"&&(t.toLowerCase()==="agent"||t.toLowerCase()==="assistant"))return t.toLowerCase();let o=await e();return o.toLocaleLowerCase()==="agentic_ui_generator"?"agent":o.toLocaleLowerCase()==="ai_coding_assistants"?"assistant":"none"}function le(){return'**Accessibility Guidelines: WCAG 2.2 Level AA Compliance**\n\n**Core Principles:**\n1. Use semantic HTML and ARIA correctly\n2. Ensure WCAG 2.2 AA compliance\n3. Follow W3C ARIA Authoring Practices\n4. Provide standards-based accessibility fixes\n\n**1. Form Control Labels** (WCAG 1.3.1, 3.3.2, 4.1.2)\nEvery input must have an associated label.\nCORRECT: `<input type="search" aria-label="Search products" placeholder="Search...">`\nWRONG: `<span>Email</span><input type="email">` (no association)\nWRONG: `<input type="email" placeholder="Email">` (placeholder as label)\n\n**2. Button Accessibility** (WCAG 4.1.2, 2.4.6, 2.5.3)\nAll buttons need accessible names describing their purpose.\nCORRECT: `<button type="button">Save Changes</button>`\nCORRECT: `<button aria-label="Close dialog"><svg aria-hidden="true" focusable="false">...</svg></button>`\nWRONG: `<button><svg>...</svg></button>` (no accessible name)\nWRONG: `<button>Click here</button>` (generic text)\n\n**3. Popup/Menu Triggers** (WCAG 4.1.2, 1.3.1)\nIndicate popup purpose and state using aria-haspopup, aria-expanded, aria-controls.\nCORRECT: `<button aria-expanded="false" aria-haspopup="menu" aria-controls="menu-id">Settings</button>`\n\n**4. Image Accessibility** (WCAG 1.1.1)\nInformative: `<img src="chart.png" alt="Sales increased 25% in Q4 2024">`\nFunctional: `<a href="/home"><img src="logo.png" alt="Company Name Home"></a>`\nDecorative: `<img src="border.png" alt="" role="presentation">`\nComplex: `<img src="chart.png" alt="Sales data" aria-describedby="desc-id">`\nWRONG: Missing alt, filename as alt, generic alt for decorative images\n\n**5. Link Accessibility** (WCAG 2.4.4, 2.4.6)\nLinks must be descriptive and understandable out of context.\nCORRECT: `<a href="/products">View All Products</a>`\nCORRECT: `<a href="/article" aria-label="Read more about New Product Launch">Read more</a>`\nWRONG: "Click here", "Read more", "Learn more" without context\n\n**6. Form Validation** (WCAG 3.3.1, 3.3.2, 3.3.3)\nErrors must be identified, associated with inputs, and provide suggestions. Use aria-describedby, aria-invalid="true", and role="alert".\n\n**7. Heading Structure** (WCAG 1.3.1, 2.4.6)\nEach page should have an `<h1>` that describes its content. Use hierarchical, descriptive headings with no skipped levels (h1\u2192h2\u2192h3).\nCORRECT: `<h1>Dashboard</h1> <h2>Sales</h2> <h3>By Region</h3>`\nWRONG: No `<h1>` on the page, or skipping levels (h1\u2192h3)\nIf a heading should look smaller than its semantic level, use CSS: `<h2 class="text-sm">Subtitle</h2>`\n\n**8. Page Component Landmark Rules** (WCAG 1.3.1, 4.1.2)\nPage components (route components) may be rendered inside a layout that already provides `<main>`, `<header>`, or `<footer>`. Since the layout configuration is unknown, avoid using these landmarks in page components to prevent potential duplication and nesting violations. Use `<div>`, `<section>`, or `<article>` as the top-level wrapper instead.\n\n**Quick Checklist:**\n- **Forms:** Associated labels, aria-required on required fields, autocomplete attributes, aria-describedby for errors, aria-invalid for invalid fields, fieldsets with legends\n- **Buttons/Links:** Accessible names, aria-label for icon buttons, aria-hidden on decorative icons, descriptive link text\n- **Popups/Dialogs:** aria-haspopup, aria-expanded, aria-controls, role="dialog", aria-modal="true", aria-labelledby, focus trap, Escape to close\n- **Images:** alt on all images, descriptive alt for informative, empty alt for decorative, aria-describedby for complex\n- **Structure:** One h1, logical heading hierarchy, avoid `<main>`, `<header>`, or `<footer>` in page/route components (the layout may already provide them), use `<section>` or `<div>` as page-level wrappers, semantic HTML\n- **Dynamic Content:** role="status"/aria-live="polite" for updates, role="alert"/aria-live="assertive" for critical alerts\n- **Keyboard/Focus:** All interactive elements keyboard accessible, logical focus order, visible focus indicators, no keyboard traps (except modals)\n- **Color/Contrast:** 4.5:1 text contrast (3:1 large text), 3:1 UI component contrast, no color-only information, 3:1 focus indicator contrast'}var m="Kendo UI for Angular",N="angular",w="kendo",P=["AIPrompt","ActionSheet","AppBar","ArcGauge","AutoComplete","Avatar","Badge","Barcode","BottomNavigation","BreadCrumb","Button","ButtonGroup","Calendar","Card","ChartWizard","Charts","CheckBox","Chip","ChipList","ChunkProgressBar","CircularGauge","CircularProgressBar","ColorGradient","ColorPalette","ColorPicker","ComboBox","ContextMenu","ConversationalUI","DataQuery","DateInput","DateMath","DatePicker","DateRange","DateTimePicker","Diagram","Dialog","DragandDrop","Drawer","Drawing","DropDownButton","DropDownList","DropDownTree","Editor","ExcelExport","ExpansionPanel","FileSaver","FileSelect","Filter","FlatColorPicker","FloatingActionButton","FloatingLabel","Forms","FormField","Gantt","Gauges","General","Grid","GridLayout","Icon","InlineAIPrompt","Label","LinearGauge","ListBox","ListView","Loader","Map","MaskedTextBox","Menu","MultiColumnComboBox","MultiSelect","MultiSelectTree","MultiViewCalendar","Notification","NumericTextBox","OTPInput","Pager","PanelBar","PDFExport","PDFViewer","PivotGrid","Popover","Popup","ProgressBar","PromptBox","QRCode","RadialGauge","RadioButton","RangeSlider","Rating","Ripple","Sankey","Scheduler","ScrollView","Signature","Skeleton","Slider","SmartPasteButton","Sortable","StockChart","Sparkline","SpeechToTextButton","SplitButton","Splitter","Spreadsheet","StackLayout","Stepper","SVGIcon","Switch","TabStrip","TextArea","TextBox","TileLayout","Timeline","TimePicker","ToolBar","Tooltip","TreeList","TreeView","Typography","Upload","Window"],ce=new Map([["actionsheet","@progress/kendo-angular-navigation"],["aiprompt","@progress/kendo-angular-conversational-ui"],["appbar","@progress/kendo-angular-navigation"],["arcgauge","@progress/kendo-angular-gauges"],["autocomplete","@progress/kendo-angular-dropdowns"],["avatar","@progress/kendo-angular-layout"],["badge","@progress/kendo-angular-indicators"],["barcode","@progress/kendo-angular-barcodes"],["bottomnavigation","@progress/kendo-angular-navigation"],["breadcrumb","@progress/kendo-angular-navigation"],["button","@progress/kendo-angular-buttons"],["buttongroup","@progress/kendo-angular-buttons"],["calendar","@progress/kendo-angular-dateinputs"],["card","@progress/kendo-angular-layout"],["chartwizard","@progress/kendo-angular-chart-wizard"],["checkbox","@progress/kendo-angular-inputs"],["chip","@progress/kendo-angular-buttons"],["chiplist","@progress/kendo-angular-buttons"],["chunkprogressbar","@progress/kendo-angular-progressbar"],["circulargauge","@progress/kendo-angular-gauges"],["circularprogressbar","@progress/kendo-angular-progressbar"],["colorgradient","@progress/kendo-angular-inputs"],["colorpalette","@progress/kendo-angular-inputs"],["colorpicker","@progress/kendo-angular-inputs"],["combobox","@progress/kendo-angular-dropdowns"],["contextmenu","@progress/kendo-angular-menu"],["dataquery","@progress/kendo-data-query"],["dateinput","@progress/kendo-angular-dateinputs"],["datemath","@progress/kendo-date-math"],["datepicker","@progress/kendo-angular-dateinputs"],["daterangepicker","@progress/kendo-angular-dateinputs"],["datetimepicker","@progress/kendo-angular-dateinputs"],["diagram","@progress/kendo-angular-diagrams"],["dialog","@progress/kendo-angular-dialog"],["drawer","@progress/kendo-angular-layout"],["drawing","@progress/kendo-drawing"],["dropdownbutton","@progress/kendo-angular-buttons"],["dropdownlist","@progress/kendo-angular-dropdowns"],["dropdowntree","@progress/kendo-angular-dropdowns"],["editor","@progress/kendo-angular-editor"],["excelexport","@progress/kendo-angular-excel-export"],["expansionpanel","@progress/kendo-angular-layout"],["filesaver","@progress/kendo-file-saver"],["fileselect","@progress/kendo-angular-upload"],["filter","@progress/kendo-angular-filter"],["flatcolorpicker","@progress/kendo-angular-inputs"],["floatingactionbutton","@progress/kendo-angular-buttons"],["floatinglabel","@progress/kendo-angular-label"],["formfield","@progress/kendo-angular-inputs"],["forms","@progress/kendo-angular-inputs"],["gantt","@progress/kendo-angular-gantt"],["grid","@progress/kendo-angular-grid"],["gridlayout","@progress/kendo-angular-layout"],["icon","@progress/kendo-angular-icons"],["inlineaiprompt","@progress/kendo-angular-conversational-ui"],["label","@progress/kendo-angular-label"],["lineargauge","@progress/kendo-angular-gauges"],["listbox","@progress/kendo-angular-listbox"],["listview","@progress/kendo-angular-listview"],["loader","@progress/kendo-angular-indicators"],["map","@progress/kendo-angular-map"],["maskedtextbox","@progress/kendo-angular-inputs"],["menu","@progress/kendo-angular-menu"],["multicolumncombobox","@progress/kendo-angular-dropdowns"],["multiselect","@progress/kendo-angular-dropdowns"],["multiselecttree","@progress/kendo-angular-dropdowns"],["multiviewcalendar","@progress/kendo-angular-dateinputs"],["notification","@progress/kendo-angular-notification"],["numerictextbox","@progress/kendo-angular-inputs"],["otpinput","@progress/kendo-angular-inputs"],["pager","@progress/kendo-angular-pager"],["panelbar","@progress/kendo-angular-layout"],["pdfexport","@progress/kendo-angular-pdf-export"],["pdfviewer","@progress/kendo-angular-pdfviewer"],["pivotgrid","@progress/kendo-angular-pivotgrid"],["popover","@progress/kendo-angular-tooltip"],["popup","@progress/kendo-angular-popup"],["progressbar","@progress/kendo-angular-progressbar"],["promptbox","@progress/kendo-angular-conversational-ui"],["qrcode","@progress/kendo-angular-barcodes"],["radialgauge","@progress/kendo-angular-gauges"],["radiobutton","@progress/kendo-angular-inputs"],["rangeslider","@progress/kendo-angular-inputs"],["rating","@progress/kendo-angular-inputs"],["ripple","@progress/kendo-angular-ripple"],["sankey","@progress/kendo-angular-charts"],["scheduler","@progress/kendo-angular-scheduler"],["scrollview","@progress/kendo-angular-scrollview"],["signature","@progress/kendo-angular-inputs"],["skeleton","@progress/kendo-angular-indicators"],["slider","@progress/kendo-angular-inputs"],["smartpastebutton","@progress/kendo-angular-buttons"],["sortable","@progress/kendo-angular-sortable"],["sparkline","@progress/kendo-angular-charts"],["speechtotextbutton","@progress/kendo-angular-buttons"],["splitbutton","@progress/kendo-angular-buttons"],["splitter","@progress/kendo-angular-layout"],["spreadsheet","@progress/kendo-angular-spreadsheet"],["stacklayout","@progress/kendo-angular-layout"],["stepper","@progress/kendo-angular-layout"],["stockchart","@progress/kendo-angular-charts"],["svgicon","@progress/kendo-angular-icons"],["switch","@progress/kendo-angular-inputs"],["tabstrip","@progress/kendo-angular-layout"],["textarea","@progress/kendo-angular-inputs"],["textbox","@progress/kendo-angular-inputs"],["tilelayout","@progress/kendo-angular-layout"],["timeline","@progress/kendo-angular-layout"],["timepicker","@progress/kendo-angular-dateinputs"],["toolbar","@progress/kendo-angular-toolbar"],["treelist","@progress/kendo-angular-treelist"],["treeview","@progress/kendo-angular-treeview"],["typography","@progress/kendo-angular-typography"],["upload","@progress/kendo-angular-upload"],["window","@progress/kendo-angular-dialog"],["charts","@progress/kendo-angular-charts"],["conversationalui","@progress/kendo-angular-conversational-ui"],["tooltip","@progress/kendo-angular-tooltip"]]);var nt=tt(et(ot(import.meta.url)),"../proto/service.proto"),M=new _("contextapi.telerik.com:443",nt,{libName:N});var pe=async()=>M.validateUserLicense();import mt from"fs";import Fe from"path";import{fileURLToPath as gt}from"url";import{z as f}from"zod";var v=class{constructor(t,o,n){this.name=t;this.config=o;this.cb=n}register(t){this.server=t,this.server.registerTool(this.name,this.config,this.cb)}hasAccess(t){return!this.config.requiredAccess||this.config.requiredAccess.length===0?!0:t==="full"||this.config.requiredAccess.includes(t)}};var O=(e,t)=>`# ${e.suiteName} - Code Validation & Quality Assurance
|
|
6
6
|
|
|
7
7
|
## Comprehensive Code Validation Checklist
|
|
8
8
|
Execute these validation steps systematically to ensure high-quality, maintainable code:
|
|
@@ -46,7 +46,7 @@ Responsive Design:
|
|
|
46
46
|
- Graceful error handling for all user interactions
|
|
47
47
|
- Meaningful error messages for users
|
|
48
48
|
- Network error handling for API calls
|
|
49
|
-
`;var
|
|
49
|
+
`;var L=(e,t)=>{let o=O({suiteName:e.suiteName,libKey:e.libKey},t.validationSteps),n=e.libKey==="angular"?"- **Drag and Drop**: Consider using the DragandDrop and Sortable components when drag-and-drop functionality is needed.":"",s=e.components?e.components.join(", "):"components";return`# \u{1F3AF} ${e.suiteName} - Execution Plan
|
|
50
50
|
|
|
51
51
|
**Current Goal:**
|
|
52
52
|
|
|
@@ -161,7 +161,7 @@ Based on your current goal, analyze what other ${e.suiteName} components are nee
|
|
|
161
161
|
${n}
|
|
162
162
|
|
|
163
163
|
**IMPORTANT COMPONENT USAGE REQUIREMENTS:**
|
|
164
|
-
- Make sure to identify all necessary features related to the ${
|
|
164
|
+
- Make sure to identify all necessary features related to the ${s} based on the current goal.
|
|
165
165
|
- Make sure to identify specific features needed for other ${e.suiteName} components based on the current goal.
|
|
166
166
|
- Make sure to generate a query for ${e.codeAssistantName} tool for each component and call the tool for each specific feature or functionality.
|
|
167
167
|
- Always specify the exact features you want for each component. Describe only the needed functionality, and behavior you need. Be concise and don't include any information about the use case.
|
|
@@ -384,7 +384,7 @@ After gathering information:
|
|
|
384
384
|
**Important Notes:**
|
|
385
385
|
- These tools provide documentation and guidance, not code generation
|
|
386
386
|
- Always refer to official ${e.suiteName} documentation for the most up-to-date information
|
|
387
|
-
- Tool responses include usage examples and best practices`;var
|
|
387
|
+
- Tool responses include usage examples and best practices`;var E=(e,t)=>({SETUP_VALIDATION:`
|
|
388
388
|
UI Library Setup:
|
|
389
389
|
- ${e} modules properly imported and configured
|
|
390
390
|
- ${e} theme properly loaded and applied
|
|
@@ -403,31 +403,46 @@ After gathering information:
|
|
|
403
403
|
- Consistent ${e} theme application across all components
|
|
404
404
|
- Custom theme variables properly defined and scoped
|
|
405
405
|
- ${e} icon fonts properly loaded and optimized
|
|
406
|
-
- Brand colors integrated with ${e} component themes`});function
|
|
407
|
-
|
|
406
|
+
- Brand colors integrated with ${e} component themes`});function st(e,t){let o;try{o=JSON.parse(e)}catch{return e}let n=o?.Item;if(!n)return e;let s=[],r=n.FullName??n.Name??"",l=n.Type??"",p=n.Summary??"",u=n.SyntaxContent??"";s.push(`## API Reference Item
|
|
407
|
+
- Name: ${r}
|
|
408
|
+
- Type: ${l}
|
|
409
|
+
- Summary: ${p}
|
|
410
|
+
- Syntax: ${u}`);let g=o.RelatedItemsByType?.return_type;if(g?.length){let a=g[0].Text;a&&s.push(`- Return Type: ${a}`)}let b=n.Examples??[];if(b.length>0){let a=`## Examples
|
|
411
|
+
`,d=0;for(let S of b){let C=(S.Component??"").toLowerCase(),T=t.toLowerCase();if(C&&C!==T&&C!=="general")continue;d+=1;let k=S.Code??"";a+=`### Example ${d}
|
|
412
|
+
\`\`\`
|
|
413
|
+
${k}
|
|
414
|
+
\`\`\`
|
|
415
|
+
`}d>0&&s.push(a)}let i=o.RelatedItemsByType??{},h=[];for(let[a,d]of Object.entries(i))if(!(a==="return_type"||a==="render_fragment"))for(let S of d??[]){let C=S.FullName??"",T=S.ShortText??"";h.push(`### ${C} (${a})
|
|
416
|
+
${T}`)}return h.length>0&&s.push(`## Additional Context
|
|
417
|
+
`+h.join(`
|
|
418
|
+
---
|
|
419
|
+
`)),s.join(`
|
|
420
|
+
|
|
421
|
+
`)}function de(e,t,o){let{name:n,title:s,description:r,layoutAssistantName:l,codeAssistantName:p,styleAssistantName:u,iconAssistantName:g,accessibilityAssistantName:b,suiteName:i,libKey:h,components:a}=e,d=new v(n,{title:s,description:r,requiredAccess:e.requiredAccess,inputSchema:{userIntent:f.string().describe(`Detailed description and intent of what the user wants to build. Include the type of page/component, main functionality, visual requirements, and any specific ${i} components you want to use.`),needsComponentsDocsConfidence:f.number().min(0).max(1).default(1).describe("Confidence (0-1) to include Component Documentation assistance. Default is 1."),needsLayoutConfidence:f.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Layout assistance. Default is 0."),needsStylingConfidence:f.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Theming/Styling assistance. Default is 0."),needsResponsiveBehaviorConfidence:f.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Responsive Behavior assistance. Default is 0."),needsIconsConfidence:f.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Icons assistance. Default is 0."),componentsNeeded:f.array(f.enum(a)).optional().describe(`Optional list of specific ${i} components needed for the project.`)}},async({userIntent:S,needsComponentsDocsConfidence:C,needsLayoutConfidence:T,needsStylingConfidence:k,needsResponsiveBehaviorConfidence:Q,needsIconsConfidence:J,componentsNeeded:X},{_meta:Ke})=>{y("UI Orchestrator called with:",{userIntent:S,needsComponentsDocsConfidence:C,needsLayoutConfidence:T,needsStylingConfidence:k,needsResponsiveBehaviorConfidence:Q,needsIconsConfidence:J});try{await o.recordOrchestratorUserRequest({meta:{userIntent:S,componentsNeeded:X,_meta:Ke}})}catch(U){throw x(U)}let Ve=d.server?.server.getClientCapabilities?.()?.elicitation,Z;if(Ve&&k>.3&&k<=.6){let U=await d.server?.server.elicitInput({message:"I was unable to determine if you need custom Kendo Theme assistant. Can you please confirm?",requestedSchema:{type:"object",properties:{includeCustomTheming:{type:"boolean",description:"Whether to include Custom Theming assistance in the workflow."}},required:["includeCustomTheming"]}});U?.action==="accept"&&U.content?.includeCustomTheming&&(Z=!0)}return{content:[{type:"text",text:L({name:n,userIntent:S,includeComponentsDocs:C>.3,includeTheming:k>.6||!!Z,includeLayout:T>.5,includeIcons:J>.6,includeResponsive:T>.5&&Q>.4,layoutAssistantName:l,codeAssistantName:p,styleAssistantName:u,iconAssistantName:g,accessibilityAssistantName:b,suiteName:i,libKey:h,components:X},t)}]}});return d}function ue(e,t){let{name:o,title:n,description:s,iconAssistantName:r,codeAssistantName:l,suiteName:p,libKey:u,components:g}=e;return new v(o,{title:n,description:s,inputSchema:{userIntent:f.string().describe(`Describe what you want to build or what components you're looking for. Include the type of functionality, features, or UI elements you need from ${p}.`),needsIconsConfidence:f.number().min(0).max(1).default(.7).describe("Confidence (0-1) to include Icons assistance. Default is 0.7."),componentsNeeded:f.array(f.enum(g)).optional().describe(`Optional list of specific ${p} components you want to learn about.`)},requiredAccess:e.requiredAccess},async({userIntent:i,needsIconsConfidence:h,componentsNeeded:a},{_meta:d})=>{y("Assistant Orchestrator called with:",{userIntent:i,needsIconsConfidence:h,componentsNeeded:a});try{await t.recordOrchestratorUserRequest({meta:{userIntent:i,componentsNeeded:a,_meta:d}})}catch(C){throw x(C)}return{content:[{type:"text",text:F({name:o,userIntent:i,includeComponentsDocs:!0,includeIcons:h>.5,codeAssistantName:l,iconAssistantName:r,suiteName:p,libKey:u,components:a})}]}})}function me(e,t){let{name:o,title:n,description:s,suiteName:r,libKey:l,getPreContent:p}=e;return new v(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{prompt:f.string().describe("An enhanced prompt describing the HTML layout structure, design requirements or specific visual effects you want to achieve."),includeBuildingBlockExamples:f.boolean().describe("Whether to include building block examples. Defaults to false.").default(!1)}},async({prompt:u,includeBuildingBlockExamples:g})=>{y("Layout Assistant called with:",{prompt:u,includeBuildingBlockExamples:g});try{let i=(await t.queryCssUtils({query:u})).values.join(`
|
|
422
|
+
`)||"No CSS utilities found for the given prompt.",h=p?.()??"",a=d=>`${h}
|
|
408
423
|
|
|
409
424
|
# Kendo Design System CSS Utilities
|
|
410
425
|
|
|
411
426
|
${i}
|
|
412
|
-
${
|
|
413
|
-
`;if(g)try{let
|
|
427
|
+
${d??""}
|
|
428
|
+
`;if(g)try{let d=await t.queryBuildingBlocks({query:u,lib_name:l}),S="";d.items?.length>0&&(S=`
|
|
414
429
|
## Building Blocks Examples
|
|
415
430
|
|
|
416
431
|
The examples here are for demonstration purpose how CSS utils can be implemented in various building blocks.
|
|
417
432
|
However, consider your own design requirements and specifics in order to implement your templates/building blocks correctly.
|
|
418
433
|
|
|
419
|
-
${
|
|
420
|
-
### ${
|
|
434
|
+
${d.items.map(C=>`
|
|
435
|
+
### ${C.name}
|
|
421
436
|
|
|
422
|
-
${
|
|
437
|
+
${C.description}
|
|
423
438
|
|
|
424
439
|
\`\`\`code
|
|
425
|
-
${
|
|
440
|
+
${C.code}
|
|
426
441
|
\`\`\`
|
|
427
442
|
`).join(`
|
|
428
|
-
`)}`),i=a(
|
|
443
|
+
`)}`),i=a(S)}catch(d){y("Error calling building-blocks service:",d),i=a()}else i=a();return{content:[{type:"text",text:i}]}}catch(b){throw x(b)}})}function ge(e,t){let{name:o,title:n,description:s,libKey:r,getPreContent:l}=e;return new v(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{prompt:f.string().describe("A natural language description of the desired visual style or theme. For example: 'Create a modern dark theme with high contrast'.")}},async({prompt:p})=>{y("Style Assistant called with:",{prompt:p});let u="";try{let i=await t.queryThemeGenerate({prompt:p});if(i.variables_json){let h=JSON.parse(i.variables_json),a=[];if(h)for(let d of Object.keys(h))typeof h[d]=="string"&&a.push(`${d}: ${h[d]}`);u=a.join(`
|
|
429
444
|
|
|
430
|
-
`)}}catch(i){throw
|
|
445
|
+
`)}}catch(i){throw x(i)}let g=l?.()??"";return{content:[{type:"text",text:u?`Use the following CSS variables to style the web application, including colors, typography, spacing, and component appearance.
|
|
431
446
|
Ensure the variables are applied consistently across all relevant elements.
|
|
432
447
|
Do NOT set any inline styles. CSS variables should be defined in global or component-level CSS files, or via supported theming mechanisms.
|
|
433
448
|
|
|
@@ -438,25 +453,25 @@ ${g}
|
|
|
438
453
|
\`\`\`css
|
|
439
454
|
${u}
|
|
440
455
|
\`\`\`
|
|
441
|
-
`:"No CSS variables were generated for the given prompt."}]}})}function he(e,t){let{name:o,title:n,description:
|
|
456
|
+
`:"No CSS variables were generated for the given prompt."}]}})}function he(e,t){let{name:o,title:n,description:s,libKey:r,getPostContent:l}=e;return new v(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{query:f.string().describe("A search query for finding icons. Be specific about the icon purpose, style, or action."),limit:f.number().min(.1).max(1).default(.1).describe("The proportion of matching icons to return (0.1 = 1 icon, 0.5 = 5 icons, 1.0 = many icons). Default is 0.1.")}},async({query:p,limit:u})=>{y("Icon Search called with:",{query:p,limit:u});try{let g=await t.queryIconsSearch({query:p,limit:u*100}),b=l?.()??"";return{content:[{type:"text",text:`${g.values.join(`
|
|
442
457
|
|
|
443
458
|
`)}
|
|
444
459
|
|
|
445
|
-
${b}`}]}}catch(g){throw
|
|
460
|
+
${b}`}]}}catch(g){throw x(g)}})}function fe(e,t){let{name:o,title:n,description:s,libKey:r,suiteName:l,components:p,componentAliases:u,getPostContent:g}=e;return new v(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{query:f.string().describe("The query to search for."),component:f.enum(p).describe("The component to search for. If not specified, use General.")}},async({query:b,component:i})=>{y("Code Assistant called with:",{query:b,component:i});let h=i;if(u){let a=u[i];a&&(h=a)}try{let d=(await t.query({query:b,component:h?.toLowerCase()??"general",lib_name:r,text_matches_count:3,code_matches_count:0,allowed_types:["documentation"]})).values.map(T=>T.replace(/\0/g,"")),S=g?.({component:i})??"";return{content:[{type:"text",text:`${d.join(`
|
|
446
461
|
|
|
447
462
|
`)}
|
|
448
463
|
|
|
449
|
-
${
|
|
464
|
+
${S}`}]}}catch(a){throw x(a)}})}function ye(e,t){let{name:o,title:n,description:s,libKey:r,suiteName:l,components:p,componentAliases:u}=e;return new v(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{query:f.string().describe("The query to search for."),component:f.enum(p).describe("The component to search for. If not specified, use General."),includeGeneralGuidelines:f.boolean().default(!1).describe("Set to true only on the first call to include comprehensive WCAG 2.2 Level AA general guidelines. After the first call, set to false to get only component-specific accessibility information. Default is false.")}},async({query:g,component:b,includeGeneralGuidelines:i})=>{y("Accessibility Assistant called with:",{query:g,component:b,includeGeneralGuidelines:i});let h=b;if(u){let a=u[b];a&&(h=a)}try{let a="";if(i){let k=le();a+=`# WCAG 2.2 Level AA General Accessibility Guidelines
|
|
450
465
|
|
|
451
|
-
`,a+=
|
|
466
|
+
`,a+=k,a+=`
|
|
452
467
|
|
|
453
468
|
---
|
|
454
469
|
|
|
455
|
-
`}let
|
|
470
|
+
`}let T=(await t.getApiRefMatches({query:g,component:h?.toLowerCase()??"general",lib_name:r,filters_json:'{"type":{"$in":["accessibility"]}}'})).values.map(k=>k.replace(/\0/g,"")).map(k=>st(k,h?.toLowerCase()??"general")).join(`
|
|
456
471
|
|
|
457
|
-
`);return
|
|
472
|
+
`);return T?(i&&(a+=`# Component-Specific Accessibility Information
|
|
458
473
|
|
|
459
|
-
`),a+=
|
|
474
|
+
`),a+=T):i||(a="No component-specific accessibility guidelines found."),{content:[{type:"text",text:a}]}}catch(a){throw x(a)}})}function x(e){let t=e;return t.code===16?new Error("Error: You are not authenticated. Please verify the Telerik License Key provided is valid."):t.code===8?new Error(`Error: You have exceeded the extension quota. Upgrade to subscription licensing to unlock full access. Message: ${t.message}.`):t.code===7?new Error("Error: You do not have permission to access this resource. Please verify that you have a valid license."):new Error(`Error: An error occurred while calling the service. Please try again later.
|
|
460
475
|
|
|
461
476
|
Error Code: ${t.code} Error Message: ${t.message}`)}var Ae=e=>`${e}_ui_generator`,be=e=>`${e}_assistant`,Se=e=>`${e}_layout_assistant`,Ce=e=>`${e}_component_assistant`,Te=e=>`${e}_style_assistant`,ke=e=>`${e}_icon_assistant`,ve=e=>`${e}_accessibility_assistant`;var Ne=e=>`This is the single entry point for all UI-related tasks. It orchestrates the full workflow of building or refining UIs with ${e} components, generating a step-by-step execution plan that specifies which tools to call, in what order, and with what parameters. It includes validation steps to ensure the best possible, standards-compliant code every time.
|
|
462
477
|
|
|
@@ -489,7 +504,7 @@ Use this tool when the user wants to:
|
|
|
489
504
|
The tool outputs a set of CSS variable definitions ready to be applied to style files.`,xe=`Searches for icons in the Telerik Icons library.
|
|
490
505
|
Use this tool when the user needs to find specific icons for UI components or design elements.
|
|
491
506
|
It supports searching by icon name, category, or keyword and returns matching icons from the Telerik Icons library.
|
|
492
|
-
`,
|
|
507
|
+
`,Re=e=>`Provides answers and retrieves official documentation for ${e}.
|
|
493
508
|
|
|
494
509
|
Use this tool when the user asks about:
|
|
495
510
|
- ${e} features or capabilities
|
|
@@ -499,7 +514,7 @@ Use this tool when the user asks about:
|
|
|
499
514
|
|
|
500
515
|
Set the user's full question as the 'query' parameter.
|
|
501
516
|
If the question refers to a specific ${e} component, include its name in the 'component' parameter.
|
|
502
|
-
`,
|
|
517
|
+
`,Pe=e=>`Retrieves accessibility guidance for ${e} components with optional general WCAG 2.2 Level AA guidelines.
|
|
503
518
|
|
|
504
519
|
Use this tool when:
|
|
505
520
|
- You need component-specific accessibility information and API references
|
|
@@ -517,7 +532,7 @@ Set 'includeGeneralGuidelines=true' ONLY on the first call to include general WC
|
|
|
517
532
|
Returns:
|
|
518
533
|
- When includeGeneralGuidelines=true: General WCAG 2.2 Level AA guidelines + component-specific recommendations
|
|
519
534
|
- When includeGeneralGuidelines=false: Only component-specific accessibility recommendations
|
|
520
|
-
`;var K=
|
|
535
|
+
`;var K=E("Kendo UI","Kendo"),V=`
|
|
521
536
|
### Angular Component Validation
|
|
522
537
|
Component Structure:
|
|
523
538
|
- Use proper @Component decorator configuration
|
|
@@ -571,7 +586,7 @@ Accessibility
|
|
|
571
586
|
2. Match the discovered patterns in all generated code
|
|
572
587
|
3. Maintain consistent formatting, indentation, and code organization with existing files
|
|
573
588
|
4. Always use the same theme import mechanism (unless user specifies otherwise)
|
|
574
|
-
`;var W=
|
|
589
|
+
`;var W=E("Kendo UI","KendoReact"),Y=`
|
|
575
590
|
### React Component Validation
|
|
576
591
|
Component Structure:
|
|
577
592
|
- Use proper function component patterns with Hooks
|
|
@@ -594,7 +609,7 @@ ${W.THEME_AND_STYLING}
|
|
|
594
609
|
- Make sure theme import mechanism is consistent with existing project setup
|
|
595
610
|
|
|
596
611
|
Accessibility
|
|
597
|
-
- Accessibility guidelines retrieved and applied to all components`;var
|
|
612
|
+
- Accessibility guidelines retrieved and applied to all components`;var rt={createOrchestrator:de,createAssistantOrchestrator:ue,createLayoutAssistant:me,createStyleAssistant:ge,createIconSearch:he,createCodeAssistant:fe,createAccessibilityAssistant:ye},at={orchestrator:Ae,assistantOrchestrator:be,layoutAssistant:Se,codeAssistant:Ce,styleAssistant:Te,iconAssistant:ke,accessibilityAssistant:ve},it={orchestrator:Ne,assistantOrchestrator:Ie,layoutAssistant:we,styleAssistant:Ee,iconAssistant:xe,codeAssistant:Re,accessibilityAssistant:Pe},lt={Orchestrator:{render:L},Validator:{render:O},SharedValidation:{getSteps:E}},ct={Angular:{steps:V,additionalPlan:j},React:{steps:Y}},c={Tools:rt,ToolNames:at,ToolDescriptions:it,Templates:lt,Validation:ct};var pt=c.ToolNames.codeAssistant("kendo"),Oe=()=>`# Kendo Design System Guidelines for ${m}
|
|
598
613
|
|
|
599
614
|
## Setting up Styles/CSS
|
|
600
615
|
|
|
@@ -621,14 +636,14 @@ Alternatively, you can also consume them directly from the Unpkg CDN.
|
|
|
621
636
|
|
|
622
637
|
## Ready-to-use Layout Components
|
|
623
638
|
|
|
624
|
-
In the ${
|
|
639
|
+
In the ${m} there are available components to create layout. Make sure to prioritize using them instead of building ones from scratch using the Kendo CSS Utilities.
|
|
625
640
|
|
|
626
|
-
For any Layout component you can also call the ${
|
|
641
|
+
For any Layout component you can also call the ${pt} tool in order to get specific API reference and docs.
|
|
627
642
|
|
|
628
|
-
- ${
|
|
643
|
+
- ${m} Card component.
|
|
629
644
|
- Generally, it is recommended to use 100% width (e.g., \`<kendo-card width="100%">\`)
|
|
630
645
|
- If needed, use specific width based on the layout requirements (e.g., \`<kendo-card width="150px">\`)
|
|
631
|
-
`;var Le=()=>`## Applying CSS Variables in ${
|
|
646
|
+
`;var Le=()=>`## Applying CSS Variables in ${m}
|
|
632
647
|
|
|
633
648
|
Apply these CSS variables in the Angular application using one of these methods:
|
|
634
649
|
|
|
@@ -690,7 +705,7 @@ export class ThemeService {
|
|
|
690
705
|
}
|
|
691
706
|
}
|
|
692
707
|
\`\`\`
|
|
693
|
-
`;var Ue=
|
|
708
|
+
`;var Ue=c.ToolNames.codeAssistant("kendo"),De=()=>`## Using ${m} Icons
|
|
694
709
|
|
|
695
710
|
Important: Attempt to prioritize SVG icons over font icons.
|
|
696
711
|
|
|
@@ -698,13 +713,13 @@ Important: Attempt to prioritize SVG icons over font icons.
|
|
|
698
713
|
|
|
699
714
|
- Make sure @progress/kendo-svg-icons is installed.
|
|
700
715
|
- Make sure @progress/kendo-angular-icons is installed.
|
|
701
|
-
- You can call ${Ue} tool for ${
|
|
716
|
+
- You can call ${Ue} tool for ${m} SVGIcon component for docs and API reference.
|
|
702
717
|
- [optional] If SVG is not an option fallback to fonticon - make sure \`<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />\` is added as a reference.
|
|
703
|
-
- [optional] If using font icons you can call ${Ue} tool for ${
|
|
718
|
+
- [optional] If using font icons you can call ${Ue} tool for ${m} Icon component for docs and API reference.
|
|
704
719
|
|
|
705
720
|
### Examples
|
|
706
721
|
|
|
707
|
-
Using ${
|
|
722
|
+
Using ${m} SVGIcon component:
|
|
708
723
|
|
|
709
724
|
\`\`\`ts
|
|
710
725
|
import { Component } from "@angular/core";
|
|
@@ -725,7 +740,7 @@ export class AppComponent {
|
|
|
725
740
|
|
|
726
741
|
\`\`\`
|
|
727
742
|
|
|
728
|
-
Using ${
|
|
743
|
+
Using ${m} Icon component:
|
|
729
744
|
|
|
730
745
|
\`\`\`ts
|
|
731
746
|
import { Component } from "@angular/core";
|
|
@@ -741,7 +756,7 @@ import { KENDO_ICONS } from "@progress/kendo-angular-icons";
|
|
|
741
756
|
})
|
|
742
757
|
export class AppComponent {}
|
|
743
758
|
\`\`\`
|
|
744
|
-
`;var
|
|
759
|
+
`;var $e=e=>{let t=e.component?.trim().toLowerCase(),o=ce.get(t),n=`## ${m} Common Guidelines
|
|
745
760
|
|
|
746
761
|
`;return o&&(n+=`### Package Installation
|
|
747
762
|
Always use minimal, targeted package installation.
|
|
@@ -757,4 +772,4 @@ For ${e.component} component: \`ng add ${o}\`
|
|
|
757
772
|
## Component-Specific Guidelines
|
|
758
773
|
|
|
759
774
|
${e.componentInstructions}
|
|
760
|
-
`),n};var
|
|
775
|
+
`),n};var _e=c.ToolNames.layoutAssistant(w),z=c.ToolNames.codeAssistant(w),Me=c.ToolNames.styleAssistant(w),H=c.ToolNames.iconAssistant(w),Ge=c.ToolNames.accessibilityAssistant(w);function qe(e,t){return[c.Tools.createOrchestrator({name:c.ToolNames.orchestrator(w),title:"Kendo UI Generator",description:c.ToolDescriptions.orchestrator(m),layoutAssistantName:_e,codeAssistantName:z,styleAssistantName:Me,iconAssistantName:H,accessibilityAssistantName:Ge,suiteName:m,libKey:N,components:P,requiredAccess:["agent"]},{validationSteps:c.Validation.Angular.steps,injectedPlan:c.Validation.Angular.additionalPlan},e),c.Tools.createAssistantOrchestrator({name:"kendo_angular_assistant",title:"Kendo UI Assistant",description:c.ToolDescriptions.assistantOrchestrator(m),codeAssistantName:z,iconAssistantName:H,suiteName:m,libKey:N,components:P,requiredAccess:["assistant"]},e),c.Tools.createLayoutAssistant({name:_e,title:"Kendo UI Layout Assistant",description:c.ToolDescriptions.layoutAssistant,suiteName:m,libKey:N,getPreContent:Oe,requiredAccess:["agent"]},e),c.Tools.createStyleAssistant({name:Me,title:"Kendo UI Style Assistant",description:c.ToolDescriptions.styleAssistant,libKey:N,getPreContent:Le,requiredAccess:["agent"]},e),c.Tools.createIconSearch({name:H,title:"Kendo UI Icon Assistant",description:c.ToolDescriptions.iconAssistant,libKey:N,getPostContent:De,requiredAccess:["assistant","agent"]},e),c.Tools.createCodeAssistant({name:z,title:"Kendo UI Component Assistant",description:c.ToolDescriptions.codeAssistant(m),libKey:N,suiteName:m,components:P,getPostContent:({component:n})=>$e({component:n}),requiredAccess:["assistant","agent"]},e),c.Tools.createAccessibilityAssistant({name:Ge,title:"Kendo UI Accessibility Assistant",description:c.ToolDescriptions.accessibilityAssistant(m),libKey:N,suiteName:m,components:P,requiredAccess:["agent"]},e)].filter(n=>n.hasAccess(t))}var ht=gt(import.meta.url),ft=Fe.dirname(ht),yt=Fe.resolve(ft,"../package.json"),At=JSON.parse(mt.readFileSync(yt,"utf-8")),Be=new dt({name:"kendo-mcp",title:"Kendo MCP Server",version:At.version});async function bt(){let e=new ut;y("Starting server...");let t=await ie(async()=>{let n=(await pe())?.entitlement;return n?.Product?.Code||n?.product?.code});t!=="none"&&(M.toolNameHeader=t==="agent"||t==="full"?"agent":"assistant",qe(M,t).forEach(n=>n.register(Be))),await Be.connect(e)}bt();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-mcp",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"bin": "./dist/index.js",
|
|
6
6
|
"license": "See LICENSE.md",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@grpc/grpc-js": "^1.14.3",
|
|
27
27
|
"@grpc/proto-loader": "^0.8.0",
|
|
28
|
-
"@modelcontextprotocol/sdk": "^1.
|
|
28
|
+
"@modelcontextprotocol/sdk": "^1.27.1",
|
|
29
29
|
"@progress/kendo-licensing": "^1.10.1",
|
|
30
30
|
"tslib": "^2.3.0"
|
|
31
31
|
},
|
package/proto/service.proto
CHANGED
|
@@ -11,6 +11,7 @@ message ContextQueryRequest {
|
|
|
11
11
|
repeated string allowed_types = 5;
|
|
12
12
|
string component = 6;
|
|
13
13
|
string filters_json = 7;
|
|
14
|
+
bool structured_output = 8;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
message Item {
|
|
@@ -109,6 +110,8 @@ message ValidateUserLicenseResponse {
|
|
|
109
110
|
|
|
110
111
|
service ContextQueryService {
|
|
111
112
|
rpc Query(ContextQueryRequest) returns (StringArray);
|
|
113
|
+
rpc GetApiRefMatches(ContextQueryRequest) returns (StringArray);
|
|
114
|
+
rpc GetDocsMatches(ContextQueryRequest) returns (StringArray);
|
|
112
115
|
rpc IconsSearch(CssSearchRequst) returns (StringArray);
|
|
113
116
|
rpc CssUtilsSearch(CssSearchRequst) returns (StringArray);
|
|
114
117
|
rpc BuildingBlocksSearch(BuildingBlocksSearchRequest) returns (BuildingBlocksSearchResponse);
|