Skip to content

feat(common): add support for MCP configuration in component setup #3469

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 2, 2025
Merged

feat(common): add support for MCP configuration in component setup #3469

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion packages/vue-common/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export const $props = {
'tiny_template': [Function, Object],
'tiny_renderless': Function,
'tiny_theme': String,
'tiny_mcp_config': Object,
'tiny_chart_theme': Object
}

Expand All @@ -59,7 +60,17 @@ export const props: Array<
| '_constants'
| 'tiny_theme'
| 'tiny_chart_theme'
> = ['tiny_mode', 'tiny_mode_root', 'tiny_template', 'tiny_renderless', '_constants', 'tiny_theme', 'tiny_chart_theme']
| 'tiny_mcp_config'
> = [
'tiny_mode',
'tiny_mode_root',
'tiny_template',
'tiny_renderless',
'_constants',
'tiny_theme',
'tiny_chart_theme',
'tiny_mcp_config'
]

export const resolveMode = (props, context) => {
let isRightMode = (mode) => ~['pc', 'mobile', 'mobile-first'].indexOf(mode)
Expand Down Expand Up @@ -169,6 +180,22 @@ const getDesignConfig = () => {
}
}

const getComponentMcpConfig = () => {
const mcpConfig = globalMcpConfig.mcpConfig
const componentName = getComponentName().replace($prefix, '')
return mcpConfig?.components?.[componentName]
}

const globalMcpConfig = {
mcpConfig: null,
createMcpTools: null
}

export const registerMcpConfig = (mcpConfig, defineTool) => {
globalMcpConfig.mcpConfig = mcpConfig
globalMcpConfig.createMcpTools = defineTool
}
Comment on lines +194 to +197
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Improve type safety with more specific type definitions.

The function works correctly but uses overly generic types that could lead to runtime errors and poor developer experience.

Consider adding more specific type definitions:

+interface McpConfig {
+  components?: Record<string, any>
+  [key: string]: any
+}
+
+interface McpToolCreator {
+  (vm: any, propConfig: any, componentConfig: any): void
+}
+
-export const registerMcpConfig = (mcpConfig, defineTool) => {
+export const registerMcpConfig = (mcpConfig: McpConfig, defineTool: McpToolCreator) => {
   globalMcpConfig.mcpConfig = mcpConfig
   globalMcpConfig.createMcpTools = defineTool
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export const registerMcpConfig = (mcpConfig, defineTool) => {
globalMcpConfig.mcpConfig = mcpConfig
globalMcpConfig.createMcpTools = defineTool
}
interface McpConfig {
components?: Record<string, any>
[key: string]: any
}
interface McpToolCreator {
(vm: any, propConfig: any, componentConfig: any): void
}
export const registerMcpConfig = (mcpConfig: McpConfig, defineTool: McpToolCreator) => {
globalMcpConfig.mcpConfig = mcpConfig
globalMcpConfig.createMcpTools = defineTool
}
🤖 Prompt for AI Agents 
In packages/vue-common/src/index.ts around lines 194 to 197, the function
registerMcpConfig uses overly generic parameter types which reduces type safety
and developer experience. Update the function signature to use more specific
type definitions for mcpConfig and defineTool based on their expected structures
or interfaces. This will help catch type errors at compile time and improve code
clarity.


export const $setup = ({ props: propData, context, template, extend = {} }) => {
const mode = resolveMode(propData, context)
const view = hooks.computed(() => {
Expand Down Expand Up @@ -277,6 +304,11 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
})
}

const componentMcpConfig = getComponentMcpConfig()
if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) {
globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig)
}
Comment on lines +307 to +310
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Add error handling to prevent component setup crashes.

The conditional logic is well-structured, but the MCP tool creation call could potentially throw errors that would crash the component setup process.

Apply this diff to add error handling:

   const componentMcpConfig = getComponentMcpConfig()
   if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) {
-    globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig)
+    try {
+      globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig)
+    } catch (error) {
+      console.warn('Failed to create MCP tools:', error)
+    }
   }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const componentMcpConfig = getComponentMcpConfig()
if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) {
globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig)
}
const componentMcpConfig = getComponentMcpConfig()
if (componentMcpConfig && props.tiny_mcp_config && globalMcpConfig.createMcpTools) {
try {
globalMcpConfig.createMcpTools(attrs.vm, props.tiny_mcp_config, componentMcpConfig)
} catch (error) {
console.warn('Failed to create MCP tools:', error)
}
}
🤖 Prompt for AI Agents 
In packages/vue-common/src/index.ts around lines 307 to 310, the call to
globalMcpConfig.createMcpTools may throw errors that could crash the component
setup. Wrap this call in a try-catch block to catch any exceptions, log or
handle the error appropriately, and prevent the component from crashing during
setup.


return attrs
}

Expand Down
Loading