Configuration

Frontend Configuration

ChatComponent Props

The ChatComponent accepts the following props:

interface ChatComponentProps {
  name: string;           // Component name to render
  props: any;            // Props to pass to the component
  fallback?: ReactNode;  // Loading state component
  errorFallback?: ReactNode; // Error state component
}

Example Usage

Backend Configuration

MCP Host Configuration

The MCP Host can be configured with the following options:

interface MCPHostConfig {
  mcpServer: {
    configPath: string;  // Path to mcp_servers.config.json
  };
  mcpComponent: {
    configPath: string;  // Path to mcp_components.config.json
  };
  watch?: boolean;      // Enable file watching for config changes
}

Server Configuration File

The mcp_servers.config.json file should follow this structure:

{
  "servers": [
    {
      "name": "cart-server",
      "type": "stdio",
      "command": "node ./servers/cart-server.js",
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}

Component Configuration File

The mcp_components.config.json file is automatically generated by the Vite plugin, but you can also create it manually:

[
  {
    "name": "Cart",
    "propertySchema": {
      "type": "object",
      "properties": {
        "books": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "id": { "type": "string" },
              "title": { "type": "string" },
              "author": { "type": "string" },
              "cover": { "type": "string" },
              "price": { "type": "number" },
              "count": { "type": "number" }
            }
          }
        }
      }
    },
    "description": "Display shopping cart information",
    "serverName": "cart-server"
  }
]

Build Tool Configuration

Vite Plugin Configuration

The Vite plugin can be configured with the following options:

interface MCPCompConfig {
  pushConfig?: {
    serverUrl: string;    // URL of the config server
    projectId: string;    // Project identifier
    env: string;         // Environment (development/production)
  };
  outputPath?: string;   // Custom output path for config files
}

Example Configuration

// vite.config.ts
import { defineConfig } from 'vite'
import { MCPComp } from 'vite-plugin-mcp'

export default defineConfig({
  plugins: [
    MCPComp({
      pushConfig: {
        serverUrl: 'http://localhost:3000/api/config',
        projectId: 'my-project',
        env: process.env.NODE_ENV
      },
      outputPath: './dist/mcp'
    })
  ]
})

Environment Variables

The following environment variables can be used to configure the system:

• MCP_SERVER_URL: URL of the MCP server
• MCP_PROJECT_ID: Project identifier
• MCP_ENV: Environment (development/production)
• MCP_WATCH: Enable file watching (true/false)

Security Considerations

1. Always validate component props on the server side
2. Use HTTPS for all server communications
3. Implement proper authentication and authorization
4. Sanitize all user inputs
5. Keep dependencies up to date