Front-end page automatic generation method and system based on model context protocol

Abstract

The invention discloses a front-end page automatic generation method and system based on a model context agreement, a system input layer inputs a product demand document in a PRD document form, an IDE AI assistant carries out intelligent understanding and execution on the product demand document input by the input layer, and inputs the product demand document into a Docker containerization MCP service layer through an interface layer MCP client interface; the Docker containerization MCP service layer configures a plurality of tools, mechanisms and corresponding algorithms to carry out page recognition and processing on the input product demand document, and intelligent configuration guidance is generated; and the local execution layer executes page generation operation based on intelligent configuration through each module, generates an HTML page file and outputs the HTML page file through the output layer. According to the scheme, efficient, intelligent and standardized front-end page automatic generation can be realized, and the development efficiency and the code quality are remarkably improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer software, and particularly relates to a front-end page automatic generation method and system based on a model context protocol. BACKGROUND

[0002] At present, front-end page generation mainly relies on the following technical solutions: (1) Traditional scaffolding tools (such as Yeoman, Plop.js): using static templates and simple variable replacement mechanisms, requiring developers to manually select template types, lacking understanding of natural language requirements, and generating code structures that are difficult to adapt to complex business requirements; (2) Low-code / no-code platforms (such as Webflow, Bubble): mainly through visual drag-and-drop methods to build pages, requiring users to have certain interface design capabilities, and the generated code usually does not meet enterprise-level development standards, making it difficult to integrate with existing development tool chains; (3) AI-assisted code generation tools (such as GitHub Copilot): mainly based on code context for completion, lacking structured understanding of business requirement documents, and unable to provide complete page generation solutions, making it difficult to guarantee the consistency and standardization of generated results.

[0003] Therefore, in actual application, the generation of front-end pages mainly has the following problems: Lack of intelligent demand understanding: existing tools cannot automatically understand and analyze business logic and page type requirements in product requirement documents; Template selection relies on manual work: developers need to manually select appropriate page templates based on experience, which is prone to selection errors; Generation guidance is not detailed enough: existing tools usually only provide basic templates, lacking detailed configuration guidance and best practice suggestions; Insufficient AI integration capabilities: lacking deep integration with modern AI development assistants, unable to fully utilize AI's understanding and generation capabilities; Low standardization: different tools lack unified protocol and interface standards, making it difficult to form a complete tool chain. SUMMARY

[0004] In view of the above technical problems, the application provides a front-end page automatic generation method and system based on a model context protocol (MCP), to solve the technical problems of how to automatically understand and analyze the page type requirements in a PRD document, how to intelligently select a suitable page generation strategy based on a natural language description, how to realize efficient cooperation between an AI assistant and a code generation service through a standardized protocol, how to generate detailed and executable page configuration guidance content, and how to ensure that the generated page meets enterprise-level development specifications and best practices, to realize intelligent front-end page automatic generation based on a product requirement document.

[0005] The application is implemented by using the following technical solutions: In a first aspect, the application provides a front-end page automatic generation system based on a model context protocol, which comprises an input layer, an interface layer and an output layer, and further comprises a local execution layer, a Docker containerized MCP service layer and an IDE AI assistant three-layer architecture. The input layer inputs a product requirement document in the form of a PRD document, the IDE AI assistant intelligently understands and executes the product requirement document input by the input layer, and inputs the Docker containerized MCP service layer through an MCP client interface based on a standardized protocol communication set by the interface layer. The Docker containerized MCP service layer is configured with multiple tools, mechanisms and corresponding algorithms to identify and process the input product requirement document, and generate intelligent configuration guidance. The local execution layer performs page generation operations based on intelligent configuration through each module, generates an HTML page file and outputs it through the output layer.

[0006] Specifically, the Docker containerized MCP service layer is specifically configured to include a project initialization tool, a page type recognition algorithm for intelligent semantic analysis, an intelligent routing decision mechanism for adaptive selection, a menu generation tool, a page generation tool and a template mapping subsystem for generating intelligent configuration, the template mapping subsystem is configured with multiple page templates, selects templates according to the page type recognition result obtained by the page type recognition algorithm, and generates corresponding configurations respectively.

[0007] Specifically, the template mapping subsystem adopts a hierarchical template library architecture and an intelligent mapping rule engine to generate intelligent configuration parameters and dynamic guidance content, and simultaneously configures a board control and hot change mechanism for management; the hierarchical template library architecture specifically comprises a basic template layer, a component template layer, a page template layer and a business template layer; the intelligent mapping rule engine comprises a multi-dimensional mapping strategy, a mapping rule configuration and a template selection algorithm.

[0008] Specifically, the intelligent routing decision mechanism adopts a multi-layer decision architecture and an adaptive learning algorithm, and is configured with a decision execution engine and a learning optimization mechanism; the multi-layer decision architecture includes an input preprocessing layer, a semantic analysis layer, a type identification layer, and a confidence evaluation layer; the adaptive learning algorithm includes dynamic threshold adjustment, an intelligent recommendation algorithm, and an exception handling strategy; the decision execution engine automatically executes a path while supporting interactive selection of a path, and performs monitoring and optimization; the learning optimization mechanism is configured with an online learning algorithm and a knowledge base updating algorithm.

[0009] Specifically, the local execution layer specifically includes a file operation module for managing a file system, a template processing module for template parsing and rendering, and a code generation module for intelligent code generation.

