API Automation

feuse-mcp provides powerful API automation functionality that can understand backend interface documentation and automatically generate a complete frontend API toolchain, greatly improving development efficiency and ensuring consistency between frontend and backend interfaces.

Tool Overview

api-automation Tool

api-automation is a specialized code generation assistant focused on automatically generating frontend API-related code based on backend API documentation.

Core Capabilities

• 📘 TypeScript Interface Types: Precise type definitions ensuring type safety
• 🔗 API URL Constants: Unified interface address management, avoiding hard coding
• 🎭 Mock Data: Simulation data for development and testing, supporting offline development
• 🚀 Request Functions: Encapsulated API call functions with error handling

Supported API Documentation Formats

• OpenAPI/Swagger specifications
• Postman Collection
• Apifox documentation
• Custom JSON/YAML/MD formats
• Plain text API descriptions

Usage

Basic Call

Please use the api-automation tool to generate code based on the following API documentation:

[Paste complete API documentation content or provide documentation link]

Parameter Description

• apiDocs (required): Complete backend API definition documentation
• Auto-detection: The tool automatically analyzes current project structure and code standards

Generated File Structure

Default Directory Structure

The api-automation tool generates the following structure in the project:

src/
├── apis/              # API type definitions and URL constants
│   └── getUserInfo.ts # User info interface
├── mock/              # Mock data
│   └── getUserInfo.ts # User info simulation data
└── service/           # Request service functions
    └── index.ts       # API call functions

File Naming Convention

• File names: Use the last segment of API URL, converted to camelCase format
  • /api/user/get-user-info → getUserInfo.ts
• Function names: Consistent camelCase format with file names
• Type names: Use PascalCase format with appropriate suffixes
  • GetUserInfoRequest, GetUserInfoResponse

Generated Code Examples

API Type Definition File

Interface definitions and address constants:某个项目/src/apis

• File names are the last part of interface URL in camelCase, like queryOrderStatus.ts
• Code structure reference:

  // User query order status related interface definition
  // path: /panzer_jack/api/v1/user/query_order_status
  // desc: User order placement
  
  export const QUERY_ORDER_STATUS = '/panzer_jack/api/v1/user/query_order_status'
  
  // Request parameter interface
  export interface IQueryOrderStatusReq {
    order_id: string; // Order ID
  }
  
  // Response data interface
  export interface IQueryOrderStatusResp {
    order_id: string; // Order ID
    status: string; // Order status
  }

Mock data: 某个项目/src/mock

• File names are the last part of interface URL in camelCase, like queryOrderStatus.ts
• Code structure reference:

  // mock/queryOrderStatus.ts
  // path: /panzer_jack/api/v1/query_order_status
  // desc: User query order status
  
  import type { IQueryOrderStatusReq } from '@/apis/queryOrderStatus'
  import { QueryOrderStatusErrorCode } from '@/apis/queryOrderStatus'
  
  export default [
    {
      url: '/panzer_jack/api/v1/query_order_status',
      method: 'post',
      response: ({ body }: { body: IQueryOrderStatusReq }) => {
        console.log('Query order status request parameters:', body)
  
        // Validate required parameters
        if (!body.order_id) {
          return {
            code: 400,
            message: 'Missing required parameter order_id',
            data: body
          }
        }
  
        // Simulate random system error (5% probability)
        if (Math.random() < 0.05) {
          return {
            code: QueryOrderStatusErrorCode.SYSTEM_ERROR,
            message: 'Unknown error occurred, please go to order list to confirm if order was placed successfully or cancel (order list display may have 15-minute delay)',
            data: {}
          }
        }
  
        // Simulate different order statuses
        const statusArray = ['pending', 'processing', 'completed', 'cancelled']
        const randomStatus = statusArray[Math.floor(Math.random() * statusArray.length)]
  
        // Normal case, return order status
        return {
          code: 0,
          message: 'Query order status successful',
          data: {
            order_id: body.order_id,
            status: randomStatus
          }
        }
      }
    }
  ]

Communication functions: 某个项目/src/service/index.ts

• Function names are the last part of interface URL in camelCase, like queryOrderStatus.ts
• Code structure reference:

import { QUERY_ORDER_STATUS, type IQueryOrderStatusResp, type IQueryOrderStatusReq } from '@/apis/queryOrderStatus.ts'
// Use existing request libraries and function specifications in current project to generate request functions

Smart Features

Project Structure Adaptation

The tool automatically detects existing project structure and standards:

• Auto-detect API directories: If project already has src/api, src/apis or other API-related directories
• Follow existing naming: Analyze naming patterns of existing files and maintain consistency
• Adapt code style: Generate code that complies with project's ESLint, Prettier configurations
• Framework adaptation: Automatically identify React, Vue, Angular and other frameworks and generate corresponding code styles

Code Standard Compliance

Generated code strictly follows these standards:

• TypeScript type safety: All interfaces have complete type definitions
• Error handling: Includes comprehensive error handling logic
• Code comments: Automatically generate JSDoc comments
• Naming conventions: Follow project naming conventions
• Code formatting: Conform to project formatting rules

Best Practices

1. Documentation Quality

• Ensure API documentation is complete and accurate
• Provide detailed request/response examples
• Use clear naming conventions

2. Code Maintenance

• Regularly regenerate to maintain synchronization
• Separate custom code from generated code
• Use version control to track changes

3. Error Handling

• Implement unified error handling mechanism
• Add request interceptors and response interceptors
• Provide appropriate loading and error states

4. Type Safety

• Enable TypeScript strict mode
• Use generated type definitions
• Avoid using any type