API Contract & Data Validation

For the client and server to work together seamlessly and securely, they must strictly adhere to a unified protocol defined by the mcp-comp-schema.json file. This schema is not just a description of data structures; it is the binding contract for data validation on both the frontend and backend.

The Schema as a Single Source of Truth

The mcp-comp-schema.json file, generated by the Vite plugin, is the "Single Source of Truth" for the entire system.

• On the Client: After receiving data from the server, the ChatComponent uses this schema to validate the componentProps. The component will only be rendered if the props' structure and types perfectly match the schema definition. This prevents malformed or malicious data injection from crashing the client or causing unexpected behavior.
• On the Server: Before passing arguments from the Large Language Model (LLM) to a tool-function, the server should also use this schema to validate those arguments. This ensures that only expected and legitimate data enters your core business logic, thus enhancing the robustness of the backend.

Server Response Structure

The client expects an API response from the server with the following structure.

{
  "code": 0,
  "data": {
    "content": "This is the AI's text response, which can include Markdown.",
    "meta": {
      "serverName": "mcp-component-render",
      "toolName": "MediaCard",
      "componentProps": {
        "movie": {
          "id": 1,
          "title": "Avatar: The Way of Water",
          "description": "A movie description...",
          "poster": "https://..."
        }
      },
      "aiOutput": "I have found information for the movie 'Avatar: The Way of Water'."
    }
  }
}

The meta Object

This is the core of the dynamic rendering mechanism.

Field	Type	Description
serverName	string	The name of the MCP server that implemented the tool.
toolName	string	The name of the component to render. This must exactly match a component name defined in the schema. If the value is "null" or absent, no component is rendered.
componentProps	Record<string, any>	An object whose key-value pairs are passed as props to the rendered component. Its structure must strictly adhere to the propertySchema defined for this component in the mcp-comp-schema.json file.
aiOutput	string	(Optional) The AI's plain text output regarding this tool call.

Summary of the Contract

• toolName is the bridge.
• componentProps is the data payload, and its legitimacy is guaranteed by the shared mcp-comp-schema.json.

Any deviation from the schema by either party will result in a validation failure, thereby interrupting the data flow and ensuring the stability and security of the entire system.