[0010] On the other hand, the front-end page automatic generation method based on the model context protocol includes the following steps: Step S1: Start the process and receive PRD document input; Step S2: Analyze the menu structure, calculate the confidence by a page type identification algorithm, and select a template based on the confidence and the intelligent routing decision mechanism: if the confidence is confidence ≥ 0.8, automatically select the template; if the confidence is between 0.5 and 0.8, recommend options for the user to select; if the confidence is ≤ 0.5, use the default general template; Step S3: After completing the template selection, generate a configuration guide, and then perform file operations, including creating a directory structure, copying template files, configuring page parameters, and generating business code; Step S4: Verify the generation result after performing the file operation; if the verification is passed, output the HTML page and record the generation log, and finally end the process; if the verification is not passed, perform error handling and repair, and re-execute the file operation.

[0011] Specifically, the page type identification algorithm in step S2 includes the following sub-steps: Step S21: Input the menu name, initialize the keyword library, and the keyword library covers CRUD module types, statistical analysis types, map display types, chart visualization types, list query types, form editing types, and detail viewing types; Step S22: Perform keyword matching calculation, and the matching methods include: exact matching with a weight coefficient of 1.0, fuzzy matching with a weight coefficient of 0.8, semantic matching with a weight coefficient of 0.6, and context matching with a weight coefficient of 0.4; Step S23: Based on the matching result, calculate the confidence score, and the calculation formula is: confidence = (sum of matching keyword weights) / (total weight of keywords of this type × correction coefficient); Step S24: special rule optimization, including high-frequency word special processing, business field adaptation, negative word processing and combined word optimization; Step S25: output the recognition result.

[0012] The beneficial effects of the present application are as follows: through the intelligent page type recognition algorithm and the intelligent routing decision mechanism, efficient, intelligent and standardized front-end page automatic generation is realized, the development efficiency and code quality are significantly improved, and the following effects are achieved: (1) The degree of intelligence is significantly improved: through natural language processing and machine learning algorithm, automatic understanding and page type recognition of PRD document are realized, and the accuracy is more than 85%; (2) The development efficiency is greatly improved: compared with the traditional manual coding method, the page generation efficiency is improved by more than 300%, and the complete page generation time of a single CRUD module is shortened from 2-3 hours to 10-15 minutes; (3) The code quality and consistency are guaranteed: through standardized templates and constraint rules, the generated code conforms to the enterprise-level development specification, and the code review and reconstruction workload is reduced; (4) AI integration capability is outstanding: based on the standardized interface of MCP protocol, seamless integration with various AI development assistants is realized, and the understanding and generation capabilities of AI are fully utilized.

[0013] (5) Cost reduction: reducing the repetitive work of front-end developers, reducing the project development cost by 30-50%, standardized code structure and specification, reducing the cost of later maintenance and upgrading, new employees can quickly get started, reducing the skill training time and cost. BRIEF DESCRIPTION OF DRAWINGS

[0014] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings needed to be used in the embodiment or prior art description. Obviously, the drawings in the following description only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained without creative labor on the basis of the structure shown in the drawings.

[0015] Figure 1 The figure is the overall architecture diagram of the front-end page automatic generation system based on model context protocol in the embodiment of the present application. Figure 2 The figure is the flow chart of the intelligent page type recognition algorithm in the embodiment. Figure 3 The figure is the MCP protocol communication timing diagram in the embodiment. Figure 4 The figure is the overall flow chart of the front-end page automatic generation method based on model context protocol in the embodiment. Figure 5 This is a schematic diagram of the template mapping relationship in this embodiment. Detailed Implementation

[0016] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0017] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0018] The following is in conjunction with the appendix Figures 1-5 The following describes some embodiments of the present invention in detail. Unless otherwise specified, the following embodiments and features can be combined with each other.

[0019] This invention proposes a method and system for automatically generating front-end pages based on the Model Context Protocol. In a preferred embodiment, the system architecture is as follows: Figure 1 As shown, the system based on the Model Context Protocol (MCP) includes an input layer, an AI layer, an interface layer, a Docker containerized MCP service layer, a local execution layer, and an output layer. These layers exchange data and commands through standardized interfaces, enabling an automated generation process from PRD documents to HTML pages. Specifically: The input layer inputs product requirement documents in the form of PRD documents. The IDE AI assistant connects to the product requirement documents input by the input layer to intelligently understand and execute them, and inputs them into the Docker containerized MCP service layer through the MCP client interface set by the interface layer based on standardized protocol communication. The Docker containerized MCP service layer is configured with multiple tools, mechanisms and corresponding algorithms to perform page recognition and processing on the input product requirement document, and generate intelligent configuration guidance. The local execution layer performs page generation operations based on intelligent configuration through various modules, generates HTML page files, and outputs them through the output layer.

[0020] In this embodiment, the MCP protocol is extended from the traditional data access domain to the front-end page generation domain. The following core tools are defined first: `initialize_project`: Project initialization tool, downloads static resource packages; `generate_page`: Unified page generation tool, intelligently identifies page types; `generate_menu`: Menu generation tool, parses PRD menu structure; `add_menu_item`: Menu item management tool, supports dynamic menu operations.

[0021] In this embodiment, the Docker containerized MCP service layer is based on the MCP server architecture, adopts a layered modular architecture design, realizes a high cohesion and low coupling system structure, and through this layered architecture design, the system realizes high modularity and scalability, provides a stable and reliable technical foundation for intelligent generation of front-end pages, specifically including: (1) Server core framework layer MCP protocol engine: Protocol parser: parses JSONRPC2.0 message format conforming to MCP protocol specifications; Message verifier: verifies the format integrity and parameter validity of the request message; Response builder: builds response messages according to MCP protocol standards, including result data and error information; Protocol version management: supports compatibility processing of multiple versions of MCP protocol.

