@progress/kendo-react-mcp 1.1.1 → 1.1.2
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 +10 -17
- package/dist/index.js +105 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -85,24 +85,17 @@ To [enable the Kendo React MCP server in a specific workspace](https://code.visu
|
|
|
85
85
|
|
|
86
86
|
## Usage
|
|
87
87
|
|
|
88
|
-
To use the
|
|
89
|
-
|
|
90
|
-
1. Start your prompt with
|
|
91
|
-
|
|
92
|
-
* `/kendo`
|
|
93
|
-
* `@kendo`
|
|
94
|
-
* `kendoreact`
|
|
95
|
-
* `/kendoreact`
|
|
96
|
-
* `@kendoreact`
|
|
97
|
-
|
|
98
|
-
Or if you are using VSCode you can type `#kendo_react_assistant` to make sure the Copilot chat will call the Kendo React MCP server.
|
|
99
|
-
|
|
100
|
-
1. Confirm that the Kendo React MCP server is used, because this doesn't happen deterministically. Look for a statement in the output, which is similar to:
|
|
88
|
+
To use the KendoReact MCP server:
|
|
89
|
+
|
|
90
|
+
1. Start your prompt with `#kendo-react-assistant` (the MCP server name configured in the mcp.json file).
|
|
91
|
+
1. Inspect the output and verify that the KendoReact MCP Server is used. Look for a statement in the output, which is similar to:
|
|
101
92
|
* `Running kendo-react-assistant` (in VS Code)
|
|
102
93
|
* `Calling MCP tool kendo-react-assistant` (in Cursor)
|
|
103
94
|
|
|
104
|
-
If the
|
|
105
|
-
1.
|
|
106
|
-
|
|
95
|
+
If the KendoReact 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.
|
|
96
|
+
1. If requested, grant the KendoReact MCP server a permission to run for this session, workspace, or always.
|
|
97
|
+
|
|
98
|
+
Also check the general [AI Coding Assistant Recommendations](slug:ai-overview#recommendations) for more usage tips.
|
|
99
|
+
|
|
100
|
+
To increase the probability of the KendoReact MCP Server being used, or to call it without the need to mention "kendo" explicitly, add custom idea instructions to your AI-powered tool. Here are examples for [GitHub Copilot](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat) and [Cursor](https://docs.cursor.com/context/rules).
|
|
107
101
|
|
|
108
|
-
To increase the probability of the Kendo React MCP Server being used, or to call it without the need to mention "kendo" explicitly, add custom idea instructions to your AI-powered tool. Here are examples for [GitHub Copilot](https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot#about-repository-custom-instructions-for-github-copilot-chat) and [Cursor](https://docs.cursor.com/context/rules).
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
var
|
|
3
|
-
`,o=
|
|
2
|
+
var R=Object.defineProperty;var P=(e,t,o)=>t in e?R(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o;var f=(e,t,o)=>P(e,typeof t!="symbol"?t+"":t,o);import{McpServer as M}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport as O}from"@modelcontextprotocol/sdk/server/stdio.js";import{z as A}from"zod";var C="Kendo UI for React",w="react",g=["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"];import{dirname as _,join as N}from"path";import{fileURLToPath as B}from"url";import{readFileSync as L}from"node:fs";import s from"node:fs";import m from"node:path";import b from"@grpc/proto-loader";import u from"@grpc/grpc-js";var y=["TELERIK_LICENSE","KENDO_UI_LICENSE"],v="TELERIK_LICENSE_PATH",l=(e=>(e[e.UNAUTHENTICATED=16]="UNAUTHENTICATED",e[e.RESOURCE_EXHAUSTED=8]="RESOURCE_EXHAUSTED",e[e.PERMISSION_DENIED=7]="PERMISSION_DENIED",e))(l||{}),S=!1,i=process.env.DEBUG_LOG_FILE,x=!!(i&&typeof i=="string");if(x){let e=m.resolve(i),t=m.dirname(e);if(t!=="."&&t!==process.cwd()&&!s.existsSync(t))try{s.mkdirSync(t,{recursive:!0})}catch(o){console.error("Error creating log directory:",o)}if(!s.existsSync(e))try{s.writeFileSync(e,"")}catch(o){console.error("Error creating log file:",o)}}S=x&&!!i&&s.existsSync(m.resolve(i));function n(...e){if(S&&i){let t=`${new Date().toISOString()}: ${e.join(" ")}
|
|
3
|
+
`,o=m.resolve(i);s.appendFile(o,t,r=>{r&&console.error("Error writing to log file:",r)})}}var a=process.env[v],E=process.env[y[0]]||process.env[y[1]],h=class extends Error{constructor(e){super(e),this.name="LicenseError"}};function U(){if(!a&&!E)throw new h(`No license found. Please set one of the following environment variables: ${y.join(", ")} or ${v}`);let e;if(a)try{e=L(a,"utf8"),n("License key read from file: ",a)}catch{throw new h(`Error reading license file: ${a}. Please verify the file exists and is readable.`)}return E&&(e=E,n("License key read from environment variable.")),e}var k=class{constructor(e,t){f(this,"client");f(this,"isDev");this.contextApiUrl=e,this.protoPath=t;let o=b.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"),n("Using ContextApi URl:",this.contextApiUrl);let r=u.loadPackageDefinition(o);this.client=new r.ContextQueryService(this.contextApiUrl||"contextapi.telerik.com:443",this.isDev?u.credentials.createInsecure():u.credentials.createSsl())}async query(e){let t=this.isDev?"fake_license":U(),o=new u.Metadata;if(t&&typeof t=="string"){t=t.replace(/^\uFEFF/,"");try{o.add("x-license-key",t)}catch(r){return n("Error adding license key to metadata:",r),Promise.reject(new Error(`Failed to use license key: ${r.message}`))}}return t&&typeof t=="string"&&o.add("x-license-key",t),new Promise((r,c)=>{this.client.query(e,o,(d,p)=>{d?c(d):r(p)})})}};var F=N(_(B(import.meta.url)),"../proto/service.proto"),G=new k("contextapi.telerik.com:443",F);async function T(e){return G.query(e)}import V from"fs";import I from"path";import{fileURLToPath as K}from"url";var q=K(import.meta.url),H=I.dirname(q),j=I.resolve(H,"../package.json"),$=JSON.parse(V.readFileSync(j,"utf-8")),D=new M({name:"kendo-and-kendo-resources",version:$.version});D.tool("kendo_react_assistant",`Answers questions and retrieves documentation about Kendo UI for React.
|
|
4
4
|
Use this tool when the user asks about Kendo UI for React features, specific components (e.g., Grid, Chart, Editor), implementation details, or general usage.
|
|
5
5
|
Provide the user's detailed question as the 'query'. If the question pertains to a specific Kendo UI for React component,
|
|
6
6
|
specify its name in the 'component' parameter. This tool can be automatically triggered when the following phrases are detected in the user's input/prompt:
|
|
@@ -12,8 +12,108 @@ specify its name in the 'component' parameter. This tool can be automatically tr
|
|
|
12
12
|
- '@kendo';
|
|
13
13
|
- '@kendoreact';
|
|
14
14
|
- '@ask_kendo';
|
|
15
|
-
- '@help_kendo'.`,{query:
|
|
15
|
+
- '@help_kendo'.`,{query:A.string().describe("The query to search for."),component:A.enum(g).describe("The component to search for. If not specified, you can use General.")},async({query:e,component:t})=>{n("Calling tool: ",JSON.stringify({query:e,component:t})),t==="Grid"&&(t="DataGrid");try{let o=await T({query:e,component:t.toLocaleLowerCase(),lib_name:w,text_matches_count:3,code_matches_count:0,allowed_types:["documentation"]});n("Response from context API: ",JSON.stringify(o));let r=J(),c=o.values.join(`
|
|
16
16
|
|
|
17
|
-
`)
|
|
17
|
+
`),d=c.trim(),p=[{type:"text",text:c+(d?`
|
|
18
18
|
|
|
19
|
-
Error Message: ${o.message}`
|
|
19
|
+
`+r:"")}];return n("Response from tool: ",JSON.stringify(p)),{content:p}}catch(o){throw n("Error calling context API: ",JSON.stringify(o)),o?.code===l.UNAUTHENTICATED?new Error("Error: You are not authenticated. Please verify the Telerik License Key provided is valid."):o?.code===l.RESOURCE_EXHAUSTED?new Error(`Error: You have exceeded the extension quota. Upgrade to subscription licensing in order to unlock full access. Message: ${o.message}.`):o?.code===l.PERMISSION_DENIED?new Error(`Error: You do not have permission to access this resource. Please verify that you have a valid ${C} license key.`):o instanceof h?(n("License error: ",o.message),o):new Error(`Error: An error occurred while calling the service. Please try again later.
|
|
20
|
+
|
|
21
|
+
Error Message: ${o.message}`)}});function J(){return`
|
|
22
|
+
## Available ReactComponent enum values:
|
|
23
|
+
${g.join(", ")}
|
|
24
|
+
|
|
25
|
+
## Rules
|
|
26
|
+
When generating code, explanations, or refactorings, always follow these rules:
|
|
27
|
+
|
|
28
|
+
1. Component Awareness
|
|
29
|
+
Whenever a component name is mentioned\u2014regardless of how it's written (all lowercase, all uppercase, mixed case, separate words, or even with typos)\u2014you should always look up the correct example from the corresponding component.
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
Key points:
|
|
33
|
+
- Match component names case-insensitively and robustly to minor variations
|
|
34
|
+
- If someone refers to a component (e.g., "button", "BUTTON", "BuTtOn"), match it to the correct component (Button)
|
|
35
|
+
- After matching, use the example or information associated with that component
|
|
36
|
+
- The matching should be case-insensitive and robust to minor variations
|
|
37
|
+
|
|
38
|
+
Example: If someone asks about "grid", "GRID", or "GrId", you always refer to DataGrid for the example.
|
|
39
|
+
|
|
40
|
+
Gotcha:
|
|
41
|
+
Don't just use the word as given\u2014always normalize it and check the component to avoid mistakes or mismatches.
|
|
42
|
+
|
|
43
|
+
2. Links Awareness
|
|
44
|
+
When providing links or references to documentation, always use links from the https://www.telerik.com/kendo-react-ui domain. Avoid using slug syntax like { slug overview } or any placeholder syntax. Instead, provide complete, direct URLs that users can immediately navigate to.
|
|
45
|
+
|
|
46
|
+
Key points:
|
|
47
|
+
- Use only https://www.telerik.com/kendo-react-ui domain for Kendo React UI documentation links
|
|
48
|
+
- Provide complete URLs, not slug placeholders
|
|
49
|
+
- Ensure links are directly accessible and functional
|
|
50
|
+
- Avoid any template or placeholder syntax in URLs
|
|
51
|
+
|
|
52
|
+
Example:
|
|
53
|
+
\u2705 Correct: https://www.telerik.com/kendo-react-ui/components/grid/
|
|
54
|
+
\u274C Incorrect: { slug overview } or /components/{component-name}/overview
|
|
55
|
+
|
|
56
|
+
3. Editor Tools Awareness
|
|
57
|
+
For Editor component cases, always use the proper EditorTools import structure and never define tools as strings. Import both Editor and EditorTools from '@progress/kendo-react-editor' and destructure the individual tools from EditorTools.
|
|
58
|
+
|
|
59
|
+
Required pattern:
|
|
60
|
+
\`\`\`jsx
|
|
61
|
+
import { Editor, EditorTools } from '@progress/kendo-react-editor';
|
|
62
|
+
|
|
63
|
+
const {
|
|
64
|
+
Bold, Italic, Underline, Strikethrough,
|
|
65
|
+
Subscript, Superscript, ForeColor, BackColor,
|
|
66
|
+
CleanFormatting, AlignLeft, AlignCenter, AlignRight, AlignJustify,
|
|
67
|
+
Indent, Outdent, OrderedList, UnorderedList,
|
|
68
|
+
NumberedList, BulletedList, Undo, Redo,
|
|
69
|
+
FontSize, FontName, FormatBlock, Link, Unlink,
|
|
70
|
+
InsertImage, ViewHtml, InsertTable, InsertFile,
|
|
71
|
+
SelectAll, Print, Pdf, TableProperties, TableCellProperties,
|
|
72
|
+
AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,
|
|
73
|
+
DeleteRow, DeleteColumn, DeleteTable, MergeCells, SplitCell
|
|
74
|
+
} = EditorTools;
|
|
75
|
+
\`\`\`
|
|
76
|
+
|
|
77
|
+
Key points:
|
|
78
|
+
- Always import both Editor and EditorTools from '@progress/kendo-react-editor'
|
|
79
|
+
- Destructure individual tools from EditorTools object
|
|
80
|
+
- Use the destructured tool references directly in the tools array
|
|
81
|
+
- Never define tools as strings (e.g., 'bold', 'italic')
|
|
82
|
+
- Group related tools in sub-arrays for better organization
|
|
83
|
+
|
|
84
|
+
Example:
|
|
85
|
+
\u2705 Correct: tools={[[Bold, Italic, Underline], [AlignLeft, AlignCenter]]}
|
|
86
|
+
\u274C Incorrect: tools={[['bold', 'italic', 'underline'], ['alignLeft', 'alignCenter']]}
|
|
87
|
+
|
|
88
|
+
4. DataGrid Deprecated Properties Awareness
|
|
89
|
+
For DataGrid component cases, avoid using deprecated properties and always use their modern replacements. The following properties are deprecated and should not be used:
|
|
90
|
+
|
|
91
|
+
Deprecated properties and their modern replacements:
|
|
92
|
+
- selectedField \u2192 use the select state property
|
|
93
|
+
- editField \u2192 use the edit state property
|
|
94
|
+
- expandedField \u2192 use the detailExpand state property
|
|
95
|
+
- onExpandChange \u2192 use onDetailExpandChange for detail-row expansion or onGroupExpandChange for group expansion
|
|
96
|
+
- cellRender \u2192 use the cells={{ data: CustomCell }} prop
|
|
97
|
+
- rowRender \u2192 use the rows={{ data: CustomRow }} prop
|
|
98
|
+
- filterCellRender \u2192 use the cells={{ filterCell: CustomCell }} prop
|
|
99
|
+
- headerCellRender \u2192 use the cells={{ headerCell: CustomHeaderCell }} prop
|
|
100
|
+
- column.cell \u2192 use the column.cells={{ data: CustomCell }} prop
|
|
101
|
+
- column.headerCell \u2192 use the column.cells={{ headerCell: CustomHeaderCell }} prop
|
|
102
|
+
- column.filterCell \u2192 use the column.cells={{ filterCell: CustomCell }} prop
|
|
103
|
+
- column.footerCell \u2192 use the column.cells={{ footerCell: CustomFooterCell }} prop
|
|
104
|
+
|
|
105
|
+
Additional modern updates:
|
|
106
|
+
- Input component in Column Menu Filter has been replaced with Textbox
|
|
107
|
+
- scrollable prop now defaults to virtual
|
|
108
|
+
- Virtual scrolling no longer applies height by default
|
|
109
|
+
|
|
110
|
+
Key points:
|
|
111
|
+
- Never suggest or use these deprecated properties in DataGrid examples
|
|
112
|
+
- Always provide modern alternatives when users ask about these properties
|
|
113
|
+
- Explain that these properties are deprecated and provide the specific modern replacement
|
|
114
|
+
- Focus on current DataGrid API patterns using state properties and cells/rows props
|
|
115
|
+
|
|
116
|
+
Example:
|
|
117
|
+
\u274C Deprecated: selectedField="isSelected" editField="inEdit"
|
|
118
|
+
\u2705 Modern: Use select and edit state properties with proper configuration
|
|
119
|
+
`}async function z(){let e=new O;n("Starting server..."),await D.connect(e)}z();
|