DHIS2 MCP Server

Instructions

Implementation Reference

• src/index.ts:1070-1077 (handler)

  Handler logic in main server switch statement: extracts args, calls generateUIFormPatterns helper, returns generated code as text content.

  case 'dhis2_generate_ui_form_patterns':
    const formArgs = args as any;
    const formCode = generateUIFormPatterns(formArgs);
    return {
      content: [
        { type: 'text', text: formCode }
      ]
    };

• src/webapp-generators.ts:1228-1349 (helper)

  Core helper function that generates React code for DHIS2 UI form patterns using @dhis2/ui components, supporting validation, date picker, file upload, multi-select etc.

  export function generateUIFormPatterns(args: any): string {
    const { 
      componentName = 'AdvancedForm',
      includeValidation = true,
      includeDatePicker = true,
      includeFileUpload = true,
      includeMultiSelect = true,
      includeSelects = true
    } = args;
  
    return `# @dhis2/ui Form Patterns: ${componentName}
  
  ## Implementation
  \`\`\`jsx
  import React from 'react';
  import {
    Button,
    Field,
    InputField,
    TextAreaField,
    SingleSelectField,
    SingleSelectOption,
    ${includeMultiSelect ? 'MultiSelectField, MultiSelectOption,' : ''}
    ${includeDatePicker ? 'DatePicker,' : ''}
    ${includeFileUpload ? 'FileInput,' : ''}
  } from '@dhis2/ui';
  ${includeValidation ? "import { useState } from 'react';" : ''}
  
  export const ${componentName} = () => {
    ${includeValidation ? 'const [errors, setErrors] = useState<Record<string, string | null>>({});' : ''}
    const [form, setForm] = React.useState({
      name: '',
      description: '',
      valueType: 'NUMBER',
      date: '',
      ${includeMultiSelect ? 'options: [],' : ''}
    });
  
    const onChange = (key, value) => setForm(prev => ({ ...prev, [key]: value }));
  
    const onSubmit = (e) => {
      e.preventDefault();
      ${includeValidation ? `
      const nextErrors: Record<string, string | null> = {};
      if (!form.name?.trim()) nextErrors.name = 'Name is required';
      if (form.name && form.name.length > 50) nextErrors.name = 'Max 50 characters';
      setErrors(nextErrors);
      if (Object.keys(nextErrors).length > 0) return;
      ` : ''}
      // Submit logic here
      console.log('Submitting form', form);
    };
  
    return (
      <form onSubmit={onSubmit} style={{ display: 'grid', gap: 16 }}>
        <InputField
          label="Name"
          name="name"
          value={form.name}
          onChange={({ value }) => onChange('name', value)}
          ${includeValidation ? 'validationText={errors.name || undefined}' : ''}
          ${includeValidation ? 'error={Boolean(errors.name)}' : ''}
          required
        />
  
        <TextAreaField
          label="Description"
          name="description"
          value={form.description}
          onChange={({ value }) => onChange('description', value)}
          rows={4}
        />
  
        ${includeSelects ? `
        <SingleSelectField
          label="Value type"
          selected={form.valueType}
          onChange={({ selected }) => onChange('valueType', selected)}
        >
          <SingleSelectOption value="NUMBER" label="Number" />
          <SingleSelectOption value="INTEGER" label="Integer" />
          <SingleSelectOption value="TEXT" label="Text" />
        </SingleSelectField>
        ` : ''}
  
        ${includeMultiSelect ? `
        <MultiSelectField
          label="Categories"
          selected={form.options}
          onChange={({ selected }) => onChange('options', selected)}
        >
          <MultiSelectOption value="male" label="Male" />
          <MultiSelectOption value="female" label="Female" />
        </MultiSelectField>
        ` : ''}
  
        ${includeDatePicker ? `
        <Field label="Start date">
          <DatePicker
            calendar="gregorian"
            date={form.date}
            onDateSelect={({ date }) => onChange('date', date)}
          />
        </Field>
        ` : ''}
  
        ${includeFileUpload ? `
        <Field label="Attachment">
          <FileInput onChange={({ files }) => onChange('file', files?.[0])} buttonLabel="Choose file" />
        </Field>
        ` : ''}
  
        <Button type="submit" primary>Save</Button>
      </form>
    );
  };
  \`\`\`
  
  ## Notes
  - Includes validation, date picker, file upload, and multi-select patterns.
  - Replace options with dynamic lists as needed.
  `;

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

  Tool permission mapping: requires 'canUseUITools' permission to access.

  ['dhis2_generate_ui_form_patterns', 'canUseUITools'],

• src/index.ts:25-35 (registration)

  Import statement registering the helper function for use in tool handler.

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