[0022] Connection manager: Client connection pool: maintains concurrent connections with multiple IDEAI clients; Session state management: tracks the session state and context information of each client; Heartbeat detection mechanism: periodically detects connection status and automatically cleans up invalid connections; Load balancing strategy: implements request load balancing when multiple instances are deployed.

[0023] Security control module: Identity authentication system: verifies client identity and access rights; Request frequency limit: prevents malicious requests and system overload; Data encryption processing: encrypts sensitive data for storage and transmission; Audit log system: records all operation logs, supports security audit.

[0024] (2) Business logic processing layer Page type identification engine: Natural language processing module: performs word segmentation and semantic analysis on the input menu name; Keyword matching algorithm: implements multi-dimensional keyword matching and weight calculation; Confidence evaluation system: Calculate the credibility score of the recognition result; Learning optimization mechanism: Continuously optimize the recognition algorithm based on user feedback.

[0025] Template processing engine: Template library management: Maintain HTML template files of various page types; Template parser: Parse variables and control structures in templates; Content generator: Generate specific page content based on PRD content and configuration parameters; Template caching system: Cache compiled templates to improve generation efficiency.

[0026] Configuration generator: Parameter mapping engine: Map PRD descriptions to specific configuration parameters; Rule verifier: Verify whether the generated configuration meets business rules; Default value filling: Automatically fill in reasonable default values for missing configuration items; Configuration optimizer: Optimize configuration parameters to improve the quality of generated pages.

[0027] (3) Server initialization and startup process The system adopts a phased initialization strategy to ensure stable startup of services, including: Environment check phase: Verify the running environment and dependent components, check the integrity and correctness of configuration files, initialize the log system and error handling mechanism; Core component initialization: Create MCP protocol server instances, initialize connection managers and security control modules, start tool registry centers and scheduling engines; Business module loading: Load page type recognition engines and keyword libraries, initialize template processing engines and configuration generators, establish data storage connections and cache systems; Tool registration and verification: Register all page generation tools, verify the integrity and correctness of tool definitions, and establish a dependency graph between tools; Service startup and monitoring: Start network listening and request processing services, initialize health checks and performance monitoring, and record startup logs and system status information.

[0028] In this embodiment, the Docker containerized MCP service layer generates configuration guidance, using template-based configuration generation technology to dynamically build detailed execution guidance content. The technical design includes: (1) Structured generation of guidance content: The system generates structured guidance content based on different page types, including the following core components: File operation instruction set: Source file copy instruction: specifies which template files to copy from the static resource service; Target path configuration: defines the storage location and naming rules for generated files; File permission setting: ensures that generated files have the correct read and write permissions; Dependency file processing: automatically handles the reference relationships of CSS, JavaScript, and other dependent resources.

[0029] Configuration parameter details: Page title and metadata configuration: includes page title, description, keyword, and other related configurations; Form field configuration: defines input box types, rules, default values, placeholders, and other settings; Data table configuration: specifies column definitions, sorting rules, pagination parameters, and operation buttons; Navigation menu configuration: sets breadcrumb navigation, sidebar menu, operation button group, and other settings.

[0030] Component mapping rule library: Input component mapping: automatically selects text boxes, drop-down boxes, date selectors, and other components based on field types; Display component mapping: selects table, card, list, and other display components based on data types; Interactive component mapping: configures the behavior and style of buttons, links, pop-up windows, and other interactive elements; Layout component mapping: defines grid system, container layout, responsive breakpoints, and other layout rules.

[0031] (2) Intelligent configuration parameter inference: the system has the ability to automatically infer configuration parameters based on business semantics, including: Field type intelligent inference: Infer data types based on field names (e.g., "email" is inferred as email type, "phone" is inferred as tel type); Infer validation rules based on business scenarios (e.g., automatically add uniqueness validation to the "username" field on the user management page); Infer input components based on field semantics (e.g., infer using a drop-down selection box for the "status" field).

[0032] Intelligent page layout adaptation: Automatically adjust form layout based on the number of fields (use single-column layout for fewer than 5 fields, and use double-column layout for more than 5 fields); Select the appropriate layout mode based on the page type (use table layout for list pages, and use description list layout for detail pages); Automatically configure responsive breakpoints and layout adjustment rules based on screen size.

[0033] Automatic application of business rules: Automatic addition of common business rules based on page type (e.g. automatically add creation time and update time fields for CRUD pages); Automatic setting of validation rules based on field semantics (e.g. automatically set numerical range validation for "age" field); Automatic configuration of permission control based on business scenarios (e.g. automatically add save and cancel buttons for edit pages).

[0034] (3) Execution guidance content templating, the system uses hierarchical template technology to generate execution guidance, including: Basic template layer: define common page structure and basic configuration; Type template layer: special configuration and component selection for different page types; Business template layer: personalized configuration according to specific business scenarios; User template layer: support user-defined configuration override and extension.

[0035] Template merging strategy: 1. Load the basic template as the configuration base; 2. Apply type template to cover and extend the basic configuration; 3. Adjust according to business semantics using business template; 4. Finally, apply user-defined configuration for personalized customization.

