dhis2_create_ui_components
Generate UI components for DHIS2 applications using the official UI library. Create forms, tables, dashboards, and other interface elements with built-in data integration, validation, and responsive design features.
Instructions
Generate common UI components using DHIS2 UI library patterns
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| componentType | Yes | Type of component to generate | |
| componentName | Yes | Name of the component | |
| features | No | ||
| dataIntegration | No | ||
| styling | No |
Implementation Reference
- src/index.ts:1057-1067 (handler)Main handler for the 'dhis2_create_ui_components' tool call. Receives arguments, invokes generateUIComponents from webapp-generators.ts, and returns generated 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 with DHIS2 UI component code (React/@dhis2/ui). Dispatches to type-specific generators (form, table, etc.) based on componentType.
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)Registers the tool in TOOL_PERMISSIONS map, requiring 'canUseUITools' permission for access control.
['dhis2_create_ui_components', 'canUseUITools'],