How AI Can Supercharge Front‑Back End Integration and Mock Data Generation

1. Background

Currently, self‑testing and integration between front‑end and back‑end take a long time. The main time‑consuming steps are interface entry, converting interfaces to front‑end code, and mock data generation. In an ideal scenario, integration should be as smooth as two matching gears, requiring a redesign of tools and processes to embed AI capabilities for more efficient self‑testing and integration.

Existing problems include untimely interface documentation leading to mismatched understanding, low‑efficiency manual code writing, unrealistic mock data, and heavy communication overhead during integration, which affect development speed, code quality, and overall delivery.

2. Project Goals

Use AI to improve the entire workflow from interface definition to integration, significantly reducing the proportion of development time spent on self‑testing and integration.

Expected outcomes: AI‑driven intelligent generation and maintenance of interface documentation, automated code generation, and more realistic mock data, enabling seamless front‑back integration, reducing communication and debugging time, and achieving a qualitative boost in development efficiency.

3. Project Plan

We plan to leverage AI around the interface platform (ZAPI) and IDE (Cursor) to cover the whole process from interface definition to self‑testing and integration.

Traditional workflow involves writing a rough document, then both front‑end and back‑end generate code based on it, with repeated work. By integrating AI, we restructure the process and embed it into our core toolchain (Cursor + ZAPI).

Cursor, as the developer’s IDE, will handle as much as possible directly within the editor.

3.1 Interface Entry

Maintaining interface documentation is a challenge: manual writing is inefficient and error‑prone, documentation lags behind code changes, and formats vary across data sources, all harming efficiency and collaboration.

3.1.1 Solution Overview

We unify three existing data sources into the ZAPI platform, process them to generate OpenAPI via a model, perform schema validation and diff detection, and manage the interfaces within ZAPI.

3.1.2 Technical Architecture

The approach is similar to converting rich text to Markdown, focusing on Git‑based code generation for interfaces.

Before calling the model, we need engineering capabilities: 精准识别变更方法 、 按方法数进行文件拆分 、 解析Java代码上下文 。

3.1.3 Precise Change Method Identification

Only target methods (changed or new) are extracted, not all methods in the code.

3.1.4 File Splitting

Splitting files prevents token overflow when a branch modifies many methods and enables concurrent model calls for faster generation.

Currently split by two methods per file

ICemUserTestService.java_part1 contains the first two methods; ICemUserTestService.java_part2 contains the last method.

3.1.5 Java Context Parsing

After identifying methods, we parse associated import classes, parameters, and return types to provide complete context for the model prompt.

3.1.6 Model Prompt Construction

The model generates OpenAPI JSON, focusing on interface name, path, request method, request format, parameters, field attributes, and tags.

3.1.7 Summary

Compared with static parsing, AI only requires rule‑based prompts, automatically understands business logic, and generates high‑quality interface documentation without code changes.

3.2 ZAPI Interface to Front‑End Code

Previously, front‑end developers manually wrote code based on ZAPI docs, duplicating type definitions. This is time‑consuming.

3.2.1 MCP‑ZAPI Code Generation

Using MCP‑ZAPI in Cursor, we achieve faster, consistent code generation. It supports single or multiple URLs, with or without existing files. When a file is provided, the tool learns its style and inserts generated code; otherwise, it creates a new semantic file.

Analyze referenced URLs to obtain interface schemas.

Determine if target files exist and analyze current code style.

Generate interface code that matches the existing style.

3.3 AI_MOCK Tool Integration

Traditional mockjs generates random data, requiring manual creation and lacking realism.

3.3.1 Integration

We integrate an internal npm package that intercepts ajax/fetch requests and displays a bubble entry in the page.

3.3.2 Usage

Click the bubble to open a drawer showing intercepted interface list. Users can view or edit response data. Mockjs can generate data, or the AI生成按钮 can be used to generate business‑semantic mock data via model inference.

3.3.3 Summary

After integrating AI_MOCK, each user can customize mock data, providing more realistic business‑aligned data during development and demos.

4. Conclusion and Outlook

4.1 Summary

Systematically introducing AI into the front‑back integration workflow yields significant improvements in interface entry, code generation, and mock data, demonstrating AI’s huge potential for enhancing software development efficiency and quality.

4.2 Outlook

As generative AI evolves, the linear “document → manual coding → integration → bug fixing” process will be reshaped. Future AI will extract interface definitions directly from code changes, achieving “code‑as‑document”, generate full page code from prototypes, produce intelligent, diverse mock data, predict compatibility issues before code submission, and codify best practices into reusable templates, turning the development process into an AI‑driven, adaptive system.