[0036] (4) Verification and quality assurance mechanism, the generated guidance content contains complete verification and quality assurance measures, including: Configuration integrity verification: check if the necessary configuration items are complete, and automatically supplement the default value for missing items; Syntax correctness verification: verify the correctness of generated HTML, CSS, and JavaScript syntax; Compatibility check: ensure that the generated code is compatible with the target framework and browser; Performance optimization suggestions: provide code optimization suggestions such as resource compression, caching strategy, etc.

[0037] In this embodiment, the system implements a secure communication mechanism based on the MCP protocol, as shown in Figure 3 The technical design includes: Communication protocol layer: JSONRPC2.0 protocol implementation: use standard remote procedure call protocol for communication; Message serialization and deserialization: ensure data integrity and correctness during transmission; Connection management and heartbeat detection: maintain stable communication connection, and timely detect and handle connection exceptions; Message Queue and Asynchronous Processing: Support high concurrency request processing and asynchronous task execution.

[0038] Security Authentication Mechanism: Client Authentication: Verify the legitimacy of the client through tokens or certificates; Permission Control System: Role-based access control, limit the operation permissions of different users; Data Encryption Transmission: Use TLS / SSL protocol to encrypt communication data to prevent data leakage; Audit Logging: Record all operation logs to support security audit and problem tracking.

[0039] Fault Tolerance and Recovery Mechanism: Connection Retry Strategy: Automatically retry connection when network exception occurs, improve system availability; Timeout Handling Mechanism: Set reasonable timeout time to avoid long waiting; Error Classification and Handling: Different handling strategies according to error types; State Synchronization Mechanism: Ensure the consistency of client and server state.

[0040] In a preferred embodiment, the Docker containerized MCP service layer specific configuration includes: project initialization tool, page type recognition algorithm for intelligent semantic analysis, intelligent routing decision mechanism for adaptive selection, menu generation tool, page generation tool, and template mapping subsystem for generating intelligent configuration. The template mapping subsystem configures multiple page templates, selects templates according to the page type recognition results obtained by the page type recognition algorithm, and generates corresponding configurations respectively. The template mapping subsystem uses a hierarchical template library architecture and an intelligent mapping rule engine to generate intelligent configuration parameters and dynamic guidance content, while configuring block control and hot change mechanism for management; the hierarchical template library architecture specifically includes: basic template layer, component template layer, page template layer and business template layer; the intelligent mapping rule engine includes multi-dimensional mapping strategy, mapping rule configuration and template selection algorithm.

[0041] In this embodiment, the system uses Docker container technology to realize the standardized deployment of MCP service, and the technical design includes: Container Image Construction: Multi-stage Construction Optimization: Use multi-stage construction to reduce image size; Base Image Selection: Choose safe and stable base image; Dependency Management Optimization: Optimize dependency installation and caching strategy; Security Scan Integration: Integrate security scanning tools to ensure image security.

[0042] Service Orchestration and Management: Container orchestration configuration: use Docker Compose or Kubernetes for service orchestration; Resource limitation and monitoring: set reasonable resource limits and monitor resource usage; Health check mechanism: implement service health checks to ensure service availability; Automatic scaling strategy: automatically adjust the number of service instances according to load conditions.

[0043] Network and storage configuration: Network isolation and security: configure network policies to ensure secure communication between services; Data persistence storage: configure persistent storage to ensure data security; Configuration management and injection: manage service configuration through environment variables or configuration files; Log collection and analysis: integrate log collection systems to support log analysis and monitoring.

[0044] In this embodiment, the page type recognition algorithm uses an intelligent recognition algorithm based on multi-level semantic analysis and confidence evaluation, which is one of the core innovative technologies of the present application. The main technical design includes: I. Keyword library construction mechanism, the system establishes a hierarchical keyword knowledge base, which includes the following technical features: (1) Main type keyword library: define the core keywords of 7 page types, including: CRUD module type: contains "management", "system", "background", "maintenance", "settings", "configuration", "edit", "add", "delete" and other keywords; Statistical analysis type: contains "statistics", "analysis", "report", "data", "indicator", "monitoring", "chart", "trend" and other keywords; Map display type: contains "map", "location", "coordinate", "region", "distribution", "path" and other keywords; Chart visualization type: contains "chart", "visualization", "display", "dashboard", "board" and other keywords; List query type: contains "list", "query", "search", "filter", "browse" and other keywords; Form editing type: contains "form", "entry", "fill in", "submit", "application" and other keywords; Detail viewing type: contains "details", "view", "information", "data", "archive" and other keywords.

[0045] (2) Weight allocation strategy, according to the business importance and recognition accuracy of keywords, allocate weight values, including: Core business keyword weight: 0.8-1.0 (e.g. "management", "statistics", "map"); Auxiliary function keyword weight: 0.5-0.7 (e.g. "system", "data", "information"); General description keyword weight: 0.3-0.4 (e.g. "page", "function", "module").

[0046] (3) Semantic expansion mechanism, supporting automatic identification of synonyms and near synonyms, including: Establish a synonym mapping table, such as "management" = "maintenance" = "setting"; Support root matching, such as "user management", "user maintenance", "user setting" are recognized as the same semantic.

[0047] II. Multi-dimensional matching calculation, the system adopts multi-dimensional matching strategy to improve the recognition accuracy, including: Exact match: completely match the keyword, weight coefficient 1.0; Fuzzy matching: composite words containing keywords, weight coefficient 0.8; Semantic matching: synonym and near synonym matching, weight coefficient 0.6; Context matching: combining menu level and adjacent menu items for semantic inference, weight coefficient 0.4.

