DHIS2 MCP Server

Instructions

Implementation Reference

• src/index.ts:1079-1086 (handler)

  Handler dispatch for the tool: calls generateUIDataDisplayPatterns with input args and returns the generated code as text content.

  case 'dhis2_generate_ui_data_display':
    const displayArgs = args as any;
    const displayCode = generateUIDataDisplayPatterns(displayArgs);
    return {
      content: [
        { type: 'text', text: displayCode }
      ]
    };

• src/webapp-generators.ts:1352-1441 (helper)

  Core implementation: Generates React code snippets using @dhis2/ui components for data display patterns including tables, cards, lists, modals, pagination, and loading states.

  export function generateUIDataDisplayPatterns(args: any): string {
    const {
      componentName = 'DataDisplay',
      includeTable = true,
      includePagination = true,
      includeCards = true,
      includeLists = true,
      includeModal = true,
      includeLoading = true
    } = args;
  
    return `# @dhis2/ui Data Display Patterns: ${componentName}
  
  ## Implementation
  \`\`\`jsx
  import React from 'react';
  import {
    DataTable, DataTableHead, DataTableRow, DataTableColumnHeader, DataTableBody, DataTableCell,
    Card, Modal, ModalTitle, ModalContent, ModalActions, Button,
    ${includeLoading ? 'CircularLoader,' : ''}
  } from '@dhis2/ui';
  
  export const ${componentName} = ({ items = [], loading = false }) => {
    const [open, setOpen] = React.useState(false);
  
    if (loading) {
      return ${includeLoading ? '<CircularLoader />' : '<div>Loading...</div>'};
    }
  
    return (
      <div style={{ display: 'grid', gap: 16 }}>
        ${includeTable ? `
        <DataTable>
          <DataTableHead>
            <DataTableRow>
              <DataTableColumnHeader>Name</DataTableColumnHeader>
              <DataTableColumnHeader>Type</DataTableColumnHeader>
            </DataTableRow>
          </DataTableHead>
          <DataTableBody>
            {items.map((it) => (
              <DataTableRow key={it.id}>
                <DataTableCell>{it.displayName}</DataTableCell>
                <DataTableCell>{it.valueType}</DataTableCell>
              </DataTableRow>
            ))}
          </DataTableBody>
        </DataTable>
        ${includePagination ? `<div style={{ textAlign: 'center' }}><Button>Prev</Button> <Button>Next</Button></div>` : ''}
        ` : ''}
  
        ${includeCards ? `
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          {items.slice(0, 4).map((it) => (
            <Card key={it.id}>
              <div style={{ padding: 16 }}>
                <h3 style={{ margin: '0 0 8px' }}>{it.displayName}</h3>
                <div>Type: {it.valueType}</div>
              </div>
            </Card>
          ))}
        </div>
        ` : ''}
  
        ${includeLists ? `
        <ul>
          {items.slice(0, 5).map((it) => (
            <li key={it.id}>{it.displayName}</li>
          ))}
        </ul>
        ` : ''}
  
        ${includeModal ? `
        <>
          <Button onClick={() => setOpen(true)}>Open modal</Button>
          <Modal open={open} onClose={() => setOpen(false)}>
            <ModalTitle>Details</ModalTitle>
            <ModalContent>Modal content here</ModalContent>
            <ModalActions>
              <Button secondary onClick={() => setOpen(false)}>Close</Button>
            </ModalActions>
          </Modal>
        </>
        ` : ''}
      </div>
    );
  };
  \`\`\`
  `;
  }

• src/permission-system.ts:171-178 (registration)

  Tool permission registration: Maps the tool to 'canUseUITools' permission in TOOL_PERMISSIONS allowing access control.

    ['dhis2_generate_ui_data_display', 'canUseUITools'],
    ['dhis2_generate_ui_navigation_layout', 'canUseUITools'],
    ['dhis2_generate_design_system', 'canUseUITools'],
    ['android_generate_material_form', 'canUseMobileFeatures'],
    ['android_generate_list_adapter', 'canUseMobileFeatures'],
    ['android_generate_navigation_drawer', 'canUseMobileFeatures'],
    ['android_generate_bottom_sheet', 'canUseMobileFeatures'],
  ]);

• src/index.ts:27-35 (helper)

  Import statement for the generateUIDataDisplayPatterns helper function from webapp-generators.

    generateUIDataDisplayPatterns,
    generateUINavigationLayout,
    generateDesignSystemConfig,
    generateAndroidMaterialForm,
    generateAndroidListAdapter,
    generateAndroidNavigationDrawer,
    generateAndroidBottomSheet,
    generateTestSetup
  } from './webapp-generators.js';