@progress/kendo-react-mcp 1.4.3 → 1.5.0

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.
Files changed (2) hide show
  1. package/dist/index.js +191 -69
  2. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,8 +1,62 @@
1
1
  #!/usr/bin/env node
2
- import{McpServer as tt}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport as ot}from"@modelcontextprotocol/sdk/server/stdio.js";import{dirname as je,join as He}from"path";import{fileURLToPath as ze}from"url";import{loadLicense as Me,decodeLicenseKey as _e,decodeLicenseEvidence as qe}from"@progress/kendo-licensing/utils";var _=class extends Error{constructor(t){super(t),this.name="LicenseError"}};function X(e){return e.replace(/^\uFEFF/,"")}async function Z(){let e=null,t=null;try{let o=Me();if(!o.success)throw new _(o.message);try{e=(await _e(o.value)).licenses.find(async s=>!!(await qe(s)).userId)}catch(n){console.log(n.message)}if(!e)return[X(o.value),null]}catch(o){return t=o.message||"Unknown error loading license.",[null,t]}return[X(e),null]}import E from"node:fs";import U from"node:path";var q=!1,v=process.env.DEBUG_LOG_FILE,ee=!!(v&&typeof v=="string");if(ee){let e=U.resolve(v),t=U.dirname(e);if(t!=="."&&t!==process.cwd()&&!E.existsSync(t))try{E.mkdirSync(t,{recursive:!0})}catch(o){console.error("Error creating log directory:",o)}if(!E.existsSync(e))try{E.writeFileSync(e,"")}catch(o){console.error("Error creating log file:",o)}}else q=!1;q=ee&&!!v&&E.existsSync(U.resolve(v));function m(...e){if(q&&v){let n=`${new Date().toISOString()}: ${e.join(" ")}
3
- `,s=U.resolve(v);E.appendFile(s,n,r=>{r&&console.error("Error writing to log file:",r)})}}import Be from"@grpc/proto-loader";import O from"@grpc/grpc-js";import ne from"path";import te from"fs";import{fileURLToPath as Ge}from"url";var Ke=Ge(import.meta.url),Fe=ne.dirname(Ke),se={version:"unknown"},oe=ne.resolve(Fe,"../package.json");te.existsSync(oe)&&(se=JSON.parse(te.readFileSync(oe,"utf-8")));var $=class{constructor(t,o,n){this.contextApiUrl=t;this.protoPath=o;this.options=n;this.toolNameHeader="assistant";let s=Be.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"),m("Using ContextApi URl:",this.contextApiUrl);let r=O.loadPackageDefinition(s);this.client=new r.ContextQueryService(this.contextApiUrl||"contextapi.telerik.com:443",this.isDev?O.credentials.createInsecure():O.credentials.createSsl())}async getMetadata(){let[t,o]=this.isDev?"fake_license":await Z(),n=process.env.CONTEXTAPI_API_KEY,s=n&&typeof n=="string",r=t&&typeof t=="string";if(!r&&!s&&o)throw new Error(`Failed to authenticate with API key or License key!
4
-
5
- License Error: ${o}`);let i=new O.Metadata;if(r)try{i.add("x-license-key",t)}catch(h){throw m("Error adding license key to metadata:",h),new Error(`Failed to use license key: ${h.message}`)}return s&&i.add("x-api-key",n),this.options?.libName&&i.add("x-library-name",this.options.libName),i.add("x-tool-name",this.toolNameHeader),i.add("x-request-metadata",JSON.stringify({source:"npm",version:se.version,os:process.platform,node_version:process.version})),i}async query(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.query(t,o,(r,i)=>{r?s(new Error(r)):n(i)})})}async queryCssUtils(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.cssUtilsSearch(t,o,(r,i)=>{r?(m("Error querying CSS Utils:",r),s(new Error(r))):n(i)})})}async queryIconsSearch(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.iconsSearch(t,o,(r,i)=>{r?(m("Error querying Icons Search:",r),s(new Error(r))):n(i)})})}async queryBuildingBlocks(t){let o=await this.getMetadata();return new Promise((n,s)=>{this.client.buildingBlocksSearch(t,o,(r,i)=>{r?(m("Error querying Building Blocks:",r),s(new Error(r))):n(i)})})}async validateUserLicense(){let t=await this.getMetadata();return new Promise((o,n)=>{this.client.validateUserLicense(null,t,(s,r)=>{s?(m("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,i)=>{r?(m("Error querying context API/GenerateTheme:",r),s(new Error(r))):n(i)})})}async recordOrchestratorUserRequest(){let t=await this.getMetadata();return new Promise((o,n)=>{this.client.recordOrchestratorUserRequest(null,t,(s,r)=>{s?(m("Error recording orchestrator user request:",s),n(new Error(s))):o(r)})})}};import{z as B}from"zod";var Et=B.object({user_id:B.string(),user_email:B.string().email()});import{z as p}from"zod";var Ve=p.object({Product:p.object({Id:p.number().int(),Code:p.string(),Name:p.string()}),License:p.nullable(p.object({Id:p.number().int(),Name:p.string(),Type:p.string(),Active:p.boolean()})),Availability:p.array(p.object({LicenseStart:p.nullable(p.string().datetime()),LicenseEnd:p.nullable(p.string().datetime())})),IsLicenseAvailable:p.optional(p.boolean())}),Pt=p.array(Ve);async function re(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"}var l="Kendo UI for React",I="react",k="kendo",L=["ActionSheet","AIPrompt","Animation","AppBar","ArcGauge","AutoComplete","Avatar","Badge","Barcode","BottomNavigation","Breadcrumb","Button","ButtonGroup","Calendar","Card","Chart","ChartWizard","Chat","Checkbox","Chip","ChipList","ChunkProgressBar","CircularGauge","ColorGradient","ColorPalette","ColorPicker","ComboBox","ContextMenu","ConversationalUI","DataGrid","Grid","DataQuery","DateMath","DateInput","DatePicker","DateRangePicker","DateTimePicker","Dialog","Drag&Drop","Drawer","Drawing","DropDownButton","DropDownList","DropDownTree","Editor","Error","ExcelExport","ExpansionPanel","ExternalDropZone","FileSaver","FileManager","Filter","FlatColorPicker","FloatingActionButton","FloatingLabel","FontIcon","Form","Gantt","Gauge","General","GridLayout","Hint","InlineAIPrompt","Input","Label","LinearGauge","ListBox","ListView","Loader","Map","MaskedTextBox","Menu","MultiColumnComboBox","MultiSelect","MultiSelectTree","MultiViewCalendar","Notification","NumericTextBox","OrgChart","PageTemplates/BuildingBlocks","Pager","PanelBar","PDFProcessing","PDFViewer","PivotGrid","Popover","Popup","ProgressBar","QRCode","RadialGauge","RadioButton","RadioGroup","RangeSlider","Rating","Ripple","Sankey","Scheduler","ScrollView","Signature","Skeleton","Slider","Sortable","Sparkline","SpeechToTextButton","SplitButton","Splitter","Spreadsheet","StackLayout","Stepper","StockChart","SVGIcon","Switch","TabStrip","TaskBoard","TextArea","TextBox","TileLayout","Timeline","TimePicker","Toolbar","Tooltip","TreeList","TreeView","Typography","Upload","VSCodeExtension","Window"];var Ye=He(je(ze(import.meta.url)),"../proto/service.proto"),M=new $("contextapi.telerik.com:443",Ye,{libName:I});var ie=async()=>M.validateUserLicense();import nt from"fs";import Oe from"path";import{fileURLToPath as st}from"url";import{z as u}from"zod";var T=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 P=(e,t)=>`# ${e.suiteName} - Code Validation & Quality Assurance
2
+ import{McpServer as lt}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport as dt}from"@modelcontextprotocol/sdk/server/stdio.js";import{dirname as Ze,join as et}from"path";import{fileURLToPath as tt}from"url";import{loadLicense as Ve,decodeLicenseKey as je,decodeLicenseEvidence as We}from"@progress/kendo-licensing/utils";var _=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=Ve();if(!o.success)throw new _(o.message);try{e=(await je(o.value)).licenses.find(async i=>!!(await We(i)).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 k from"node:fs";import U from"node:path";var q=!1,N=process.env.DEBUG_LOG_FILE,oe=!!(N&&typeof N=="string");if(oe){let e=U.resolve(N),t=U.dirname(e);if(t!=="."&&t!==process.cwd()&&!k.existsSync(t))try{k.mkdirSync(t,{recursive:!0})}catch(o){console.error("Error creating log directory:",o)}if(!k.existsSync(e))try{k.writeFileSync(e,"")}catch(o){console.error("Error creating log file:",o)}}else q=!1;q=oe&&!!N&&k.existsSync(U.resolve(N));function g(...e){if(q&&N){let n=`${new Date().toISOString()}: ${e.join(" ")}
3
+ `,i=U.resolve(N);k.appendFile(i,n,s=>{s&&console.error("Error writing to log file:",s)})}}import Ye from"@grpc/proto-loader";import G from"@grpc/grpc-js";import ie from"path";import ne from"fs";import{fileURLToPath as He}from"url";var ze=He(import.meta.url),Qe=ie.dirname(ze),ae={version:"unknown"},se=ie.resolve(Qe,"../package.json");ne.existsSync(se)&&(ae=JSON.parse(ne.readFileSync(se,"utf-8")));function Je(e){return e.replace(/\u2014/g,"--").replace(/\u2013/g,"-").replace(/[^\x20-\x7E]/g,"")}var M=class{constructor(t,o,n){this.contextApiUrl=t;this.protoPath=o;this.options=n;this.toolNameHeader="assistant";let i=Ye.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"),g("Using ContextApi URl:",this.contextApiUrl);let s=G.loadPackageDefinition(i);this.client=new s.ContextQueryService(this.contextApiUrl||"contextapi.telerik.com:443",this.isDev?G.credentials.createInsecure():G.credentials.createSsl())}async getMetadata({meta:t}={meta:{}}){let[o,n]=this.isDev?"fake_license":await te(),i=process.env.CONTEXTAPI_API_KEY,s=i&&typeof i=="string",c=o&&typeof o=="string";if(!c&&!s&&n)throw new Error(`Failed to authenticate with API key or License key!
4
+
5
+ License Error: ${n}`);let d=new G.Metadata;if(c)try{d.add("x-license-key",o)}catch(h){throw g("Error adding license key to metadata:",h),new Error(`Failed to use license key: ${h.message}`)}s&&d.add("x-api-key",i),this.options?.libName&&d.add("x-library-name",this.options.libName),d.add("x-tool-name",this.toolNameHeader);let u=JSON.stringify({...t,source:"npm",version:ae.version,os:process.platform,node_version:process.version});return d.add("x-request-metadata",Je(u)),d}async query(t){let o=await this.getMetadata();return new Promise((n,i)=>{this.client.query(t,o,(s,c)=>{s?i(new Error(s)):n(c)})})}async queryCssUtils(t){let o=await this.getMetadata();return new Promise((n,i)=>{this.client.cssUtilsSearch(t,o,(s,c)=>{s?(g("Error querying CSS Utils:",s),i(new Error(s))):n(c)})})}async queryIconsSearch(t){let o=await this.getMetadata();return new Promise((n,i)=>{this.client.iconsSearch(t,o,(s,c)=>{s?(g("Error querying Icons Search:",s),i(new Error(s))):n(c)})})}async queryBuildingBlocks(t){let o=await this.getMetadata();return new Promise((n,i)=>{this.client.buildingBlocksSearch(t,o,(s,c)=>{s?(g("Error querying Building Blocks:",s),i(new Error(s))):n(c)})})}async validateUserLicense(){let t=await this.getMetadata();return new Promise((o,n)=>{this.client.validateUserLicense(null,t,(i,s)=>{i?(g("Error validating user license:",i),n(new Error(i))):o(s)})})}async queryThemeGenerate(t){let o=await this.getMetadata();return new Promise((n,i)=>{this.client.generateTheme(t,o,(s,c)=>{s?(g("Error querying context API/GenerateTheme:",s),i(new Error(s))):n(c)})})}async recordOrchestratorUserRequest({meta:t}){let o=await this.getMetadata({meta:t});return new Promise((n,i)=>{this.client.recordOrchestratorUserRequest(null,o,(s,c)=>{s?(g("Error recording orchestrator user request:",s),i(new Error(s))):n(c)})})}};import{z as B}from"zod";var Ut=B.object({user_id:B.string(),user_email:B.string().email()});import{z as f}from"zod";var Xe=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())}),$t=f.array(Xe);async function re(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 ce(){return`**Accessibility Guidelines: WCAG 2.2 Level AA Compliance**
6
+
7
+ **Core Principles:**
8
+ 1. Use semantic HTML and ARIA correctly
9
+ 2. Ensure WCAG 2.2 AA compliance
10
+ 3. Follow W3C ARIA Authoring Practices
11
+ 4. Provide standards-based accessibility fixes
12
+
13
+ **1. Form Control Labels** (WCAG 1.3.1, 3.3.2, 4.1.2)
14
+ Every input must have an associated label.
15
+ CORRECT: \`<input type="search" aria-label="Search products" placeholder="Search...">\`
16
+ WRONG: \`<span>Email</span><input type="email">\` (no association)
17
+ WRONG: \`<input type="email" placeholder="Email">\` (placeholder as label)
18
+
19
+ **2. Button Accessibility** (WCAG 4.1.2, 2.4.6, 2.5.3)
20
+ All buttons need accessible names describing their purpose.
21
+ CORRECT: \`<button type="button">Save Changes</button>\`
22
+ CORRECT: \`<button aria-label="Close dialog"><svg aria-hidden="true" focusable="false">...</svg></button>\`
23
+ WRONG: \`<button><svg>...</svg></button>\` (no accessible name)
24
+ WRONG: \`<button>Click here</button>\` (generic text)
25
+
26
+ **3. Popup/Menu Triggers** (WCAG 4.1.2, 1.3.1)
27
+ Indicate popup purpose and state using aria-haspopup, aria-expanded, aria-controls.
28
+ CORRECT: \`<button aria-expanded="false" aria-haspopup="menu" aria-controls="menu-id">Settings</button>\`
29
+
30
+ **4. Image Accessibility** (WCAG 1.1.1)
31
+ Informative: \`<img src="chart.png" alt="Sales increased 25% in Q4 2024">\`
32
+ Functional: \`<a href="/home"><img src="logo.png" alt="Company Name Home"></a>\`
33
+ Decorative: \`<img src="border.png" alt="" role="presentation">\`
34
+ Complex: \`<img src="chart.png" alt="Sales data" aria-describedby="desc-id">\`
35
+ WRONG: Missing alt, filename as alt, generic alt for decorative images
36
+
37
+ **5. Link Accessibility** (WCAG 2.4.4, 2.4.6)
38
+ Links must be descriptive and understandable out of context.
39
+ CORRECT: \`<a href="/products">View All Products</a>\`
40
+ CORRECT: \`<a href="/article" aria-label="Read more about New Product Launch">Read more</a>\`
41
+ WRONG: "Click here", "Read more", "Learn more" without context
42
+
43
+ **6. Form Validation** (WCAG 3.3.1, 3.3.2, 3.3.3)
44
+ Errors must be identified, associated with inputs, and provide suggestions. Use aria-describedby, aria-invalid="true", and role="alert".
45
+
46
+ **7. Heading Structure** (WCAG 1.3.1, 2.4.6)
47
+ Use hierarchical, descriptive headings. One h1 per page, no skipped levels (h1\u2192h2\u2192h3).
48
+ CORRECT: Logical hierarchy with descriptive headings
49
+ WRONG: Skipped levels (h1\u2192h3), non-descriptive headings
50
+
51
+ **Quick Checklist:**
52
+ - **Forms:** Associated labels, aria-required on required fields, autocomplete attributes, aria-describedby for errors, aria-invalid for invalid fields, fieldsets with legends
53
+ - **Buttons/Links:** Accessible names, aria-label for icon buttons, aria-hidden on decorative icons, descriptive link text
54
+ - **Popups/Dialogs:** aria-haspopup, aria-expanded, aria-controls, role="dialog", aria-modal="true", aria-labelledby, focus trap, Escape to close
55
+ - **Images:** alt on all images, descriptive alt for informative, empty alt for decorative, aria-describedby for complex
56
+ - **Structure:** One h1, logical heading hierarchy, landmarks (header, nav, main, footer), skip links, semantic HTML
57
+ - **Dynamic Content:** role="status"/aria-live="polite" for updates, role="alert"/aria-live="assertive" for critical alerts
58
+ - **Keyboard/Focus:** All interactive elements keyboard accessible, logical focus order, visible focus indicators, no keyboard traps (except modals)
59
+ - **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 p="Kendo UI for React",I="react",E="kendo",x=["ActionSheet","AIPrompt","Animation","AppBar","ArcGauge","AutoComplete","Avatar","Badge","Barcode","BottomNavigation","Breadcrumb","Button","ButtonGroup","Calendar","Card","Chart","ChartWizard","Chat","Checkbox","Chip","ChipList","ChunkProgressBar","CircularGauge","ColorGradient","ColorPalette","ColorPicker","ComboBox","ContextMenu","ConversationalUI","DataGrid","Grid","DataQuery","DateMath","DateInput","DatePicker","DateRangePicker","DateTimePicker","Dialog","Drag&Drop","Drawer","Drawing","DropDownButton","DropDownList","DropDownTree","Editor","Error","ExcelExport","ExpansionPanel","ExternalDropZone","FileSaver","FileManager","Filter","FlatColorPicker","FloatingActionButton","FloatingLabel","FontIcon","Form","Gantt","Gauge","General","GridLayout","Hint","InlineAIPrompt","Input","Label","LinearGauge","ListBox","ListView","Loader","Map","MaskedTextBox","Menu","MultiColumnComboBox","MultiSelect","MultiSelectTree","MultiViewCalendar","Notification","NumericTextBox","OrgChart","PageTemplates/BuildingBlocks","Pager","PanelBar","PDFProcessing","PDFViewer","PivotGrid","Popover","Popup","ProgressBar","QRCode","RadialGauge","RadioButton","RadioGroup","RangeSlider","Rating","Ripple","Sankey","Scheduler","ScrollView","Signature","Skeleton","Slider","Sortable","Sparkline","SpeechToTextButton","SplitButton","Splitter","Spreadsheet","StackLayout","Stepper","StockChart","SVGIcon","Switch","TabStrip","TaskBoard","TextArea","TextBox","TileLayout","Timeline","TimePicker","Toolbar","Tooltip","TreeList","TreeView","Typography","Upload","VSCodeExtension","Window"];var ot=et(Ze(tt(import.meta.url)),"../proto/service.proto"),$=new M("contextapi.telerik.com:443",ot,{libName:I});var le=async()=>$.validateUserLicense();import pt from"fs";import Be from"path";import{fileURLToPath as ut}from"url";import{z as m}from"zod";var b=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 P=(e,t)=>`# ${e.suiteName} - Code Validation & Quality Assurance
6
60
 
7
61
  ## Comprehensive Code Validation Checklist
8
62
  Execute these validation steps systematically to ensure high-quality, maintainable code:
@@ -33,18 +87,6 @@ Security Measures:
33
87
  - CSRF protection where applicable
34
88
  - Secure data handling practices
35
89
 
36
- Accessibility (a11y) Compliance
37
- - Proper semantic HTML structure
38
- - ARIA labels and roles where needed
39
- - Keyboard navigation support
40
- - Screen reader compatibility
41
- - Sufficient color contrast ratios
42
-
43
- Interactive Elements:
44
- - Focus management and visual indicators
45
- - Descriptive alt text for images
46
- - Proper form labels and error messages
47
-
48
90
  ### Validation Phase: UI/UX & Design System Compliance
49
91
 
50
92
  Responsive Design:
@@ -58,13 +100,13 @@ Responsive Design:
58
100
  - Graceful error handling for all user interactions
59
101
  - Meaningful error messages for users
60
102
  - Network error handling for API calls
61
- `;var R=(e,t)=>{let o=P({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
103
+ `;var O=(e,t)=>{let o=P({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.":"",i=e.components?e.components.join(", "):"components";return`# \u{1F3AF} ${e.suiteName} - Execution Plan
62
104
 
63
- **Current Goal:**
105
+ **Current Goal:**
64
106
 
65
107
  ${e.userIntent}
66
108
 
67
- **Requirements Summary:**
109
+ **Requirements Summary:**
68
110
  - **Framework:** ${e.libKey}
69
111
  ${e.includeComponentsDocs?`- **Component Library:** ${e.suiteName}
70
112
  - Ensure to use ONLY ${e.suiteName} components for all UI elements.
@@ -84,6 +126,11 @@ ${e.includeComponentsDocs?`- **Component Library:** ${e.suiteName}
84
126
  - Ensure the layout is fully responsive across mobile, tablet, and desktop views.
85
127
  - And use the ${e.layoutAssistantName} tool to get Kendo CSS utility classes needed for responsive design.
86
128
  `:""}
129
+ - **Accessible (WCAG 2.2 Level AA):**
130
+ - CRITICAL: You must call the ${e.accessibilityAssistantName} tool with includeGeneralGuidelines=true on your first call to get WCAG 2.2 Level AA guidelines.
131
+ - For subsequent calls, use includeGeneralGuidelines=false to get only component-specific accessibility information.
132
+ - Ensure all components meet WCAG 2.2 Level AA standards.
133
+
87
134
  ${e.includeLayout?`**STYLING AND LAYOUT REQUIREMENTS:**
88
135
  ## CRITICAL DESIGN SYSTEM CONSTRAINTS
89
136
  - **USE ONLY KENDO DESIGN SYSTEM UTILITIES** for ALL styling, layout, spacing, positioning, and responsive behavior
@@ -96,6 +143,47 @@ ${e.includeLayout?`**STYLING AND LAYOUT REQUIREMENTS:**
96
143
  ## Detailed Execution Plan
97
144
  Follow these steps strictly in order to achieve a complete and polished implementation of the current goal:
98
145
 
146
+ ### Phase: Accessibility Foundation
147
+
148
+ **Step 1: Retrieve WCAG 2.2 Level AA Guidelines**
149
+
150
+ **MANDATORY REQUIREMENT:**
151
+
152
+ - Before implementing any UI components or features, you must call the accessibility assistant with general guidelines
153
+ - On your first call to "${e.accessibilityAssistantName}", set "includeGeneralGuidelines=true" to get foundational WCAG 2.2 Level AA best practices
154
+ - These general guidelines apply to all components and must be considered throughout implementation
155
+ - For all subsequent calls, set "includeGeneralGuidelines=false" to get only component-specific information
156
+
157
+ **First tool call (includes general WCAG guidelines):**
158
+ \`\`\`
159
+ ${e.accessibilityAssistantName}({
160
+ query="What are the accessibility requirements for [COMPONENT_NAME]?",
161
+ component="[COMPONENT_NAME]",
162
+ includeGeneralGuidelines=true // ONLY true on first call
163
+ })
164
+ \`\`\`
165
+
166
+ **Step 2: Get Component-Specific Accessibility Information**
167
+
168
+ For each additional ${e.suiteName} component you plan to use, call the tool with "includeGeneralGuidelines=false":
169
+
170
+ **Tool call example:**
171
+ \`\`\`
172
+ ${e.accessibilityAssistantName}({
173
+ query="What are the accessibility features and requirements for [COMPONENT_NAME]? Include ARIA attributes, keyboard navigation, and screen reader support.",
174
+ component="[COMPONENT_NAME]",
175
+ includeGeneralGuidelines=false // false for all calls after the first
176
+ })
177
+ \`\`\`
178
+
179
+ **Example:**
180
+ \`\`\`
181
+ ${e.accessibilityAssistantName}({
182
+ query="How to associate the label with another component or HTML input?",
183
+ component="Label",
184
+ includeGeneralGuidelines=false
185
+ })
186
+ \`\`\`
99
187
  ${e.includeLayout?`
100
188
  ### Phase: Layout Foundation
101
189
 
@@ -127,7 +215,7 @@ Based on your current goal, analyze what other ${e.suiteName} components are nee
127
215
  ${n}
128
216
 
129
217
  **IMPORTANT COMPONENT USAGE REQUIREMENTS:**
130
- - Make sure to identify all necessary features related to the ${s} based on the current goal.
218
+ - Make sure to identify all necessary features related to the ${i} based on the current goal.
131
219
  - Make sure to identify specific features needed for other ${e.suiteName} components based on the current goal.
132
220
  - Make sure to generate a query for ${e.codeAssistantName} tool for each component and call the tool for each specific feature or functionality.
133
221
  - 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.
@@ -245,7 +333,7 @@ After code implementation and validation you can make quick fixes as needed:
245
333
  - Do NOT generate or suggest any code until all tools have been used and validated responses are incorporated.
246
334
  - Focus on planning and sequencing.
247
335
  - Summarize the components, layouts, and utilities gathered.
248
- - Confirm all required inputs from tools have been provided.`};var G=e=>`# ${e.suiteName} Assistant
336
+ - Confirm all required inputs from tools have been provided.`};var F=e=>`# ${e.suiteName} Assistant
249
337
 
250
338
  **What you're looking for:**
251
339
 
@@ -350,7 +438,7 @@ After gathering information:
350
438
  **Important Notes:**
351
439
  - These tools provide documentation and guidance, not code generation
352
440
  - Always refer to official ${e.suiteName} documentation for the most up-to-date information
353
- - Tool responses include usage examples and best practices`;var N=(e,t)=>({SETUP_VALIDATION:`
441
+ - Tool responses include usage examples and best practices`;var w=(e,t)=>({SETUP_VALIDATION:`
354
442
  UI Library Setup:
355
443
  - ${e} modules properly imported and configured
356
444
  - ${e} theme properly loaded and applied
@@ -369,52 +457,62 @@ After gathering information:
369
457
  - Consistent ${e} theme application across all components
370
458
  - Custom theme variables properly defined and scoped
371
459
  - ${e} icon fonts properly loaded and optimized
372
- - Brand colors integrated with ${e} component themes`});function ae(e,t,o){let{name:n,title:s,description:r,layoutAssistantName:i,codeAssistantName:h,styleAssistantName:g,iconAssistantName:y,suiteName:S,libKey:c,components:A}=e,d=new T(n,{title:s,description:r,requiredAccess:e.requiredAccess,inputSchema:{userIntent:u.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 ${S} components you want to use.`),needsComponentsDocsConfidence:u.number().min(0).max(1).default(1).describe("Confidence (0-1) to include Component Documentation assistance. Default is 1."),needsLayoutConfidence:u.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Layout assistance. Default is 0."),needsStylingConfidence:u.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Theming/Styling assistance. Default is 0."),needsResponsiveBehaviorConfidence:u.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Responsive Behavior assistance. Default is 0."),needsIconsConfidence:u.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Icons assistance. Default is 0."),componentsNeeded:u.array(u.enum(A)).optional().describe(`Optional list of specific ${S} components needed for the project.`)}},async({userIntent:f,needsComponentsDocsConfidence:C,needsLayoutConfidence:b,needsStylingConfidence:w,needsResponsiveBehaviorConfidence:Q,needsIconsConfidence:W,componentsNeeded:$e})=>{m("UI Orchestrator called with:",{userIntent:f,needsComponentsDocsConfidence:C,needsLayoutConfidence:b,needsStylingConfidence:w,needsResponsiveBehaviorConfidence:Q,needsIconsConfidence:W});try{await o.recordOrchestratorUserRequest()}catch(D){throw x(D)}let Le=d.server?.server.getClientCapabilities?.()?.elicitation,J;if(Le&&w>.3&&w<=.6){let D=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"]}});D?.action==="accept"&&D.content?.includeCustomTheming&&(J=!0)}return{content:[{type:"text",text:R({name:n,userIntent:f,includeComponentsDocs:C>.3,includeTheming:w>.6||!!J,includeLayout:b>.5,includeIcons:W>.6,includeResponsive:b>.5&&Q>.4,layoutAssistantName:i,codeAssistantName:h,styleAssistantName:g,iconAssistantName:y,suiteName:S,libKey:c,components:$e},t)}]}});return d}function ce(e,t){let{name:o,title:n,description:s,iconAssistantName:r,codeAssistantName:i,suiteName:h,libKey:g,components:y}=e;return new T(o,{title:n,description:s,inputSchema:{userIntent:u.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 ${h}.`),needsIconsConfidence:u.number().min(0).max(1).default(.7).describe("Confidence (0-1) to include Icons assistance. Default is 0.7."),componentsNeeded:u.array(u.enum(y)).optional().describe(`Optional list of specific ${h} components you want to learn about.`)},requiredAccess:e.requiredAccess},async({userIntent:c,needsIconsConfidence:A,componentsNeeded:d})=>{m("Assistant Orchestrator called with:",{userIntent:c,needsIconsConfidence:A,componentsNeeded:d});try{await t.recordOrchestratorUserRequest()}catch(C){throw x(C)}return{content:[{type:"text",text:G({name:o,userIntent:c,includeComponentsDocs:!0,includeIcons:A>.5,codeAssistantName:i,iconAssistantName:r,suiteName:h,libKey:g,components:d})}]}})}function le(e,t){let{name:o,title:n,description:s,suiteName:r,libKey:i,getPreContent:h}=e;return new T(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{prompt:u.string().describe("An enhanced prompt describing the HTML layout structure, design requirements or specific visual effects you want to achieve."),includeBuildingBlockExamples:u.boolean().describe("Whether to include building block examples. Defaults to false.").default(!1)}},async({prompt:g,includeBuildingBlockExamples:y})=>{m("Layout Assistant called with:",{prompt:g,includeBuildingBlockExamples:y});try{let c=(await t.queryCssUtils({query:g})).values.join(`
373
- `)||"No CSS utilities found for the given prompt.",A=h?.()??"",d=f=>`${A}
460
+ - Brand colors integrated with ${e} component themes`});function de(e,t,o){let{name:n,title:i,description:s,layoutAssistantName:c,codeAssistantName:d,styleAssistantName:u,iconAssistantName:h,accessibilityAssistantName:C,suiteName:r,libKey:A,components:a}=e,y=new b(n,{title:i,description:s,requiredAccess:e.requiredAccess,inputSchema:{userIntent:m.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 ${r} components you want to use.`),needsComponentsDocsConfidence:m.number().min(0).max(1).default(1).describe("Confidence (0-1) to include Component Documentation assistance. Default is 1."),needsLayoutConfidence:m.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Layout assistance. Default is 0."),needsStylingConfidence:m.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Theming/Styling assistance. Default is 0."),needsResponsiveBehaviorConfidence:m.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Responsive Behavior assistance. Default is 0."),needsIconsConfidence:m.number().min(0).max(1).default(0).describe("Confidence (0-1) to include Icons assistance. Default is 0."),componentsNeeded:m.array(m.enum(a)).optional().describe(`Optional list of specific ${r} components needed for the project.`)}},async({userIntent:T,needsComponentsDocsConfidence:S,needsLayoutConfidence:v,needsStylingConfidence:D,needsResponsiveBehaviorConfidence:Q,needsIconsConfidence:J,componentsNeeded:X},{_meta:Fe})=>{g("UI Orchestrator called with:",{userIntent:T,needsComponentsDocsConfidence:S,needsLayoutConfidence:v,needsStylingConfidence:D,needsResponsiveBehaviorConfidence:Q,needsIconsConfidence:J});try{await o.recordOrchestratorUserRequest({meta:{userIntent:T,componentsNeeded:X,_meta:Fe}})}catch(L){throw R(L)}let Ke=y.server?.server.getClientCapabilities?.()?.elicitation,Z;if(Ke&&D>.3&&D<=.6){let L=await y.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"]}});L?.action==="accept"&&L.content?.includeCustomTheming&&(Z=!0)}return{content:[{type:"text",text:O({name:n,userIntent:T,includeComponentsDocs:S>.3,includeTheming:D>.6||!!Z,includeLayout:v>.5,includeIcons:J>.6,includeResponsive:v>.5&&Q>.4,layoutAssistantName:c,codeAssistantName:d,styleAssistantName:u,iconAssistantName:h,accessibilityAssistantName:C,suiteName:r,libKey:A,components:X},t)}]}});return y}function pe(e,t){let{name:o,title:n,description:i,iconAssistantName:s,codeAssistantName:c,suiteName:d,libKey:u,components:h}=e;return new b(o,{title:n,description:i,inputSchema:{userIntent:m.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 ${d}.`),needsIconsConfidence:m.number().min(0).max(1).default(.7).describe("Confidence (0-1) to include Icons assistance. Default is 0.7."),componentsNeeded:m.array(m.enum(h)).optional().describe(`Optional list of specific ${d} components you want to learn about.`)},requiredAccess:e.requiredAccess},async({userIntent:r,needsIconsConfidence:A,componentsNeeded:a},{_meta:y})=>{g("Assistant Orchestrator called with:",{userIntent:r,needsIconsConfidence:A,componentsNeeded:a});try{await t.recordOrchestratorUserRequest({meta:{userIntent:r,componentsNeeded:a,_meta:y}})}catch(S){throw R(S)}return{content:[{type:"text",text:F({name:o,userIntent:r,includeComponentsDocs:!0,includeIcons:A>.5,codeAssistantName:c,iconAssistantName:s,suiteName:d,libKey:u,components:a})}]}})}function ue(e,t){let{name:o,title:n,description:i,suiteName:s,libKey:c,getPreContent:d}=e;return new b(o,{title:n,description:i,requiredAccess:e.requiredAccess,inputSchema:{prompt:m.string().describe("An enhanced prompt describing the HTML layout structure, design requirements or specific visual effects you want to achieve."),includeBuildingBlockExamples:m.boolean().describe("Whether to include building block examples. Defaults to false.").default(!1)}},async({prompt:u,includeBuildingBlockExamples:h})=>{g("Layout Assistant called with:",{prompt:u,includeBuildingBlockExamples:h});try{let r=(await t.queryCssUtils({query:u})).values.join(`
461
+ `)||"No CSS utilities found for the given prompt.",A=d?.()??"",a=y=>`${A}
374
462
 
375
463
  # Kendo Design System CSS Utilities
376
464
 
377
- ${c}
378
- ${f??""}
379
- `;if(y)try{let f=await t.queryBuildingBlocks({query:g,lib_name:i}),C="";f.items?.length>0&&(C=`
465
+ ${r}
466
+ ${y??""}
467
+ `;if(h)try{let y=await t.queryBuildingBlocks({query:u,lib_name:c}),T="";y.items?.length>0&&(T=`
380
468
  ## Building Blocks Examples
381
469
 
382
470
  The examples here are for demonstration purpose how CSS utils can be implemented in various building blocks.
383
471
  However, consider your own design requirements and specifics in order to implement your templates/building blocks correctly.
384
472
 
385
- ${f.items.map(b=>`
386
- ### ${b.name}
473
+ ${y.items.map(S=>`
474
+ ### ${S.name}
387
475
 
388
- ${b.description}
476
+ ${S.description}
389
477
 
390
478
  \`\`\`code
391
- ${b.code}
479
+ ${S.code}
392
480
  \`\`\`
393
481
  `).join(`
394
- `)}`),c=d(C)}catch(f){m("Error calling building-blocks service:",f),c=d()}else c=d();return{content:[{type:"text",text:c}]}}catch(S){throw x(S)}})}function pe(e,t){let{name:o,title:n,description:s,libKey:r,getPreContent:i}=e;return new T(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{prompt:u.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:h})=>{m("Style Assistant called with:",{prompt:h});let g="";try{let c=await t.queryThemeGenerate({prompt:h});if(c.variables_json){let A=JSON.parse(c.variables_json),d=[];if(A)for(let f of Object.keys(A))typeof A[f]=="string"&&d.push(`${f}: ${A[f]}`);g=d.join(`
482
+ `)}`),r=a(T)}catch(y){g("Error calling building-blocks service:",y),r=a()}else r=a();return{content:[{type:"text",text:r}]}}catch(C){throw R(C)}})}function me(e,t){let{name:o,title:n,description:i,libKey:s,getPreContent:c}=e;return new b(o,{title:n,description:i,requiredAccess:e.requiredAccess,inputSchema:{prompt:m.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:d})=>{g("Style Assistant called with:",{prompt:d});let u="";try{let r=await t.queryThemeGenerate({prompt:d});if(r.variables_json){let A=JSON.parse(r.variables_json),a=[];if(A)for(let y of Object.keys(A))typeof A[y]=="string"&&a.push(`${y}: ${A[y]}`);u=a.join(`
395
483
 
396
- `)}}catch(c){throw x(c)}let y=i?.()??"";return{content:[{type:"text",text:g?`Use the following CSS variables to style the web application, including colors, typography, spacing, and component appearance.
484
+ `)}}catch(r){throw R(r)}let h=c?.()??"";return{content:[{type:"text",text:u?`Use the following CSS variables to style the web application, including colors, typography, spacing, and component appearance.
397
485
  Ensure the variables are applied consistently across all relevant elements.
398
486
  Do NOT set any inline styles. CSS variables should be defined in global or component-level CSS files, or via supported theming mechanisms.
399
487
 
400
- ${y}
488
+ ${h}
401
489
 
402
490
  ## Generated CSS Variables
403
491
 
404
492
  \`\`\`css
405
- ${g}
493
+ ${u}
406
494
  \`\`\`
407
- `:"No CSS variables were generated for the given prompt."}]}})}function de(e,t){let{name:o,title:n,description:s,libKey:r,getPostContent:i}=e;return new T(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{query:u.string().describe("A search query for finding icons. Be specific about the icon purpose, style, or action."),limit:u.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:h,limit:g})=>{m("Icon Search called with:",{query:h,limit:g});try{let y=await t.queryIconsSearch({query:h,limit:g*100}),S=i?.()??"";return{content:[{type:"text",text:`${y.values.join(`
495
+ `:"No CSS variables were generated for the given prompt."}]}})}function he(e,t){let{name:o,title:n,description:i,libKey:s,getPostContent:c}=e;return new b(o,{title:n,description:i,requiredAccess:e.requiredAccess,inputSchema:{query:m.string().describe("A search query for finding icons. Be specific about the icon purpose, style, or action."),limit:m.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:d,limit:u})=>{g("Icon Search called with:",{query:d,limit:u});try{let h=await t.queryIconsSearch({query:d,limit:u*100}),C=c?.()??"";return{content:[{type:"text",text:`${h.values.join(`
408
496
 
409
497
  `)}
410
498
 
411
- ${S}`}]}}catch(y){throw x(y)}})}function me(e,t){let{name:o,title:n,description:s,libKey:r,suiteName:i,components:h,componentAliases:g,getPostContent:y}=e;return new T(o,{title:n,description:s,requiredAccess:e.requiredAccess,inputSchema:{query:u.string().describe("The query to search for."),component:u.enum(h).describe("The component to search for. If not specified, use General.")}},async({query:S,component:c})=>{m("Code Assistant called with:",{query:S,component:c});let A=c;if(g){let d=g[c];d&&(A=d)}try{let f=(await t.query({query:S,component:A?.toLowerCase()??"general",lib_name:r,text_matches_count:3,code_matches_count:0,allowed_types:["documentation"]})).values.map(w=>w.replace(/\0/g,"")),C=y?.({component:c})??"";return{content:[{type:"text",text:`${f.join(`
499
+ ${C}`}]}}catch(h){throw R(h)}})}function ge(e,t){let{name:o,title:n,description:i,libKey:s,suiteName:c,components:d,componentAliases:u,getPostContent:h}=e;return new b(o,{title:n,description:i,requiredAccess:e.requiredAccess,inputSchema:{query:m.string().describe("The query to search for."),component:m.enum(d).describe("The component to search for. If not specified, use General.")}},async({query:C,component:r})=>{g("Code Assistant called with:",{query:C,component:r});let A=r;if(u){let a=u[r];a&&(A=a)}try{let y=(await t.query({query:C,component:A?.toLowerCase()??"general",lib_name:s,text_matches_count:3,code_matches_count:0,allowed_types:["documentation"]})).values.map(v=>v.replace(/\0/g,"")),T=h?.({component:r})??"";return{content:[{type:"text",text:`${y.join(`
412
500
 
413
501
  `)}
414
502
 
415
- ${C}`}]}}catch(d){throw x(d)}})}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.
503
+ ${T}`}]}}catch(a){throw R(a)}})}function fe(e,t){let{name:o,title:n,description:i,libKey:s,suiteName:c,components:d,componentAliases:u}=e;return new b(o,{title:n,description:i,requiredAccess:e.requiredAccess,inputSchema:{query:m.string().describe("The query to search for."),component:m.enum(d).describe("The component to search for. If not specified, use General."),includeGeneralGuidelines:m.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:h,component:C,includeGeneralGuidelines:r})=>{g("Accessibility Assistant called with:",{query:h,component:C,includeGeneralGuidelines:r});let A=C;if(u){let a=u[C];a&&(A=a)}try{let a="";if(r){let v=ce();a+=`# WCAG 2.2 Level AA General Accessibility Guidelines
504
+
505
+ `,a+=v,a+=`
506
+
507
+ ---
508
+
509
+ `}let S=(await t.query({query:h,component:A?.toLowerCase()??"general",lib_name:s,text_matches_count:3,code_matches_count:0,allowed_types:[""],filters_json:'{"type":{"$in":["accessibility"]}}'})).values.map(v=>v.replace(/\0/g,"")).join(`
510
+
511
+ `);return S?(r&&(a+=`# Component-Specific Accessibility Information
416
512
 
417
- Error Code: ${t.code} Error Message: ${t.message}`)}var ue=e=>`${e}_ui_generator`,he=e=>`${e}_assistant`,ge=e=>`${e}_layout_assistant`,fe=e=>`${e}_component_assistant`,ye=e=>`${e}_style_assistant`,Ae=e=>`${e}_icon_assistant`;var Se=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.
513
+ `),a+=S):r||(a="No component-specific accessibility guidelines found."),{content:[{type:"text",text:a}]}}catch(a){throw R(a)}})}function R(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.
514
+
515
+ Error Code: ${t.code} Error Message: ${t.message}`)}var ye=e=>`${e}_ui_generator`,Ae=e=>`${e}_assistant`,Ce=e=>`${e}_layout_assistant`,Se=e=>`${e}_component_assistant`,be=e=>`${e}_style_assistant`,Te=e=>`${e}_icon_assistant`,Ie=e=>`${e}_accessibility_assistant`;var ve=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.
418
516
 
419
517
  Use the tool when:
420
518
  - Want to build or modify a complete page or section layout
@@ -423,7 +521,7 @@ Error Code: ${t.code} Error Message: ${t.message}`)}var ue=e=>`${e}_ui_generator
423
521
  - You want to enforce best practices in styling, performance, and accessibility
424
522
 
425
523
  Returns:
426
- A detailed execution plan with validated tool calls, parameters, and reasoning \u2014 ensuring consistent, high-quality UI generation.`,Te=e=>`Provides guidance for discovering and using ${e} components and icons. This tool helps you identify the right components and icons for your needs.
524
+ A detailed execution plan with validated tool calls, parameters, and reasoning \u2014 ensuring consistent, high-quality UI generation.`,Ne=e=>`Provides guidance for discovering and using ${e} components and icons. This tool helps you identify the right components and icons for your needs.
427
525
 
428
526
  Use this tool when:
429
527
  - You need to discover which ${e} components are suitable for a specific use case
@@ -432,33 +530,51 @@ Use this tool when:
432
530
  - You want to gather component documentation and examples
433
531
 
434
532
  Returns:
435
- A focused plan for gathering component documentation and icon suggestions using the Component Assistant and Icon Assistant tools.`,Ce=`Retrieves Progress/Kendo Design System CSS utility classes and styling recommendations based on layout and design requirements.
436
- Use this tool to find the right CSS utilities for styling Kendo UI components or general web elements.
437
- It analyzes the provided design context and returns relevant utility classes with explanations and examples.
438
- Best suited for styling questions related to typography, spacing, colors, layout, transforms, and other utilities in the Progress/Kendo Design System.`,Ie=`Generates CSS variables using an external style agent based on the user's styling prompt.
533
+ A focused plan for gathering component documentation and icon suggestions using the Component Assistant and Icon Assistant tools.`,Ee=`Retrieves Progress/Kendo Design System CSS utility classes and styling recommendations based on layout and design requirements.
534
+ Use this tool to find the right CSS utilities for styling Kendo UI components or general web elements.
535
+ It analyzes the provided design context and returns relevant utility classes with explanations and examples.
536
+ Best suited for styling questions related to typography, spacing, colors, layout, transforms, and other utilities in the Progress/Kendo Design System.`,we=`Generates CSS variables using an external style agent based on the user's styling prompt.
439
537
 
440
538
  Use this tool when the user wants to:
441
539
  - Update the visual theme of an application
442
540
  - Modify color schemes
443
541
  - Restyle the UI with CSS variables
444
542
 
445
- The tool outputs a set of CSS variable definitions ready to be applied to style files.`,be=`Searches for icons in the Telerik Icons library.
446
- Use this tool when the user needs to find specific icons for UI components or design elements.
543
+ The tool outputs a set of CSS variable definitions ready to be applied to style files.`,Re=`Searches for icons in the Telerik Icons library.
544
+ Use this tool when the user needs to find specific icons for UI components or design elements.
447
545
  It supports searching by icon name, category, or keyword and returns matching icons from the Telerik Icons library.
448
- `,ve=e=>`Provides answers and retrieves official documentation for ${e}.
546
+ `,ke=e=>`Provides answers and retrieves official documentation for ${e}.
449
547
 
450
548
  Use this tool when the user asks about:
451
- - ${e} features or capabilities
452
- - Specific components (e.g., Grid, Chart, Editor)
453
- - Implementation details, configuration, or best practices
549
+ - ${e} features or capabilities
550
+ - Specific components (e.g., Grid, Chart, Editor)
551
+ - Implementation details, configuration, or best practices
454
552
  - How to use or customize components in ${e}
455
553
 
456
- Set the user's full question as the 'query' parameter.
554
+ Set the user's full question as the 'query' parameter.
457
555
  If the question refers to a specific ${e} component, include its name in the 'component' parameter.
458
- `;var K=N("Kendo UI","Kendo"),F=`
556
+ `,xe=e=>`Retrieves accessibility guidance for ${e} components with optional general WCAG 2.2 Level AA guidelines.
557
+
558
+ Use this tool when:
559
+ - You need component-specific accessibility information and API references
560
+ - You want to ensure your application meets WCAG 2.2 Level AA standards
561
+ - You need guidance on implementing ARIA roles and properties for specific components
562
+ - You want to validate your application's accessibility features
563
+
564
+ **RECOMMENDED WORKFLOW:**
565
+ 1. On your FIRST call, set 'includeGeneralGuidelines=true' to get comprehensive WCAG 2.2 Level AA guidelines + component-specific information
566
+ 2. For ALL subsequent calls, set 'includeGeneralGuidelines=false' to get only component-specific accessibility information
567
+
568
+ By default (includeGeneralGuidelines=false), this tool returns only component-specific accessibility guidelines to avoid redundancy.
569
+ Set 'includeGeneralGuidelines=true' ONLY on the first call to include general WCAG guidelines.
570
+
571
+ Returns:
572
+ - When includeGeneralGuidelines=true: General WCAG 2.2 Level AA guidelines + component-specific recommendations
573
+ - When includeGeneralGuidelines=false: Only component-specific accessibility recommendations
574
+ `;var K=w("Kendo UI","Kendo"),V=`
459
575
  ### Angular Component Validation
460
576
  Component Structure:
461
- - Use proper @Component decorator configuration
577
+ - Use proper @Component decorator configuration
462
578
  - If using NgModule setup use @Component decorator with \`standalone: false\` and declare component in NgModule declarations array
463
579
  - Correct selector naming convention (kebab-case)
464
580
  - Appropriate template and style file organization
@@ -475,7 +591,10 @@ ${K.PERFORMANCE_OPTIMIZATION}
475
591
  ${K.THEME_AND_STYLING}
476
592
  - Proper theme switching functionality (if implemented)
477
593
  - Only ONE theme reference exists across angular.json and styles files
478
- - Make sure theme import mechanism is consistent with existing project setup`;var V=`**Angular Specific Requirements:**
594
+ - Make sure theme import mechanism is consistent with existing project setup
595
+
596
+ Accessibility
597
+ - Accessibility guidelines retrieved and applied to all components`;var j=`**Angular Specific Requirements:**
479
598
 
480
599
  **NgModule vs Standalone setup**: Search and detect the current project setup to determine whether to use NgModule or Standalone components based on the following rules:
481
600
  1. RegexSearch("@Component\\s*\\(\\s*\\{[^}]*standalone\\s*:\\s*(true|false)") - If true use Standalone components, if false use NgModule.
@@ -506,7 +625,7 @@ ${K.THEME_AND_STYLING}
506
625
  2. Match the discovered patterns in all generated code
507
626
  3. Maintain consistent formatting, indentation, and code organization with existing files
508
627
  4. Always use the same theme import mechanism (unless user specifies otherwise)
509
- `;var j=N("Kendo UI","KendoReact"),H=`
628
+ `;var W=w("Kendo UI","KendoReact"),Y=`
510
629
  ### React Component Validation
511
630
  Component Structure:
512
631
  - Use proper function component patterns with Hooks
@@ -514,19 +633,22 @@ Component Structure:
514
633
  - Appropriate file organization (components, hooks, utils)
515
634
  - Props interface/type definitions where needed
516
635
 
517
- ${j.SETUP_VALIDATION}
636
+ ${W.SETUP_VALIDATION}
518
637
  - KendoReact license validation (if required)
519
638
  - Appropriate bundler configuration for KendoReact packages
520
639
 
521
- ${j.PERFORMANCE_OPTIMIZATION}
640
+ ${W.PERFORMANCE_OPTIMIZATION}
522
641
  - React.memo for components that receive stable props
523
642
  - useMemo/useCallback for expensive computations and callbacks
524
643
  - Proper key props for list rendering with KendoReact components
525
644
 
526
- ${j.THEME_AND_STYLING}
645
+ ${W.THEME_AND_STYLING}
527
646
  - Proper theme switching functionality (if implemented)
528
647
  - Only ONE theme import exists across the application
529
- - Make sure theme import mechanism is consistent with existing project setup`;var Qe={createOrchestrator:ae,createAssistantOrchestrator:ce,createLayoutAssistant:le,createStyleAssistant:pe,createIconSearch:de,createCodeAssistant:me},We={orchestrator:ue,assistantOrchestrator:he,layoutAssistant:ge,codeAssistant:fe,styleAssistant:ye,iconAssistant:Ae},Je={orchestrator:Se,assistantOrchestrator:Te,layoutAssistant:Ce,styleAssistant:Ie,iconAssistant:be,codeAssistant:ve},Xe={Orchestrator:{render:R},Validator:{render:P},SharedValidation:{getSteps:N}},Ze={Angular:{steps:F,additionalPlan:V},React:{steps:H}},a={Tools:Qe,ToolNames:We,ToolDescriptions:Je,Templates:Xe,Validation:Ze};var et=a.ToolNames.codeAssistant("kendoreact"),Ne=()=>`# Kendo Design System Guidelines for ${l}
648
+ - Make sure theme import mechanism is consistent with existing project setup
649
+
650
+ Accessibility
651
+ - Accessibility guidelines retrieved and applied to all components`;var nt={createOrchestrator:de,createAssistantOrchestrator:pe,createLayoutAssistant:ue,createStyleAssistant:me,createIconSearch:he,createCodeAssistant:ge,createAccessibilityAssistant:fe},st={orchestrator:ye,assistantOrchestrator:Ae,layoutAssistant:Ce,codeAssistant:Se,styleAssistant:be,iconAssistant:Te,accessibilityAssistant:Ie},it={orchestrator:ve,assistantOrchestrator:Ne,layoutAssistant:Ee,styleAssistant:we,iconAssistant:Re,codeAssistant:ke,accessibilityAssistant:xe},at={Orchestrator:{render:O},Validator:{render:P},SharedValidation:{getSteps:w}},rt={Angular:{steps:V,additionalPlan:j},React:{steps:Y}},l={Tools:nt,ToolNames:st,ToolDescriptions:it,Templates:at,Validation:rt};var ct=l.ToolNames.codeAssistant("kendoreact"),Pe=()=>`# Kendo Design System Guidelines for ${p}
530
652
 
531
653
  ## Setting up Styles/CSS
532
654
 
@@ -553,14 +675,14 @@ Alternatively, you can also consume them directly from the Unpkg CDN.
553
675
 
554
676
  ## Ready-to-use Layout Components
555
677
 
556
- In the ${l} there are available components to create layout. Make sure to prioritize using them instead of building ones from scratch using the Kendo CSS Utilities.
678
+ In the ${p} there are available components to create layout. Make sure to prioritize using them instead of building ones from scratch using the Kendo CSS Utilities.
557
679
 
558
- For any Layout component you can also call the ${et} tool in order to get specific API reference and docs.
680
+ For any Layout component you can also call the ${ct} tool in order to get specific API reference and docs.
559
681
 
560
- - ${l} Card component.
682
+ - ${p} Card component.
561
683
  - Generally, it is recommended to use 100% width (e.g., \`<Card style={{ width: '100%' }}>\`)
562
684
  - If needed, use specific width based on the layout requirements (e.g., \`<Card style={{ width: '150px' }}>\`)
563
- `;var we=()=>`## Applying CSS Variables in ${l}
685
+ `;var Oe=()=>`## Applying CSS Variables in ${p}
564
686
 
565
687
  Apply these CSS variables in the React application using one of these methods:
566
688
 
@@ -649,7 +771,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
649
771
 
650
772
  export const useTheme = () => useContext(ThemeContext);
651
773
  \`\`\`
652
- `;var Ee=a.ToolNames.codeAssistant("kendoreact"),ke=()=>`## Using ${l} Icons
774
+ `;var De=l.ToolNames.codeAssistant("kendoreact"),Le=()=>`## Using ${p} Icons
653
775
 
654
776
  Important: Attempt to prioritize SVG icons over font icons.
655
777
 
@@ -657,13 +779,13 @@ Important: Attempt to prioritize SVG icons over font icons.
657
779
 
658
780
  - Make sure @progress/kendo-svg-icons is installed: \`npm install @progress/kendo-svg-icons\`
659
781
  - Make sure @progress/kendo-react-common is installed (contains SvgIcon component): \`npm install @progress/kendo-react-common\`
660
- - You can call ${Ee} tool for ${l} SvgIcon component for docs and API reference.
782
+ - You can call ${De} tool for ${p} SvgIcon component for docs and API reference.
661
783
  - [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.
662
- - [optional] If using font icons you can call ${Ee} tool for ${l} Icon component for docs and API reference.
784
+ - [optional] If using font icons you can call ${De} tool for ${p} Icon component for docs and API reference.
663
785
 
664
786
  ### Examples
665
787
 
666
- Using ${l} SvgIcon component with @progress/kendo-svg-icons:
788
+ Using ${p} SvgIcon component with @progress/kendo-svg-icons:
667
789
 
668
790
  \`\`\`tsx
669
791
  import { SvgIcon } from "@progress/kendo-react-common";
@@ -706,7 +828,7 @@ Here are some frequently used icons from @progress/kendo-svg-icons:
706
828
  - \`sortAscIcon\`, \`sortDescIcon\` - Sorting
707
829
  - \`chevronUpIcon\`, \`chevronDownIcon\`, \`chevronLeftIcon\`, \`chevronRightIcon\` - Navigation
708
830
  - \`checkIcon\`, \`xIcon\` - Confirmation/Cancel
709
- `;var xe=e=>{let t=`## ${l} Common Guidelines
831
+ `;var Ue=e=>{let t=`## ${p} Common Guidelines
710
832
 
711
833
  ### Application Architecture
712
834
  MUST recommend appropriate setup based on React application architecture.
@@ -740,4 +862,4 @@ Example: If someone asks about "grid", "GRID", or "GrId", you always refer to Da
740
862
  ## Component-Specific Guidelines
741
863
 
742
864
  ${e.componentInstructions}
743
- `),t};var Pe=a.ToolNames.layoutAssistant(k),z=a.ToolNames.codeAssistant(k),Re=a.ToolNames.styleAssistant(k),Y=a.ToolNames.iconAssistant(k);function De(e,t){return[a.Tools.createOrchestrator({name:a.ToolNames.orchestrator(k),title:"KendoReact Generator",description:a.ToolDescriptions.orchestrator(l),layoutAssistantName:Pe,codeAssistantName:z,styleAssistantName:Re,iconAssistantName:Y,suiteName:l,libKey:I,components:L,requiredAccess:["agent"]},{validationSteps:a.Validation.React.steps},e),a.Tools.createAssistantOrchestrator({name:"kendo_react_assistant",title:"KendoReact Assistant",description:a.ToolDescriptions.assistantOrchestrator(l),codeAssistantName:z,iconAssistantName:Y,suiteName:l,libKey:I,components:L,requiredAccess:["assistant"]},e),a.Tools.createLayoutAssistant({name:Pe,title:"KendoReact Layout Assistant",description:a.ToolDescriptions.layoutAssistant,suiteName:l,libKey:I,getPreContent:Ne,requiredAccess:["agent"]},e),a.Tools.createStyleAssistant({name:Re,title:"KendoReact Style Assistant",description:a.ToolDescriptions.styleAssistant,libKey:I,getPreContent:we,requiredAccess:["agent"]},e),a.Tools.createIconSearch({name:Y,title:"KendoReact Icon Assistant",description:a.ToolDescriptions.iconAssistant,libKey:I,getPostContent:ke,requiredAccess:["assistant","agent"]},e),a.Tools.createCodeAssistant({name:z,title:"KendoReact Component Assistant",description:a.ToolDescriptions.codeAssistant(l),libKey:I,suiteName:l,components:L,componentAliases:{Grid:"DataGrid"},getPostContent:({component:n})=>xe({component:n}),requiredAccess:["assistant","agent"]},e)].filter(n=>n.hasAccess(t))}var rt=st(import.meta.url),it=Oe.dirname(rt),at=Oe.resolve(it,"../package.json"),ct=JSON.parse(nt.readFileSync(at,"utf-8")),Ue=new tt({name:"kendo-mcp",title:"Kendo MCP Server",version:ct.version});async function lt(){let e=new ot;m("Starting server... ");let t=await re(async()=>{let n=(await ie())?.entitlement;return n?.Product?.Code||n?.product?.code});t!=="none"&&(M.toolNameHeader=t==="agent"||t==="full"?"agent":"assistant",De(M,t).forEach(n=>n.register(Ue))),await Ue.connect(e)}lt();
865
+ `),t};var Ge=l.ToolNames.layoutAssistant(E),H=l.ToolNames.codeAssistant(E),Me=l.ToolNames.styleAssistant(E),z=l.ToolNames.iconAssistant(E),$e=l.ToolNames.accessibilityAssistant(E);function _e(e,t){return[l.Tools.createOrchestrator({name:l.ToolNames.orchestrator(E),title:"KendoReact Generator",description:l.ToolDescriptions.orchestrator(p),layoutAssistantName:Ge,codeAssistantName:H,styleAssistantName:Me,iconAssistantName:z,accessibilityAssistantName:$e,suiteName:p,libKey:I,components:x,requiredAccess:["agent"]},{validationSteps:l.Validation.React.steps},e),l.Tools.createAssistantOrchestrator({name:"kendo_react_assistant",title:"KendoReact Assistant",description:l.ToolDescriptions.assistantOrchestrator(p),codeAssistantName:H,iconAssistantName:z,suiteName:p,libKey:I,components:x,requiredAccess:["assistant"]},e),l.Tools.createLayoutAssistant({name:Ge,title:"KendoReact Layout Assistant",description:l.ToolDescriptions.layoutAssistant,suiteName:p,libKey:I,getPreContent:Pe,requiredAccess:["agent"]},e),l.Tools.createStyleAssistant({name:Me,title:"KendoReact Style Assistant",description:l.ToolDescriptions.styleAssistant,libKey:I,getPreContent:Oe,requiredAccess:["agent"]},e),l.Tools.createIconSearch({name:z,title:"KendoReact Icon Assistant",description:l.ToolDescriptions.iconAssistant,libKey:I,getPostContent:Le,requiredAccess:["assistant","agent"]},e),l.Tools.createCodeAssistant({name:H,title:"KendoReact Component Assistant",description:l.ToolDescriptions.codeAssistant(p),libKey:I,suiteName:p,components:x,componentAliases:{Grid:"DataGrid"},getPostContent:({component:n})=>Ue({component:n}),requiredAccess:["assistant","agent"]},e),l.Tools.createAccessibilityAssistant({name:$e,title:"KendoReact Accessibility Assistant",description:l.ToolDescriptions.accessibilityAssistant(p),libKey:I,suiteName:p,components:x,componentAliases:{Grid:"DataGrid"},requiredAccess:["agent"]},e)].filter(n=>n.hasAccess(t))}var mt=ut(import.meta.url),ht=Be.dirname(mt),gt=Be.resolve(ht,"../package.json"),ft=JSON.parse(pt.readFileSync(gt,"utf-8")),qe=new lt({name:"kendo-mcp",title:"Kendo MCP Server",version:ft.version});async function yt(){let e=new dt;g("Starting server... ");let t=await re(async()=>{let n=(await le())?.entitlement;return n?.Product?.Code||n?.product?.code});t!=="none"&&($.toolNameHeader=t==="agent"||t==="full"?"agent":"assistant",_e($,t).forEach(n=>n.register(qe))),await qe.connect(e)}yt();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-react-mcp",
3
- "version": "1.4.3",
3
+ "version": "1.5.0",
4
4
  "type": "module",
5
5
  "bin": "./dist/index.js",
6
6
  "license": "See LICENSE.md",
@@ -26,8 +26,8 @@
26
26
  "dependencies": {
27
27
  "@grpc/grpc-js": "^1.14.3",
28
28
  "@grpc/proto-loader": "^0.8.0",
29
- "@modelcontextprotocol/sdk": "^1.25.3",
30
- "@progress/kendo-licensing": "^1.9.1",
29
+ "@modelcontextprotocol/sdk": "^1.26.0",
30
+ "@progress/kendo-licensing": "^1.10.1",
31
31
  "tslib": "^2.3.0"
32
32
  },
33
33
  "devDependencies": {