[0048] III. Confidence calculation model, the system uses weighted average algorithm to calculate the confidence, including: Basic confidence calculation: confidence = (sum of matching keyword weights) / (total weight of this type of keyword) × matching word number correction coefficient; Matching word number correction: single matching word confidence is at least 0.5, multiple matching words increase confidence according to an increasing function; Type competition processing: when multiple type confidences are close, select the type with more matching words or higher weight; Threshold classification decision: confidence ≥ 0.8: automatically select this type and directly execute generation; confidence 0.5-0.8: provide recommended options, user confirmation before execution; confidence <0.5: use default general template, record cases to be optimized.

[0049] IV. Special rule optimization engine, according to the characteristics of Chinese semantics and the special nature of business scenarios, the system has built-in special rule processing mechanism, including: High-frequency word special processing: for high-frequency core words such as "management", "statistics", set direct judgment rules; Business field adaptation: adjust keyword weight according to different business fields (such as e-commerce, finance, education); Negative word processing: identify "non", "not", "except" and other negative words, exclude the corresponding type; Combination word optimization: For combination words such as "user management statistics", the weights are calculated according to the primary and secondary keywords respectively; Historical learning mechanism: Record user's selection preferences, dynamically adjust the identification rules in specific scenarios.

[0050] Five, algorithm execution flow, in this embodiment, the specific execution steps of the intelligent recognition algorithm are as shown in Figure 2 , including: Input preprocessing: Receive menu name, perform Chinese word segmentation and part-of-speech tagging; Key word extraction: Extract key words such as nouns and verbs from the word segmentation results, and the key word library covers CRUD module type, statistical analysis type, map display type, chart visualization type, list query type, form editing type, detail viewing type, etc. Category; Multi-dimensional matching: Accurate, fuzzy, semantic, and context matching of extracted keywords; Weight calculation: Calculate the score of each page type according to the matching result and weight configuration, accurate matching (weight coefficient 1.0), fuzzy matching (weight coefficient 0.8), semantic matching (weight coefficient 0.6), and context matching (weight coefficient 0.4); Confidence evaluation: Apply the confidence calculation model to obtain the final type judgment and confidence, and the calculation formula is: Confidence = (sum of matching keyword weights) / (total weight of keywords of this type × correction coefficient); Special rule application: Execute special rule optimization to correct the recognition result, including: high-frequency word special processing (such as management → CRUD module), business field adaptation (such as e-commerce, finance, education), negative word processing (such as non, not, except), combination word optimization (primary and secondary keyword weights); Result output: Output page type, confidence score and recommendation reason.

[0051] This algorithm realizes the accurate recognition of natural language description of page demand through multi-level semantic analysis and intelligent decision-making, significantly improving the automation and accuracy of page generation.

[0052] In this embodiment, the template mapping subsystem realizes intelligent conversion from page type to specific implementation by establishing a complete template mapping and configuration generation mechanism, and its technical design includes: (1) Hierarchical template library architecture Basic template layer: HTML skeleton template: Define the basic HTML structure and metadata of the page; CSS style template: Contains general style definition and theme configuration; JavaScript Function Template: Provides basic interactive functions and event handling. Responsive Layout Template: Supports adaptive layout for various screen sizes.

[0053] Component Template Layer: Form Component Template: Input boxes, drop-down boxes, date selectors, file uploads, and other form components; Display Component Template: Data tables, card lists, statistical charts, information panels, and other display components; Navigation Component Template: Breadcrumb navigation, sidebar menus, tab pages, pagination, and other navigation components; Interactive Component Template: Button groups, pop-up dialog boxes, prompt messages, loading indicators, and other interactive components.

[0054] Page Template Layer: CRUD Page Template: Complete templates for list pages, edit form pages, and detail display pages; Statistical Analysis Template: Analysis page templates containing chart display, data filtering, report export, and other functions; Map Display Template: Map page templates integrating map components, marker management, path planning, and other functions; Custom Page Template: Flexible general-purpose page templates that support custom layouts and component combinations.

[0055] Business Template Layer: Industry-Specific Template: Specialized page templates for e-commerce, finance, education, and other industries; Function Scenario Template: Templates for specific function scenarios such as user management, order processing, data analysis, etc.; Workflow Template: Page templates related to workflow, such as approval processes, task management, project collaboration, etc.

[0056] (2) Intelligent Mapping Rule Engine Multi-Dimensional Mapping Strategy: Page Type Mapping: Directly maps to the corresponding template category based on the identified page type; Function Requirement Mapping: Analyzes the function description in PRD and maps it to specific components and templates; Business Scenario Mapping: Selects the most suitable template based on the business domain and application scenario; User Preference Mapping: Considers the user's historical choices and preference settings for personalized template selection.

[0057] Mapping Rule Configuration: Rule Priority Management: Defines the priority of different mapping rules to handle rule conflicts; Conditional matching logic: Support complex conditional matching such as AND, OR, NOT, etc. logical combinations; Weight calculation mechanism: Assign weights to different matching conditions to calculate the overall matching degree; Dynamic rule update: Support runtime dynamic update of mapping rules without restarting the service.

[0058] Template selection algorithm: Best matching algorithm: Select the most matching template from multiple candidate templates; Similarity calculation: Calculate the similarity between page requirements and template features; Constraint satisfaction solution: Find the optimal template combination under various constraint conditions; Fallback strategy: Provide reasonable fallback options when perfect matching cannot be found.

