react -client

This MCP client is a modern React TypeScript application designed to interact with MCP servers via a backend API. It provides an AI-powered chat interface, multilingual support, and data visualization features, including automatic charts and export capabilities. The client communicates with the MCP backend through versioned API endpoints (via a Vite proxy) and leverages Azure OpenAI for intelligent responses, Azure Cognitive Search for RAG capabilities, and native Excel export for data tables. To use it, clone the repository, install dependencies, configure the environment, and run the development server. The app's UI allows you to switch languages, view interactive charts, save and import conversations, and export results to Excel or JSON/TXT/MD formats.

Prerequisites:\n- Node.js 16+ (LTS) installed on your system\n- Git installed on your system\n- Access to an MCP backend API server (default port 5000) for full functionality\n\nInstall steps:\n1) Clone the repository and install dependencies\n\n bash\n git clone <repository-url>\n cd react-mcp-client\n npm install\n \n\n2) Configure environment variables\n\n Create a .env file at the project root with the following (example):\n\n env\n VITE_AOAI_ENDPOINT=https://your-openai-resource.openai.azure.com/openai/deployments/your-model/chat/completions?api-version=2023-05-15\n VITE_AOAI_APIKEY=your-azure-openai-api-key\n VITE_MCP_SERVER_URL=http://localhost:9090\n\n # Optional - for RAG capabilities\n AZURE_SEARCH_ENDPOINT=https://your-search-service.search.windows.net\n AZURE_SEARCH_APIKEY=your-search-admin-key\n AZURE_SEARCH_INDEX=your-index-name\n \n\n3) Start the development server\n\n bash\n npm run dev\n \n\n4) Open the app in your browser at http://localhost:5174\n

• The MCP client relies on a running backend MCP API server. Ensure the backend is up and accessible at the URL configured in VITE_MCP_SERVER_URL.\n- If you customize OpenAI or Azure Search settings, keep your credentials secure and avoid committing them to version control.\n- For multilingual usage, confirm that i18n resources are loaded correctly in the browser (en, fr, nl).\n- If charts or exports fail, verify data shape and ensure numeric values are present for visualization components.\n- Use the manual save/import features to back up conversations locally in JSON/TXT/MD formats.\n