@@ -121,80 +121,6 @@ server.tool({
121121 } ,
122122} )
123123
124- // Tool for showing Data Visualization
125- server . tool ( {
126- name : 'show-data-viz' ,
127- description : 'Display an interactive data visualization' ,
128- inputs : [
129- {
130- name : 'data' ,
131- type : 'string' ,
132- description : 'JSON string of data to visualize' ,
133- required : true ,
134- } ,
135- {
136- name : 'chartType' ,
137- type : 'string' ,
138- description : 'Type of chart (bar, line, pie)' ,
139- required : false ,
140- } ,
141- ] ,
142- fn : async ( params : Record < string , any > ) => {
143- const { data, chartType = 'bar' } = params
144- try {
145- const _chartData = JSON . parse ( data )
146- return `Displayed ${ chartType } chart with data at http://localhost:${ PORT } /mcp-use/widgets/data-visualization`
147- }
148- catch ( error ) {
149- return `Error parsing data: ${ error instanceof Error ? error . message : 'Invalid JSON' } `
150- }
151- } ,
152- } )
153-
154- // Prompt for UI development
155- server . prompt ( {
156- name : 'ui-development' ,
157- description : 'Generate UI development prompts' ,
158- args : [
159- {
160- name : 'component' ,
161- type : 'string' ,
162- description : 'Component name to develop' ,
163- required : true ,
164- } ,
165- {
166- name : 'framework' ,
167- type : 'string' ,
168- description : 'UI framework (react, vue, svelte)' ,
169- required : false ,
170- } ,
171- ] ,
172- fn : async ( params : Record < string , any > ) => {
173- const { component, framework = 'react' } = params
174- return `# ${ framework } Component Development
175-
176- ## Component: ${ component }
177-
178- ### Development Setup
179- 1. Create your component in \`resources/${ component } .tsx\`
180- 2. Add an HTML entry point in \`resources/${ component } .html\`
181- 3. Run \`yarn dev\` to start development server
182- 4. Visit http://localhost:3001/${ component } .html for hot reloading
183-
184- ### Best Practices
185- - Use TypeScript for type safety
186- - Implement proper error boundaries
187- - Add loading states
188- - Make components responsive
189- - Test with different data sets
190-
191- ### MCP Integration
192- - Use \`ui://widget/${ component } \` as the resource URI
193- - Implement proper data binding
194- - Add interactive features
195- - Ensure accessibility compliance`
196- } ,
197- } )
198124
199125console . log ( '🚀 Starting UI MCP Server...' )
200126console . log ( '📋 Server: ui-mcp-server v1.0.0' )
0 commit comments