[0059] (3) Intelligent configuration parameter generation PRD content analysis engine: Structured information extraction: Extract menu structure, field definition, business rules, etc. structured information from PRD documents; Natural language understanding: Understand the natural language description in PRD and convert it into configuration parameters; Key information identification: Identify page title, field name, validation rule, operation button, etc. key information; Semantic relationship analysis: Analyze the association, dependency and constraint relationships between fields.

[0060] Parameter automatic inference mechanism: Field type inference: Automatically infer data type and input component type according to field name and description; Validation rule generation: Automatically generate validation rules according to field semantics and business scenarios; Default value setting: Set reasonable default values and placeholder texts for fields; Layout parameter calculation: Automatically calculate the optimal layout parameters according to the number and type of fields.

[0061] Configuration optimization algorithm: User experience optimization: Optimize form layout, field order, interaction process, etc. to improve user experience; Performance optimization configuration: Optimize page loading performance, data query efficiency, resource usage, etc.; Accessibility configuration: Automatically add accessibility-related configurations to improve page accessibility.

[0062] (4) Dynamic guidance content generation Hierarchical guidance content structure: Overview guidance: Provide an overview of the page generation process and main steps; Detailed steps: Provide detailed instructions and commands for each operation step; Configuration explanation: Explain the meaning and setting method of various configuration parameters; Best practices: Provide relevant best practice suggestions and precautions.

[0063] Personalized guidance generation: Skill level adaptation: Adjust the detail level of guidance content according to the user's technical level; Environment difference processing: Generate corresponding operation guidance according to the user's development environment; Historical experience utilization: Provide personalized suggestions based on the user's historical operation records; Error prevention tips: Provide preventive tips and inspection suggestions based on common error patterns.

[0064] Guidance content quality assurance: Content accuracy verification: Verify the technical accuracy of the generated guidance content; Step integrity check: Ensure the integrity and logical coherence of the operation steps; Executability test: Verify the executability and actual effect of the guidance content; User feedback integration: Collect user feedback on guidance content to continuously improve quality.

[0065] (5) Template and configuration version management Version control system: Template version management: Maintain the version history of template files, support version rollback and comparison; Configuration version tracking: Track the change history of configuration parameters, support configuration rollback; Compatibility management: Ensure compatibility between different versions, smooth upgrade transition; Change impact analysis: Analyze the impact of template and configuration changes on existing pages; Hot update mechanism: Template hot update: Support updating template files without restarting the service; Configuration hot loading: Support dynamically loading new configuration rules and parameters; Cache refresh strategy: Intelligent refresh of related cache to ensure update takes effect; Rollback protection mechanism: Automatically roll back to stable version in case of update failure.

[0066] Through this complete template mapping and configuration generation mechanism, the system can realize intelligent conversion from abstract page requirements to specific implementation, greatly improving the efficiency and quality of page generation.

[0067] In a preferred embodiment, the intelligent routing decision mechanism is implemented with a multi-layer decision architecture and adaptive learning algorithm, and is configured with a decision execution engine and a learning optimization mechanism; the multi-layer decision architecture includes an input preprocessing layer, a semantic analysis layer, a type identification layer, and a confidence evaluation layer; the adaptive learning algorithm includes dynamic threshold adjustment, intelligent recommendation algorithm, and exception handling strategy; the decision execution engine automatically executes the path while supporting interactive selection of the path, and performs monitoring and optimization; the learning optimization mechanism configures an online learning algorithm and a knowledge base updating algorithm.

[0068] In the present embodiment, the intelligent routing decision mechanism is one of the core innovations of the present application, which adopts a multi-layer decision architecture and an adaptive learning algorithm, and the main technical design includes: (1) Multi-layer decision architecture design Input preprocessing layer: Parameter format verification: check the data type, length, and format specification of the input parameters; Character encoding standardization: uniformly process different character encodings to ensure the accuracy of Chinese processing; Special character filtering: filter and escape special characters that may affect processing; Input log recording: record all input requests to support problem tracking and performance analysis.

[0069] Semantic analysis layer: Chinese word segmentation processing: use word segmentation tools such as jieba to accurately segment menu names; Part-of-speech tagging analysis: identify nouns, verbs, adjectives, etc. to extract key semantic information; Synonym expansion: expand key words based on a synonym dictionary to improve matching coverage; Contextual semantic understanding: analyze the semantic context in combination with menu levels and adjacent menu items.

[0070] Type identification layer: Multi-algorithm parallel identification: simultaneously run multiple identification algorithms to improve identification accuracy; Key word weight calculation: assign weights to keywords according to their importance in different page types; Semantic similarity calculation: use word vector technology to calculate semantic similarity; Rule engine processing: apply predefined business rules for type judgment.

[0071] Confidence evaluation layer: Multi-dimensional scoring mechanism: score from multiple dimensions such as keyword matching, semantic similarity, rule matching, etc. Weighted fusion algorithm: use weighted average or machine learning models to fuse multiple scores; Uncertainty Quantification: Quantify the uncertainty of recognition results, provide confidence intervals; Historical Accuracy Correction: Adjust confidence scores based on historical recognition accuracy.

[0072] (2) Adaptive Decision Strategy Dynamic Threshold Adjustment: Basic Threshold Setting: Set confidence thresholds for different scenarios (Automatic Execution: 0.8, Recommended Selection: 0.5); User Feedback Learning: Dynamically adjust thresholds based on user selection and feedback; Business Scenario Adaptation: Adjust threshold strategies for different business fields; Time Decay Mechanism: Apply time decay to historical data to highlight the importance of recent data.

