dhis2_create_ui_components
Generate customizable UI components for DHIS2 applications, including forms, tables, dashboards, and modals. Supports validation, pagination, search, export, and responsiveness for streamlined development.
Instructions
Generate common UI components using DHIS2 UI library patterns
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the component | |
| componentType | Yes | Type of component to generate | |
| dataIntegration | No | ||
| features | No | ||
| styling | No |
Implementation Reference
- src/index.ts:1057-1067 (handler)MCP tool handler for 'dhis2_create_ui_components'. Receives arguments, calls generateUIComponents from webapp-generators.ts, and returns the generated UI component markdown/documentation as text content.case 'dhis2_create_ui_components': const uiArgs = args as any; const uiComponents = generateUIComponents(uiArgs); return { content: [ { type: 'text', text: uiComponents, }, ], };
- src/webapp-generators.ts:789-827 (helper)Core helper function that generates markdown documentation and code for DHIS2 UI components based on input parameters like componentType (form, table, etc.), dispatches to specific generators via generateComponentCode.export function generateUIComponents(args: any): string { const { componentType, componentName, features = {}, dataIntegration = {}, styling = {} } = args; return `# DHIS2 UI Component: ${componentName} ## Component Implementation ${generateComponentCode(componentType, componentName, features, dataIntegration, styling)} ## Usage Example \`\`\`jsx import { ${componentName} } from './components/${componentName}'; function App() { return ( <div> <${componentName} /> </div> ); } \`\`\` ## Features Included ${Object.entries(features).map(([feature, enabled]) => enabled ? `- ✅ ${feature.replace(/_/g, ' ').toUpperCase()}` : `- ❌ ${feature.replace(/_/g, ' ').toUpperCase()}` ).join('\n')} ## Styling Options - **Theme**: ${styling.theme || 'default'} - **Custom CSS**: ${styling.customCss ? 'Enabled' : 'Disabled'} ${dataIntegration.apiEndpoint ? ` ## API Integration - **Endpoint**: ${dataIntegration.apiEndpoint} - **Data Query**: ${dataIntegration.useDataQuery ? 'Enabled' : 'Disabled'} - **Data Mutation**: ${dataIntegration.useDataMutation ? 'Enabled' : 'Disabled'} ` : ''} `; }
- src/permission-system.ts:141-141 (registration)Tool permission registration in TOOL_PERMISSIONS Map. Associates 'dhis2_create_ui_components' with 'canUseUITools' permission.['dhis2_create_ui_components', 'canUseUITools'],
- src/webapp-generators.ts:829-854 (helper)Dispatcher function that routes to specific component generators (form, table, dashboard, etc.) based on componentType, handling imports and features.function generateComponentCode(componentType: string, componentName: string, features: any, dataIntegration: any, styling: any): string { const baseImports = [ "import React from 'react';", ...(dataIntegration.useDataQuery ? ["import { useDataQuery } from '@dhis2/app-runtime';"] : []), ...(dataIntegration.useDataMutation ? ["import { useDataMutation } from '@dhis2/app-runtime';"] : []) ]; switch (componentType) { case 'form': return generateFormComponent(componentName, features, dataIntegration, baseImports); case 'table': return generateTableComponent(componentName, features, dataIntegration, baseImports); case 'dashboard': return generateDashboardComponent(componentName, features, dataIntegration, baseImports); case 'modal': return generateModalComponent(componentName, features, dataIntegration, baseImports); case 'navigation': return generateNavigationComponent(componentName, features, dataIntegration, baseImports); case 'chart': return generateChartComponent(componentName, features, dataIntegration, baseImports); case 'list': return generateListComponent(componentName, features, dataIntegration, baseImports); default: return generateGenericComponent(componentName, baseImports); } }