Clash Royale Data Visualization Showcase

This project consists of two parts:

1. MCP Server (mcp-server/): A Python server that connects to the Clash Royale API. Based on the work by Baighasan/Chat-Royale.
2. Visualization Dashboard (viz-dashboard/): A Next.js web application to display the data.

Prerequisites

• Python 3.10+
• Node.js 18+
• Clash Royale API Key (You have already set this up in mcp-server/.env)

---

1. Running the MCP Server

The MCP server exposes the Clash Royale data to AI assistants or MCP clients.

1. Open a terminal and navigate to the server directory:

   cd mcp-server

2. Create a virtual environment (recommended) and activate it:

   python3 -m venv venv
   source venv/bin/activate

3. Install the dependencies:

   pip install -e .

4. Test the Server: You can use the MCP Inspector to test the server interactively.

   npx @modelcontextprotocol/inspector python src/main.py

   This will open a web interface where you can try out tools like get_player_info.

---

2. Running the Visualization Dashboard

The dashboard is a web app where you can view the data.

1. Open a new terminal window and navigate to the dashboard directory:

   cd viz-dashboard

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and go to: http://localhost:3000

---

3. Updating the Data

The dashboard displays a static snapshot of Clash Royale meta data. This ensures fast load times and no API rate limits for users.

To fetch fresh data (e.g., daily), use the provided update script:

1. Open your terminal in the project root.
2. Run the update script:

   ./update_data.sh

What this does:

1. Runs viz-dashboard/scripts/fetch_meta.py to fetch the latest top 1000 player battles and card stats.
2. Generates a new meta_snapshot.json.
3. Automatically commits and pushes the new data to GitHub.
4. Triggers a redeploy on Vercel (if connected).

Note: You need a valid CR_API_KEY in mcp-server/.env for this to work.