[0073] Intelligent Recommendation Algorithm: Candidate Type Ranking: Rank candidate page types based on confidence and relevance; Recommendation Reason Generation: Generate detailed recommendation reasons and matching basis for each recommended option; Similar Case Display: Display the processing results of similar menu names in history; User Preference Learning: Learn user selection preferences and personalize recommendation results.

[0074] Exception Handling Strategy: Low Confidence Handling: When all type confidences are low, provide general template options; Conflict Resolution Mechanism: When multiple type confidences are similar, use comprehensive scoring or user selection; Error Recovery Mechanism: When recognition errors are obvious, provide quick correction and re-recognition functions; Bottom-up Solution Execution: Ensure that usable page generation solutions are provided in any situation.

[0075] (3) Decision Execution Engine Automatic Execution Path: High Confidence Verification: Verify whether the confidence reaches the automatic execution threshold; Template Selection Logic: Automatically select the corresponding template according to the recognized page type; Parameter Automatic Filling: Automatically fill configuration parameters according to PRD content and default rules; Execution Result Verification: Verify the correctness of automatically generated configurations and files.

[0076] Interactive Selection Path: Option Interface Generation: Generate a user-friendly selection interface, showing candidate types and recommendation reasons; User input processing: processing user's selection input, verifying the validity of the selection; Selection result recording: recording user's selection for subsequent learning and optimization; Feedback collection mechanism: collecting user's satisfaction feedback on the recommended results.

[0077] Execution monitoring and optimization: Execution time monitoring: monitoring the time consumption of decision-making and execution, optimizing performance bottlenecks; Accuracy statistics: statistics of recognition and recommendation accuracy, continuous improvement of algorithm; User satisfaction tracking: tracking user satisfaction with the generated results, optimizing user experience; A / B test support: support A / B test of different decision-making strategies, data-driven optimization.

[0078] (4) Learning and optimization mechanism Online learning algorithm: Incremental learning model: support online incremental learning, no need to retrain the entire model; User feedback integration: integrate user's selection and feedback as training data, continuously optimize the model; Concept drift detection: detect changes in business needs and user preferences, adjust the model in time; Model version management: maintain multiple model versions, support model rollback and A / B testing.

[0079] Knowledge base update: Keyword library expansion: expand the keyword library according to new business scenarios and user input; Rule base optimization: optimize business rules based on recognition errors and user feedback; Synonym library maintenance: continuously update and maintain the synonym dictionary, improve semantic understanding ability; Case library accumulation: accumulate successful recognition and generation cases to form a knowledge base.

[0080] Through this intelligent routing decision mechanism, the system can guarantee high accuracy while providing good user experience and continuous self-optimization ability.

[0081] In a preferred embodiment, the local execution layer specifically includes: a file operation module for managing the file system, a template processing module for template parsing and rendering, and a code generation module for implementing intelligent code generation. In this embodiment, the page generation of the local execution layer also includes ensuring the generated page through the pre-defined framework constraint rules and range protection mechanism, and the technical design includes: CSS class name specification constraint: Uniform Namespace Prefix: All CSS class names use a uniform prefix to avoid style conflicts. Semantic Naming Rules: Adopt BEM (BlockElementModifier) naming methodology. Responsive Breakpoint Standards: Define uniform breakpoint rules (xs:0px, sm:576px, md:768px, lg:992px, xl:1200px). Color and Font Specifications: Predefine theme colors and font systems to ensure visual consistency.

[0082] DOM Structure Pattern Constraints: Page Container Structure: Uniform page layout containers and content area division. Component Nesting Rules: Define hierarchical relationships and nesting constraints between components. Semantic HTML Tags: Force the use of semantic tags to improve accessibility and SEO effects. Data Attribute Specifications: Uniform data* attribute naming and usage rules.

[0083] Component Library Standardization: Basic Component Collection: Buttons, input boxes, drop-down boxes, tables, and other basic UI components. Business Component Templates: Search forms, data lists, and edit forms. Component API Specifications: Uniform attribute definitions, event handling, and method call interfaces. Component Version Management: Support component version control and backward compatibility guarantees.

[0084] Responsive Design Requirements: Flexible Layout System: Based on CSSGrid and Flexbox. Picture and Media Adaptation: Automatically handle pictures and media resources for different screen densities. Interaction Adaptation Optimization: Optimize the interaction experience for touch devices.

[0085] Code Quality Constraints: Code Formatting Specifications: Uniform HTML, CSS, and JavaScript code formats. Comment and Documentation Requirements: Mandatory addition of necessary code comments and documentation. Performance Optimization Rules: Automatic application of code compression, resource merging, and other performance optimization measures. Secure Coding Specifications: Prevent common security vulnerabilities such as XSS and CSRF.

[0086] Through the specific design of the system architecture and the engine, the application also proposes a front-end page automatic generation method based on a model context protocol, as shown in Figure 4 The method comprises the following steps of: Step S1: starting the flow, receiving a PRD document input; Step S2: analyzing the menu structure, calculating the confidence degree through a page type recognition algorithm, and selecting a template based on the confidence degree and an intelligent routing decision mechanism: if the confidence degree is greater than or equal to 0.8, the template is automatically selected; if the confidence degree is between 0.5 and 0.8, a recommended option is provided for the user to select; and if the confidence degree is less than or equal to 0.5, a default general template is used; Step S3: after the template selection is completed, a configuration guide is generated, and then file operations are performed, including creating a directory structure, copying a template file, configuring a page parameter, and generating a business code; Step S4: verifying the generated result after the file operations are performed; if the verification is passed, an HTML page is output and a generation log is recorded, and finally the flow is ended; if the verification is not passed, error processing and repair are performed, and the file operations are re-executed.

