UI Workflow Builder

Instructions

Implementation Reference

• src/tools/ui/ui-workflow-builder-tool.ts:22-101 (schema)

  Comprehensive Zod input schema defining all parameters for creating UI workflows including steps, transitions, roles, notifications, escalation, and integrations.

  const UIWorkflowBuilderSchema = {
      workflowType: z.string().describe("Type of workflow (e.g., 'approval', 'onboarding', 'order-processing')"),
      title: z.string().describe("Workflow title"),
      description: z.string().optional().describe("Workflow description"),
      steps: z.array(z.object({
          id: z.string().describe("Unique step identifier"),
          name: z.string().describe("Step display name"),
          description: z.string().optional().describe("Step description"),
          component: z.enum(['form', 'approval', 'notification', 'decision', 'data-entry', 'review', 'custom']).describe("Step component type"),
          config: z.object({
              entityType: z.string().optional().describe("SAP entity type for data operations"),
              formFields: z.array(z.object({
                  name: z.string(),
                  label: z.string(),
                  type: z.string(),
                  required: z.boolean().optional(),
                  validation: z.record(z.any()).optional()
              })).optional().describe("Form fields for form components"),
              approvers: z.array(z.object({
                  role: z.string(),
                  required: z.boolean().optional(),
                  escalationTime: z.number().optional()
              })).optional().describe("Approvers for approval components"),
              conditions: z.array(z.object({
                  field: z.string(),
                  operator: z.enum(['equals', 'not_equals', 'greater_than', 'less_than', 'contains']),
                  value: z.any()
              })).optional().describe("Conditions for decision components"),
              template: z.string().optional().describe("Custom template for notifications"),
              dataSource: z.object({
                  entitySet: z.string().optional(),
                  query: z.record(z.any()).optional()
              }).optional().describe("Data source configuration")
          }).optional().describe("Step-specific configuration"),
          validators: z.array(z.object({
              type: z.enum(['required', 'format', 'business', 'approval']),
              config: z.record(z.any()).optional()
          })).optional().describe("Step validation rules"),
          actions: z.array(z.object({
              type: z.enum(['validate', 'save', 'execute', 'navigate', 'notify', 'approve', 'reject']),
              target: z.string().optional(),
              condition: z.string().optional(),
              config: z.record(z.any()).optional()
          })).optional().describe("Step actions"),
          timeout: z.number().optional().describe("Step timeout in seconds"),
          parallel: z.boolean().optional().describe("Allow parallel execution")
      })).describe("Workflow steps"),
      transitions: z.record(z.record(z.string())).optional().describe("Step transition rules"),
      roles: z.array(z.object({
          id: z.string(),
          name: z.string(),
          permissions: z.array(z.string()),
          steps: z.array(z.string()).optional().describe("Steps this role can access")
      })).optional().describe("Workflow roles and permissions"),
      persistence: z.enum(['localStorage', 'sessionStorage', 'server', 'sap']).optional().describe("Data persistence method"),
      notifications: z.object({
          email: z.boolean().optional(),
          sms: z.boolean().optional(),
          push: z.boolean().optional(),
          sapInbox: z.boolean().optional()
      }).optional().describe("Notification settings"),
      escalation: z.object({
          enabled: z.boolean(),
          timeouts: z.record(z.number()).optional(),
          escalationChain: z.array(z.string()).optional()
      }).optional().describe("Escalation configuration"),
      analytics: z.object({
          trackStepTime: z.boolean().optional(),
          trackUserActions: z.boolean().optional(),
          generateReports: z.boolean().optional()
      }).optional().describe("Analytics configuration"),
      integration: z.object({
          sapWorkflowService: z.boolean().optional(),
          externalApi: z.string().optional(),
          webhooks: z.array(z.object({
              event: z.string(),
              url: z.string()
          })).optional()
      }).optional().describe("External system integration")
  };

• src/tools/ui/ui-workflow-builder-tool.ts:124-174 (registration)

  Tool registration method that registers 'ui-workflow-builder' with MCP server, including title, detailed description, input schema, and handler function.

      public async register(): Promise<void> {
          this.mcpServer.registerTool(
              "ui-workflow-builder",
              {
                  title: "UI Workflow Builder",
                  description: `Create visual workflow processes with step-by-step forms and approvals.
  
  Features:
  - Visual workflow designer with drag-and-drop interface
  - Multiple step types (forms, approvals, decisions, notifications)
  - Role-based access control and permissions
  - Conditional branching and parallel execution
  - Integration with SAP Workflow Service
  - Email, SMS, and push notifications
  - Escalation and timeout handling
  - Real-time progress tracking
  - Analytics and reporting
  - Mobile-responsive design
  - Audit trail and compliance
  
  Required scope: ui.workflows
  
  Step Types:
  - form: Data entry forms with validation
  - approval: Multi-level approval processes
  - notification: Email/SMS notifications
  - decision: Conditional branching based on data
  - data-entry: Direct SAP data manipulation
  - review: Data review and verification
  - custom: Custom HTML/JavaScript components
  
  Workflow Types:
  - approval: Document/request approval flows
  - onboarding: Employee/customer onboarding
  - order-processing: Order fulfillment workflows
  - incident-management: Issue resolution processes
  - change-request: Change management workflows
  
  Examples:
  - Purchase approval: {"workflowType": "approval", "steps": [...]}
  - Employee onboarding: {"workflowType": "onboarding", "title": "New Employee Setup"}
  - Order processing: {"workflowType": "order-processing", "integration": {...}}`,
                  inputSchema: UIWorkflowBuilderSchema
              },
              async (args: Record<string, unknown>) => {
                  return await this.handleWorkflowBuilding(args);
              }
          );
  
          this.logger.info("✅ UI Workflow Builder tool registered successfully");
      }

