McFlow

Instructions

Implementation Reference

• src/tools/handler.ts:387-441 (handler)

  The main tool handler for 'generate_app'. Parses input arguments, creates an AppGenerator instance with the project path, calls generateApp with config, handles success/error responses with detailed user feedback including next steps.

  case 'generate_app':
    const appName = args?.name as string;
    const stages = args?.stages as string[] || ['created', 'processing', 'review', 'completed'];
    const features = args?.features || {
      dashboard: true,
      api: true,
      database: true,
      webhooks: true,
      approvals: false
    };
  
    // Get project path (parent of workflows directory)
    const projectPath = path.dirname(this.workflowsPath);
  
    // Create app generator
    const appGenerator = new AppGenerator(projectPath);
  
    try {
      await appGenerator.generateApp({
        name: appName,
        projectPath,
        features,
        stages
      });
  
      return {
        content: [{
          type: 'text',
          text: `✅ Successfully generated Next.js app: ${appName}\\n\\n` +
            `📁 Location: ${path.join(projectPath, appName)}\\n\\n` +
            `Features included:\\n` +
            `• Dashboard: ${features.dashboard ? 'Yes' : 'No'}\\n` +
            `• API Endpoints: ${features.api ? 'Yes' : 'No'}\\n` +
            `• Database (SQLite): ${features.database ? 'Yes' : 'No'}\\n` +
            `• Webhook Receivers: ${features.webhooks ? 'Yes' : 'No'}\\n` +
            `• Approval System: ${features.approvals ? 'Yes' : 'No'}\\n\\n` +
            `Pipeline Stages: ${stages.join(' → ')}\\n\\n` +
            `Next steps:\\n` +
            `1. cd ${appName}\\n` +
            `2. npm install\\n` +
            `3. npm run dev\\n\\n` +
            `The app will be available at http://localhost:3000\\n\\n` +
            `To integrate with n8n workflows:\\n` +
            `• Use the tracking system: mcflow add_tracking --storageUrl http://localhost:3000\\n` +
            `• Or add HTTP Request nodes manually to your workflows`
        }]
      };
    } catch (error: any) {
      return {
        content: [{
          type: 'text',
          text: `❌ Failed to generate app: ${error.message}`
        }]
      };
    }

• src/tools/registry.ts:519-558 (schema)

  Input schema for the generate_app tool, specifying required 'name' parameter and optional 'stages' array and 'features' object with booleans for dashboard, api, database, webhooks, approvals.

  inputSchema: {
    type: 'object',
    properties: {
      name: {
        type: 'string',
        description: 'Name of the app directory (e.g., "app", "dashboard")',
      },
      stages: {
        type: 'array',
        items: { type: 'string' },
        description: 'Workflow stages for pipeline view (default: created, processing, review, completed)',
      },
      features: {
        type: 'object',
        properties: {
          dashboard: {
            type: 'boolean',
            description: 'Include dashboard with stats and tables',
          },
          api: {
            type: 'boolean',
            description: 'Include API endpoints for workflow integration',
          },
          database: {
            type: 'boolean',
            description: 'Include SQLite database setup',
          },
          webhooks: {
            type: 'boolean',
            description: 'Include webhook receivers for n8n',
          },
          approvals: {
            type: 'boolean',
            description: 'Include approval/reject functionality',
          },
        },
        description: 'Features to include in the app',
      },
    },
    required: ['name'],

• src/tools/registry.ts:516-560 (registration)

  Registration of the 'generate_app' tool in the MCP tools definitions array exported by getToolDefinitions().

  {
    name: 'generate_app',
    description: 'Generate a Next.js app for managing workflow data within the current project',
    inputSchema: {
      type: 'object',
      properties: {
        name: {
          type: 'string',
          description: 'Name of the app directory (e.g., "app", "dashboard")',
        },
        stages: {
          type: 'array',
          items: { type: 'string' },
          description: 'Workflow stages for pipeline view (default: created, processing, review, completed)',
        },
        features: {
          type: 'object',
          properties: {
            dashboard: {
              type: 'boolean',
              description: 'Include dashboard with stats and tables',
            },
            api: {
              type: 'boolean',
              description: 'Include API endpoints for workflow integration',
            },
            database: {
              type: 'boolean',
              description: 'Include SQLite database setup',
            },
            webhooks: {
              type: 'boolean',
              description: 'Include webhook receivers for n8n',
            },
            approvals: {
              type: 'boolean',
              description: 'Include approval/reject functionality',
            },
          },
          description: 'Features to include in the app',
        },
      },
      required: ['name'],
    },
  },

• src/app/generator.ts:24-49 (helper)

  Core generateApp method of AppGenerator class. Orchestrates creation of Next.js app: checks existence, creates directories, generates package.json, DB schema, API routes, dashboard pages, components, styles, env files, and gitignore.

  async generateApp(config: AppConfig): Promise<void> {
    const appPath = path.join(this.projectPath, config.name);
  
    // Check if app already exists
    try {
      await fs.access(appPath);
      throw new Error(`App directory ${config.name} already exists`);
    } catch (error: any) {
      if (error.code !== 'ENOENT') throw error;
    }
  
    // Create app structure
    await this.createAppStructure(appPath);
  
    // Generate files based on features
    await this.generatePackageJson(appPath, config);
    await this.generateDatabaseSchema(appPath);
    await this.generateApiEndpoints(appPath, config);
    await this.generateDashboard(appPath, config);
    await this.generateComponents(appPath, config);
    await this.generateStyles(appPath);
    await this.generateEnvFile(appPath);
  
    // Initialize git ignore
    await this.generateGitIgnore(appPath);
  }

• src/app/generator.ts:5-16 (schema)

  TypeScript interface AppConfig defining the configuration structure passed to generateApp method, matching the tool input schema.

  export interface AppConfig {
    name: string;
    projectPath: string;
    features?: {
      dashboard?: boolean;
      api?: boolean;
      database?: boolean;
      webhooks?: boolean;
      approvals?: boolean;
    };
    stages?: string[];
  }