[0087] For the foregoing embodiments, in order to simply describe, they are all expressed as a series of action combinations, but those skilled in the art should know that the application is not limited by the action sequence described, because according to the application, some steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should know that the embodiments described in the specification belong to preferred embodiments, and the actions involved are not necessarily necessary for the application.

[0088] In the above embodiments, the basic principles and main features of the application and the advantages of the application are described. Those skilled in the art should know that the application is not limited by the above embodiments, and the above embodiments and the description in the specification are only to illustrate the principles of the application. Any modification and change made by those skilled in the art without departing from the spirit and scope of the application should be within the protection scope of the claims of the application.

Claims

1. A model context protocol based front page automatic generation system, comprising an input layer, an interface layer and an output layer, characterized in that, Also include the local execution layer, Docker containerized MCP service layer and IDE AI assistant three-tier architecture; The input layer inputs the product requirement document in the form of PRD document, the IDE AI assistant intelligently understands and executes the product requirement document input by the input layer, and inputs the Docker containerized MCP service layer through the MCP client interface based on the standardized protocol communication set by the interface layer; The Docker containerized MCP service layer configures multiple tools, mechanisms and corresponding algorithms to perform page recognition and processing on the input product requirement document, and generates intelligent configuration guidance; The local execution layer performs page generation operations based on intelligent configuration through each module, generates an HTML page file, and outputs it through the output layer.

2. The model context protocol based front page auto generation system as claimed in claim 1, wherein, The Docker containerized MCP service layer specifically configures: a project initialization tool, a page type recognition algorithm for intelligent semantic analysis, an intelligent routing decision mechanism for adaptive selection, a menu generation tool, a page generation tool, and a template mapping subsystem for generating intelligent configuration. The template mapping subsystem configures multiple page templates, selects templates according to the page type recognition results obtained by the page type recognition algorithm, and generates corresponding configurations respectively.

3. The model context protocol based front page auto generation system as claimed in claim 2, wherein, The template mapping subsystem uses a hierarchical template library architecture and an intelligent mapping rule engine to generate intelligent configuration parameters and dynamic guidance content, and configures a block control and hot change mechanism for management; The hierarchical template library architecture specifically includes: a basic template layer, a component template layer, a page template layer, and a business template layer; The intelligent mapping rule engine includes multi-dimensional mapping strategies, mapping rule configurations, and template selection algorithms.

4. The model context protocol based front page auto generation system of claim 2, wherein, The intelligent routing decision mechanism is implemented using a multi-layer decision architecture and an adaptive learning algorithm, and is configured with a decision execution engine and a learning optimization mechanism; the multi-layer decision architecture includes: an input preprocessing layer, a semantic analysis layer, a type recognition layer, and a confidence evaluation layer; the adaptive learning algorithm includes dynamic threshold adjustment, intelligent recommendation algorithm, and exception handling strategy; the decision execution engine automatically executes the path while supporting interactive selection of the path, and performs monitoring and optimization; the learning optimization mechanism configures online learning algorithm and knowledge base updating algorithm.

5. The model context protocol based front page auto generation system as claimed in claim 1, wherein, The local execution layer specifically includes: a file operation module for managing the file system, a template processing module for template parsing and rendering, and a code generation module for intelligent code generation.

6. The method for automatically generating a front-end page based on a model context protocol, implemented by the system for automatically generating a front-end page based on a model context protocol according to any one of claims 1-5, characterized in that, The method comprises the following steps: Step S1: Start the process and receive PRD document input; Step S2: Analyze the menu structure, calculate the confidence level through the page type recognition algorithm, and select the template based on the confidence level and the intelligent routing decision mechanism: if the confidence level is greater than or equal to 0.8, automatically select the template; If the confidence level is between 0.5 and 0.8, recommend options for the user to choose; if the confidence level is less than or equal to 0.5, use the default general template; Step S3: After completing the template selection, generate configuration guidance, and then perform file operations, including creating directory structure, copying template files, configuring page parameters, and generating business code; Step S4: Verify the generated results after performing file operations; If the verification is passed, output the HTML page and record the generation log, and finally end the process; If the verification is not passed, perform error processing and repair, and re-execute the file operation.

7. The model-based context protocol front page automatic generation method of claim 6, wherein, The page type recognition algorithm in the step S2 includes the following sub-steps: Step S21: input the menu name, initialize the keyword library, and the keyword library covers the CRUD module type, the statistical analysis type, the map display type, the chart visualization type, the list query type, the form editing type and the detail viewing type; Step S22: perform keyword matching calculation, and the matching modes include: the exact matching weight coefficient is 1.0, the fuzzy matching weight coefficient is 0.8, the semantic matching weight coefficient is 0.6, and the context matching weight coefficient is 0.4; Step S23: perform confidence score calculation based on the matching result, and the calculation formula is: confidence=(total weight of matching keywords) / (total weight of keywords of the type×correction coefficient); Step S24: special rule optimization, including special processing of high-frequency words, business field adaptation, negative word processing and combined word optimization; Step S25: output the recognition result.

Images