• src/tools/ui/ui-workflow-builder-tool.ts:176-272 (handler)

  Primary handler function that executes the tool: validates input, checks authorization, validates workflow structure, enhances steps, generates UI components, integrates SAP features, and returns formatted response with HTML/CSS/JS.

  private async handleWorkflowBuilding(args: unknown): Promise<any> {
      try {
          // Validate input parameters
          const params = z.object(UIWorkflowBuilderSchema).parse(args);
  
          this.logger.info(`🔄 Building workflow: ${params.title} (${params.workflowType}) with ${params.steps.length} steps`);
  
          // Check authentication and authorization
          const authCheck = await this.checkUIAccess('ui.workflows');
          if (!authCheck.hasAccess) {
              return {
                  content: [{
                      type: "text",
                      text: `❌ Authorization denied: ${authCheck.reason || 'Access denied for UI workflow building'}\n\nRequired scope: ui.workflows`
                  }]
              };
          }
  
          // Step 1: Validate workflow structure
          const validationResult = await this.validateWorkflowStructure(params);
          if (!validationResult.valid) {
              return {
                  content: [{
                      type: "text",
                      text: `❌ Workflow validation failed:\n${validationResult.errors.join('\n')}`
                  }]
              };
          }
  
          // Step 2: Prepare workflow steps with enhanced configurations
          const enhancedSteps = await this.enhanceWorkflowSteps(params.steps);
  
          // Step 3: Create transition rules
          const transitionRules = this.createTransitionRules(enhancedSteps, params.transitions);
  
          // Step 4: Create workflow configuration
          const workflowConfig: WorkflowConfig = {
              workflowType: params.workflowType,
              steps: enhancedSteps,
              transitions: transitionRules,
              persistence: params.persistence || 'localStorage'
          };
  
          // Step 5: Generate workflow UI
          const workflowResult = await this.componentLibrary.generateWorkflowBuilder(workflowConfig);
  
          // Step 6: Add SAP-specific enhancements
          const enhancedResult = await this.enhanceWorkflowResult(workflowResult, params);
  
          // Step 7: Prepare response
          const response = this.createWorkflowResponse(enhancedResult, params, enhancedSteps);
  
          this.logger.info(`✅ Workflow '${params.title}' built successfully`);
  
          return {
              content: [
                  {
                      type: "text",
                      text: `# ${params.title}\n\n` +
                            `${params.description || `Visual ${params.workflowType} workflow with step-by-step process`}\n\n` +
                            `## Workflow Overview:\n` +
                            `- Type: ${params.workflowType}\n` +
                            `- Steps: ${params.steps.length}\n` +
                            `- Roles: ${params.roles?.length || 0}\n` +
                            `- Persistence: ${params.persistence || 'localStorage'}\n` +
                            `- Notifications: ${this.getNotificationSummary(params.notifications)}\n` +
                            `- Escalation: ${params.escalation?.enabled ? '✅' : '❌'}\n\n` +
                            `## Workflow Steps:\n` +
                            params.steps.map((step, index) =>
                                `${index + 1}. **${step.name}** (${step.component})\n   ${step.description || 'No description'}`
                            ).join('\n') + '\n\n' +
                            `## Features:\n` +
                            `- Visual Progress Indicator: ✅\n` +
                            `- Role-based Access Control: ${params.roles?.length ? '✅' : '❌'}\n` +
                            `- Conditional Branching: ${enhancedSteps.some(s => s.transitions) ? '✅' : '❌'}\n` +
                            `- Integration: ${params.integration ? Object.keys(params.integration).join(', ') : 'None'}\n` +
                            `- Analytics: ${params.analytics?.trackStepTime ? '✅' : '❌'}\n\n` +
                            `Start the workflow by clicking the 'Begin Process' button in the generated interface.`
                  },
                  {
                      type: "resource",
                      data: response,
                      mimeType: "application/json"
                  }
              ]
          };
  
      } catch (error) {
          this.logger.error(`❌ Failed to build workflow`, error as Error);
          return {
              content: [{
                  type: "text",
                  text: `❌ Failed to build workflow: ${(error as Error).message}`
              }]
          };
      }
  }

• src/middleware/authentication-validator.ts:123-129 (registration)

  Scope mapping registration for UI tools in authentication validator, mapping 'ui-workflow-builder' to required 'ui.workflows' scope.

  const scopeMapping: Record<string, string> = {
    'ui-form-generator': 'ui.forms',
    'ui-data-grid': 'ui.grids',
    'ui-dashboard-composer': 'ui.dashboards',
    'ui-workflow-builder': 'ui.workflows',
    'ui-report-builder': 'ui.reports',
  };

• src/middleware/mcp-auth.ts:613-618 (registration)

  Scope mapping for authorization in MCP auth manager, defining 'ui-workflow-builder' requires 'ui.workflows' scope.

    'ui-form-generator': 'ui.forms',
    'ui-data-grid': 'ui.grids',
    'ui-dashboard-composer': 'ui.dashboards',
    'ui-workflow-builder': 'ui.workflows',
    'ui-report-builder': 'ui.reports',
  };