Upload 8 files

Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy all application files
+COPY . .
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+# Create startup script that runs the MCP server (primary) and web UI (secondary)
+RUN echo '#!/bin/bash\n\
+echo "Starting Tic-Tac-Toe MCP Server on port 7860..."\n\
+echo "This is the MCP server for Claude/LeChat integration"\n\
+echo "Web UI available at /rooms-ui endpoint"\n\
+echo "MCP Tools: create_room, make_move, send_chat, get_room_state, list_rooms"\n\
+python mcp_server.py' > start.sh && chmod +x start.sh
+
+# Set required environment variable for Mistral API
+ENV MISTRAL_API_KEY=""
+
+CMD ["./start.sh"]

README.md

@@ -1,10 +1,146 @@
 ---
-title: Tictactoe
-emoji: 👁
-colorFrom: green
+title: Tic-Tac-Toe MCP Server
+emoji: 🎮
+colorFrom: blue
 colorTo: purple
 sdk: docker
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🎮 Tic-Tac-Toe MCP Server for LeChat
+
+A sophisticated tic-tac-toe game server with **MCP (Model Context Protocol)** integration for use with LeChat.
+
+## 🚀 Features
+
+- **MCP Tools Integration** - Direct use with LeChat via MCP
+- **Room-based Gameplay** - Multiple isolated game sessions  
+- **AI Opponent** - Powered by Mistral AI with personality
+- **Real-time Chat** - Interactive conversations with the AI
+- **Live Markdown State** - Perfect representation for AI consumption
+- **Multi-room Support** - Create and switch between multiple games
+
+## 🔧 MCP Tools Available
+
+### Core Game Tools
+- `create_room()` - Create a new tic-tac-toe game room
+- `make_move(position)` - Make your move (0-8) and get AI response
+- `send_chat(message)` - Chat with Mistral AI in your game
+- `get_room_state()` - Get current game state in markdown
+- `list_rooms()` - See all your active games
+- `switch_room(room_id)` - Change between games
+
+### Utility Tools  
+- `get_help()` - Game instructions and board layout
+- `wait_5_seconds()` - Timing utility for operations
+
+## 🎯 How to Play with LeChat
+
+1. **Connect to this MCP server** in LeChat
+2. **Start a game**: `create_room()`
+3. **Make moves**: `make_move(4)` (center square)
+4. **Chat with AI**: `send_chat("Good move!")`
+5. **Check state**: `get_room_state()`
+
+### Board Layout (Positions 0-8):
+```
+0 | 1 | 2
+---------
+3 | 4 | 5  
+---------
+6 | 7 | 8
+```
+
+## 📋 Example Game Flow
+
+```python
+# Start a new game
+create_room()
+# Output: Created room abc12345, you are X, AI is O
+
+# Make your first move (center)
+make_move(4)
+# Output: You played X at 4, AI played O at 2 with trash talk!
+
+# Chat with the AI
+send_chat("Nice try, but I've got this!")
+# Output: Your message + AI's witty response
+
+# Check current state anytime
+get_room_state()
+# Output: Full markdown representation of game
+```
+
+## 📊 Markdown State Format
+
+The AI receives game state in this format:
+```markdown
+# Game Room: abc12345
+## Status: Your turn (X to play)
+Moves: 4/9
+
+```
+ X |   | O 
+-----------
+   | X |   
+-----------
+ O |   |   
+```
+
+## Recent Chat
+**You:** Nice try!
+**Mistral AI:** Just wait and see! 😏
+```
+
+## 🔐 Setup Requirements
+
+1. **Mistral API Key**: Required for AI functionality
+   - Get from [console.mistral.ai](https://console.mistral.ai)
+   - Set as `MISTRAL_API_KEY` environment variable
+
+2. **MCP Connection**: Configure in LeChat
+   - Server URL: This Hugging Face Space URL
+   - Transport: SSE (Server-Sent Events)
+   - Port: 7860
+
+## 🌐 Web UI (Optional)
+
+While designed for MCP, there's also a web interface at `/rooms-ui` for testing and manual play.
+
+## 🏗️ Technical Details
+
+- **Backend**: Python Flask + FastMCP
+- **AI**: Mistral AI with competitive personality
+- **Protocol**: MCP (Model Context Protocol)
+- **Transport**: SSE for real-time communication
+- **State Management**: In-memory room storage
+- **Format**: Markdown for AI-friendly representation
+
+## 🎮 Game Features
+
+- **Competitive AI**: Mistral trash talks and celebrates
+- **Multiple Rooms**: Play several games simultaneously  
+- **Chat Integration**: Full conversation with game context
+- **State Persistence**: Games persist during session
+- **Error Handling**: Graceful handling of invalid moves
+- **Turn Management**: Automatic turn switching and validation
+
+## 🤖 Perfect for AI Assistants
+
+This MCP server is specifically designed for LeChat:
+- **Structured Output**: All responses in consistent JSON format
+- **Markdown Representation**: Perfect for AI understanding
+- **Context Preservation**: Room state maintained between calls
+- **Error Messages**: Clear feedback for invalid operations
+- **Multi-session**: Each AI conversation can have multiple games
+
+## 🚀 Get Started
+
+1. **In LeChat**: Connect to this MCP server
+2. **Type**: `create_room()` to start your first game
+3. **Play**: Use `make_move(position)` to play
+4. **Enjoy**: Chat and compete with Mistral AI!
+
+---
+
+**Built for the MCP ecosystem** 🤖 **Ready for AI-powered gaming** 🎮

app.py

@@ -0,0 +1,460 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory
+import os
+from flask_cors import CORS
+import logging
+import json
+import uuid
+import time
+from mistralai import Mistral
+
+app = Flask(__name__)
+CORS(app)
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Initialize Mistral client
+MISTRAL_API_KEY = os.getenv('MISTRAL_API_KEY')
+if not MISTRAL_API_KEY:
+    logger.error("MISTRAL_API_KEY not configured")
+    exit(1)
+
+client = Mistral(api_key=MISTRAL_API_KEY)
+
+class Room:
+    def __init__(self, room_id=None):
+        self.id = room_id or str(uuid.uuid4())[:8]
+        self.board = [''] * 9
+        self.current_player = 'X'  # X = human, O = AI
+        self.game_status = 'active'  # 'active', 'won', 'draw'
+        self.winner = None
+        self.chat_history = []
+        self.created = time.time()
+        self.last_activity = time.time()
+        self.moves_count = 0
+        
+        # Add welcome message
+        self.chat_history.append({
+            'sender': 'ai',
+            'message': "Hey there! Ready for a game of Tic-Tac-Toe? I'm pretty good at this... 😏 You're X, I'm O. Good luck!",
+            'timestamp': time.time()
+        })
+    
+    def make_move(self, position, player):
+        if self.game_status != 'active' or self.board[position] != '':
+            return False
+        
+        self.board[position] = player
+        self.moves_count += 1
+        self.last_activity = time.time()
+        
+        # Check for winner
+        if self.check_winner():
+            self.game_status = 'won'
+            self.winner = player
+        elif self.moves_count == 9:
+            self.game_status = 'draw'
+        else:
+            self.current_player = 'O' if player == 'X' else 'X'
+        
+        return True
+    
+    def check_winner(self):
+        win_patterns = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8],  # rows
+            [0, 3, 6], [1, 4, 7], [2, 5, 8],  # columns
+            [0, 4, 8], [2, 4, 6]              # diagonals
+        ]
+        
+        for pattern in win_patterns:
+            a, b, c = pattern
+            if self.board[a] and self.board[a] == self.board[b] == self.board[c]:
+                return True
+        return False
+    
+    def add_chat_message(self, message, sender):
+        self.chat_history.append({
+            'sender': sender,
+            'message': message,
+            'timestamp': time.time()
+        })
+        self.last_activity = time.time()
+    
+    def to_markdown(self):
+        # Game header
+        markdown = f"# Game Room: {self.id}\n"
+        markdown += f"## Status: "
+        
+        if self.game_status == 'won':
+            winner_name = "You" if self.winner == 'X' else "Mistral AI"
+            markdown += f"Game Over - {winner_name} wins! 🎉\n"
+        elif self.game_status == 'draw':
+            markdown += "Game Over - It's a draw! 🤝\n"
+        else:
+            turn_name = "Your turn" if self.current_player == 'X' else "Mistral's turn"
+            markdown += f"{turn_name} ({self.current_player} to play)\n"
+        
+        markdown += f"Moves: {self.moves_count}/9\n\n"
+        
+        # Board representation
+        markdown += "```\n"
+        for i in range(0, 9, 3):
+            row = [self.board[i] or ' ', self.board[i+1] or ' ', self.board[i+2] or ' ']
+            markdown += f" {row[0]} | {row[1]} | {row[2]} \n"
+            if i < 6:
+                markdown += "-----------\n"
+        markdown += "```\n\n"
+        
+        # Chat history (last 5 messages)
+        if self.chat_history:
+            markdown += "## Recent Chat\n"
+            recent_messages = self.chat_history[-5:]
+            for msg in recent_messages:
+                sender_name = "**You:**" if msg['sender'] == 'user' else "**Mistral AI:**"
+                markdown += f"{sender_name} {msg['message']}\n"
+        
+        return markdown
+    
+    def to_dict(self):
+        return {
+            'id': self.id,
+            'board': self.board,
+            'current_player': self.current_player,
+            'game_status': self.game_status,
+            'winner': self.winner,
+            'chat_history': self.chat_history,
+            'moves_count': self.moves_count,
+            'created': self.created,
+            'last_activity': self.last_activity
+        }
+
+# In-memory room storage
+rooms = {}
+
+# Room management endpoints
+@app.route('/rooms', methods=['POST'])
+def create_room():
+    room = Room()
+    rooms[room.id] = room
+    logger.info(f"Created room: {room.id}")
+    return jsonify({
+        'room_id': room.id,
+        'status': 'created',
+        'room_data': room.to_dict()
+    })
+
+@app.route('/rooms/<room_id>', methods=['GET'])
+def get_room(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    return jsonify({
+        'room_id': room_id,
+        'room_data': room.to_dict(),
+        'markdown': room.to_markdown()
+    })
+
+@app.route('/rooms/<room_id>/move', methods=['POST'])
+def make_room_move(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    data = request.json
+    position = data.get('position')
+    
+    if position is None or position < 0 or position > 8:
+        return jsonify({'error': 'Invalid position'}), 400
+    
+    # Make human move
+    if not room.make_move(position, 'X'):
+        return jsonify({'error': 'Invalid move'}), 400
+    
+    # Check if game ended
+    if room.game_status != 'active':
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_move': None
+        })
+    
+    # Get AI move
+    try:
+        ai_response = get_ai_move_for_room(room)
+        if ai_response and 'move' in ai_response:
+            # Validate AI move
+            ai_move = ai_response['move']
+            if 0 <= ai_move <= 8 and room.board[ai_move] == '':
+                room.make_move(ai_move, 'O')
+                if 'message' in ai_response:
+                    room.add_chat_message(ai_response['message'], 'ai')
+            else:
+                logger.error(f"AI chose invalid move: {ai_move}, board: {room.board}")
+                # Fallback to random valid move
+                empty_positions = [i for i in range(9) if room.board[i] == '']
+                if empty_positions:
+                    fallback_move = empty_positions[0]  # Take first available
+                    room.make_move(fallback_move, 'O')
+                    room.add_chat_message("Oops, had a brain freeze! But I'm still playing! 🤖", 'ai')
+        
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_move': ai_response
+        })
+    except Exception as e:
+        logger.error(f"AI move failed: {e}")
+        # Fallback to random valid move instead of failing
+        empty_positions = [i for i in range(9) if room.board[i] == '']
+        if empty_positions:
+            fallback_move = empty_positions[0]
+            room.make_move(fallback_move, 'O')
+            room.add_chat_message("Technical difficulties, but I'm improvising! 😅", 'ai')
+        
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_move': {'move': fallback_move if empty_positions else None, 'message': 'Technical difficulties!'}
+        })
+
+@app.route('/rooms/<room_id>/chat', methods=['POST'])
+def room_chat(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    data = request.json
+    user_message = data.get('message', '')
+    
+    if not user_message.strip():
+        return jsonify({'error': 'Empty message'}), 400
+    
+    # Add user message
+    room.add_chat_message(user_message, 'user')
+    
+    # Get AI response
+    try:
+        ai_response = get_ai_chat_for_room(room, user_message)
+        room.add_chat_message(ai_response, 'ai')
+        
+        return jsonify({
+            'room_data': room.to_dict(),
+            'markdown': room.to_markdown(),
+            'ai_response': ai_response
+        })
+    except Exception as e:
+        logger.error(f"AI chat failed: {e}")
+        return jsonify({'error': 'AI chat failed'}), 500
+
+@app.route('/rooms/<room_id>/markdown', methods=['GET'])
+def get_room_markdown(room_id):
+    if room_id not in rooms:
+        return jsonify({'error': 'Room not found'}), 404
+    
+    room = rooms[room_id]
+    return jsonify({
+        'room_id': room_id,
+        'markdown': room.to_markdown()
+    })
+
+# Helper functions for AI interactions
+def get_ai_move_for_room(room):
+    board_string = ""
+    for i in range(0, 9, 3):
+        row = [room.board[i] or ' ', room.board[i+1] or ' ', room.board[i+2] or ' ']
+        board_string += f"{row[0]} | {row[1]} | {row[2]}\n"
+        if i < 6:
+            board_string += "---------\n"
+    
+    messages = [
+        {
+            "role": "system",
+            "content": """You are a competitive Tic-Tac-Toe AI with personality. You play as 'O' and the human plays as 'X'.
+
+Rules:
+1. Analyze the board and choose your best move (0-8, left to right, top to bottom)
+2. Add a short, witty comment about your move or the game state
+3. Be competitive but fun - trash talk, celebrate good moves, react to the situation
+4. Keep messages under 50 words
+5. Use emojis occasionally
+
+ALWAYS respond with valid JSON in this exact format:
+{"move": [0-8], "message": "your witty comment"}
+
+Board positions:
+0 | 1 | 2
+---------
+3 | 4 | 5
+---------
+6 | 7 | 8"""
+        },
+        {
+            "role": "user",
+            "content": f"Current board:\n{board_string}\n\nBoard array: {room.board}"
+        }
+    ]
+    
+    response = client.chat.complete(
+        model="mistral-large-latest",
+        messages=messages,
+        temperature=0.1,
+        response_format={"type": "json_object"}
+    )
+    
+    return json.loads(response.choices[0].message.content)
+
+def get_ai_chat_for_room(room, user_message):
+    board_string = ""
+    for i in range(0, 9, 3):
+        row = [room.board[i] or ' ', room.board[i+1] or ' ', room.board[i+2] or ' ']
+        board_string += f"{row[0]} | {row[1]} | {row[2]}\n"
+        if i < 6:
+            board_string += "---------\n"
+    
+    messages = [
+        {
+            "role": "system",
+            "content": f"""You are a competitive, witty Tic-Tac-Toe AI with personality. You're currently playing a game.
+
+Current board state:
+{board_string}
+
+Respond to the human's message with personality - be competitive, funny, encouraging, or trash-talking as appropriate.
+Keep responses under 50 words. Use emojis occasionally. Don't make game moves in chat - that happens separately."""
+        },
+        {
+            "role": "user",
+            "content": user_message
+        }
+    ]
+    
+    response = client.chat.complete(
+        model="mistral-large-latest",
+        messages=messages
+    )
+    
+    return response.choices[0].message.content
+
+@app.route('/ai-move', methods=['POST'])
+def get_ai_move():
+    try:
+        data = request.json
+        board = data.get('board', [])
+        
+        # Convert board to string representation
+        board_string = ""
+        for i in range(0, 9, 3):
+            row = [board[i] or ' ', board[i+1] or ' ', board[i+2] or ' ']
+            board_string += f"{row[0]} | {row[1]} | {row[2]}\n"
+            if i < 6:
+                board_string += "---------\n"
+        
+        messages = [
+            {
+                "role": "system",
+                "content": """You are a competitive Tic-Tac-Toe AI with personality. You play as 'O' and the human plays as 'X'.
+
+Rules:
+1. Analyze the board and choose your best move (0-8, left to right, top to bottom)
+2. Add a short, witty comment about your move or the game state
+3. Be competitive but fun - trash talk, celebrate good moves, react to the situation
+4. Keep messages under 50 words
+5. Use emojis occasionally
+
+ALWAYS respond with valid JSON in this exact format:
+{"move": [0-8], "message": "your witty comment"}
+
+Board positions:
+0 | 1 | 2
+---------
+3 | 4 | 5
+---------
+6 | 7 | 8"""
+            },
+            {
+                "role": "user",
+                "content": f"Current board:\n{board_string}\n\nBoard array: {board}"
+            }
+        ]
+        
+        response = client.chat.complete(
+            model="mistral-large-latest",
+            messages=messages,
+            temperature=0.1,
+            response_format={"type": "json_object"}
+        )
+        
+        ai_response = json.loads(response.choices[0].message.content)
+        logger.info(f"AI response: {ai_response}")
+        
+        return jsonify(ai_response)
+        
+    except Exception as e:
+        logger.error(f"Error getting AI move: {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/ai-chat', methods=['POST'])
+def get_ai_chat():
+    try:
+        data = request.json
+        user_message = data.get('message', '')
+        board = data.get('board', [])
+        
+        # Convert board to string representation
+        board_string = ""
+        for i in range(0, 9, 3):
+            row = [board[i] or ' ', board[i+1] or ' ', board[i+2] or ' ']
+            board_string += f"{row[0]} | {row[1]} | {row[2]}\n"
+            if i < 6:
+                board_string += "---------\n"
+        
+        messages = [
+            {
+                "role": "system",
+                "content": f"""You are a competitive, witty Tic-Tac-Toe AI with personality. You're currently playing a game.
+
+Current board state:
+{board_string}
+
+Respond to the human's message with personality - be competitive, funny, encouraging, or trash-talking as appropriate.
+Keep responses under 50 words. Use emojis occasionally. Don't make game moves in chat - that happens separately."""
+            },
+            {
+                "role": "user",
+                "content": user_message
+            }
+        ]
+        
+        response = client.chat.complete(
+            model="mistral-large-latest",
+            messages=messages
+        )
+        
+        ai_message = response.choices[0].message.content
+        logger.info(f"AI chat response: {ai_message}")
+        
+        return jsonify({"message": ai_message})
+        
+    except Exception as e:
+        logger.error(f"Error getting AI chat: {str(e)}")
+        return jsonify({"error": str(e)}), 500
+
+# Serve the main game page (original)
+@app.route('/')
+def index():
+    return send_from_directory('.', 'simple_game.html')
+
+# Serve the room-based game page
+@app.route('/rooms-ui')
+def rooms_ui():
+    return send_from_directory('.', 'room_game.html')
+
+# Serve static files
+@app.route('/<path:path>')
+def serve_static(path):
+    return send_from_directory('.', path)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5001, debug=True)

game.js

@@ -0,0 +1,275 @@
+class TicTacToeGame {
+    constructor() {
+        this.board = Array(9).fill('');
+        this.currentPlayer = 'X'; // Human is X, AI is O
+        this.gameActive = true;
+        this.cells = document.querySelectorAll('.cell');
+        this.gameStatus = document.getElementById('gameStatus');
+        
+        this.initGame();
+    }
+
+    initGame() {
+        this.cells.forEach((cell, index) => {
+            cell.addEventListener('click', () => this.handleCellClick(index));
+        });
+    }
+
+    async handleCellClick(index) {
+        if (!this.gameActive || this.board[index] !== '' || this.currentPlayer !== 'X') {
+            return;
+        }
+
+        // Make human move
+        this.makeMove(index, 'X');
+        
+        // Check for win/draw
+        if (this.checkGameEnd()) {
+            return;
+        }
+
+        // AI's turn
+        this.gameStatus.textContent = "Mistral is thinking...";
+        await this.makeAIMove();
+    }
+
+    makeMove(index, player) {
+        this.board[index] = player;
+        this.cells[index].textContent = player;
+        this.cells[index].classList.add(player.toLowerCase());
+    }
+
+    async makeAIMove() {
+        try {
+            const aiMove = await this.getAIMoveAndChat();
+            console.log('AI Move received:', aiMove);
+            console.log('Current board:', this.board);
+            console.log('Move valid?', aiMove.move >= 0 && aiMove.move < 9);
+            console.log('Square empty?', this.board[aiMove.move] === '');
+            
+            if (aiMove && typeof aiMove.move === 'number' && aiMove.move >= 0 && aiMove.move < 9 && this.board[aiMove.move] === '') {
+                this.makeMove(aiMove.move, 'O');
+                
+                // Add AI's chat message
+                if (aiMove.message) {
+                    this.addChatMessage(aiMove.message, 'ai');
+                }
+                
+                if (!this.checkGameEnd()) {
+                    this.gameStatus.textContent = "Your turn! Click a square.";
+                }
+            } else {
+                // Fallback to random move
+                console.warn('AI move invalid, using fallback. Move:', aiMove.move, 'Board:', this.board);
+                const emptySpots = this.board.map((cell, index) => cell === '' ? index : null).filter(val => val !== null);
+                if (emptySpots.length > 0) {
+                    const randomMove = emptySpots[Math.floor(Math.random() * emptySpots.length)];
+                    this.makeMove(randomMove, 'O');
+                    this.addChatMessage("Technical hiccup! But I'm still playing! 🤖", 'ai');
+                    
+                    if (!this.checkGameEnd()) {
+                        this.gameStatus.textContent = "Your turn! Click a square.";
+                    }
+                } else {
+                    this.gameStatus.textContent = "Game error - no valid moves!";
+                }
+            }
+        } catch (error) {
+            console.error('AI move failed:', error);
+            // Fallback to random move instead of error
+            const emptySpots = this.board.map((cell, index) => cell === '' ? index : null).filter(val => val !== null);
+            if (emptySpots.length > 0) {
+                const randomMove = emptySpots[Math.floor(Math.random() * emptySpots.length)];
+                this.makeMove(randomMove, 'O');
+                this.addChatMessage("Connection issues, but I'm improvising! 😅", 'ai');
+                
+                if (!this.checkGameEnd()) {
+                    this.gameStatus.textContent = "Your turn! Click a square.";
+                }
+            }
+        }
+    }
+
+    async getAIMoveAndChat() {
+        const response = await fetch("/ai-move", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                board: this.board
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data;
+    }
+
+    async callMistralAPI(messages) {
+        const response = await fetch("/mistral-proxy", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                model: "mistral-large-latest",
+                messages: messages,
+                temperature: 0.7,
+                response_format: { type: "json_object" }
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data.choices[0].message.content;
+    }
+
+    boardToString() {
+        let result = "";
+        for (let i = 0; i < 9; i += 3) {
+            result += `${this.board[i] || ' '} | ${this.board[i+1] || ' '} | ${this.board[i+2] || ' '}\n`;
+            if (i < 6) result += "---------\n";
+        }
+        return result;
+    }
+
+    checkGameEnd() {
+        const winner = this.checkWinner();
+        
+        if (winner) {
+            this.gameActive = false;
+            if (winner === 'X') {
+                this.gameStatus.textContent = "🎉 You won! Impressive!";
+                this.addChatMessage("Wow! You actually beat me! 😱 Well played, human! 🏆", 'ai');
+            } else {
+                this.gameStatus.textContent = "💀 Mistral AI wins!";
+                this.addChatMessage("Victory is mine! 😈 Better luck next time! 🤖", 'ai');
+            }
+            return true;
+        }
+
+        if (this.board.every(cell => cell !== '')) {
+            this.gameActive = false;
+            this.gameStatus.textContent = "🤝 It's a draw!";
+            this.addChatMessage("A respectable draw! You're better than I expected! 🤝", 'ai');
+            return true;
+        }
+
+        return false;
+    }
+
+    checkWinner() {
+        const winPatterns = [
+            [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
+            [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
+            [0, 4, 8], [2, 4, 6] // diagonals
+        ];
+
+        for (const pattern of winPatterns) {
+            const [a, b, c] = pattern;
+            if (this.board[a] && this.board[a] === this.board[b] && this.board[a] === this.board[c]) {
+                return this.board[a];
+            }
+        }
+        return null;
+    }
+
+    addChatMessage(message, sender) {
+        const chatMessages = document.getElementById('chatMessages');
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        
+        const senderDiv = document.createElement('div');
+        senderDiv.className = 'message-sender';
+        senderDiv.textContent = sender === 'user' ? 'You:' : 'Mistral AI:';
+        
+        const contentDiv = document.createElement('div');
+        contentDiv.textContent = message;
+        
+        messageDiv.appendChild(senderDiv);
+        messageDiv.appendChild(contentDiv);
+        chatMessages.appendChild(messageDiv);
+        
+        // Scroll to bottom
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    async sendChatMessage(message) {
+        if (!message.trim()) return;
+        
+        // Add user message
+        this.addChatMessage(message, 'user');
+        
+        try {
+            const aiResponse = await this.getAIChatResponse(message);
+            this.addChatMessage(aiResponse, 'ai');
+        } catch (error) {
+            console.error('Chat failed:', error);
+            this.addChatMessage("Sorry, I'm having trouble responding right now! 🤖", 'ai');
+        }
+    }
+
+    async getAIChatResponse(userMessage) {
+        const response = await fetch("/ai-chat", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                message: userMessage,
+                board: this.board
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data.message;
+    }
+}
+
+// Initialize game when page loads
+let game;
+document.addEventListener('DOMContentLoaded', () => {
+    game = new TicTacToeGame();
+});
+
+// Chat functions
+function sendChatMessage() {
+    const chatInput = document.getElementById('chatInput');
+    const message = chatInput.value.trim();
+    
+    if (message) {
+        game.sendChatMessage(message);
+        chatInput.value = '';
+    }
+}
+
+function handleEnter(event) {
+    if (event.key === 'Enter') {
+        sendChatMessage();
+    }
+}
+
+// Reset game
+function resetGame() {
+    game = new TicTacToeGame();
+    
+    // Clear board visually
+    game.cells.forEach(cell => {
+        cell.textContent = '';
+        cell.classList.remove('x', 'o');
+    });
+    
+    game.gameStatus.textContent = "Your turn! Click a square to play X";
+    game.addChatMessage("New game! Let's see if you can do better this time! 😏", 'ai');
+}

mcp_server.py

@@ -0,0 +1,435 @@
+import os
+import asyncio
+from dotenv import load_dotenv
+from mcp.server.fastmcp import FastMCP
+from app import Room, rooms, get_ai_move_for_room, get_ai_chat_for_room
+
+load_dotenv()
+
+# --- MCP Server Setup ---
+mcp = FastMCP(
+    name="TicTacToeRooms",
+    host="0.0.0.0",
+    port=7860,
+)
+
+# --- Global state for current user session ---
+current_session = {
+    'active_room_id': None,
+    'username': 'MCPPlayer'
+}
+
+# --- MCP Tools ---
+
+@mcp.tool()
+def create_room() -> dict:
+    """
+    Create a new tic-tac-toe game room.
+    Returns:
+        dict: Room information including room ID and initial markdown state
+    """
+    global current_session
+    try:
+        room = Room()
+        rooms[room.id] = room
+        
+        current_session['active_room_id'] = room.id
+        
+        return {
+            "status": "success",
+            "room_id": room.id,
+            "message": f"Created new tic-tac-toe room: {room.id}",
+            "markdown_state": room.to_markdown(),
+            "instructions": "Use make_move() to play or send_chat() to talk with Mistral AI",
+            "game_info": {
+                "your_symbol": "X",
+                "ai_symbol": "O", 
+                "board_positions": "0-8 (left to right, top to bottom)"
+            }
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Failed to create room: {str(e)}"
+        }
+
+@mcp.tool()
+def get_room_state(room_id: str = None) -> dict:
+    """
+    Get the current state of a tic-tac-toe room in markdown format.
+    Args:
+        room_id (str, optional): Room ID to check (uses current active room if not provided)
+    Returns:
+        dict: Current room state with markdown representation
+    """
+    global current_session
+    try:
+        # Use provided room_id or current active room
+        target_room_id = room_id or current_session.get('active_room_id')
+        
+        if not target_room_id:
+            return {
+                "status": "error",
+                "message": "No active room. Create a room first using create_room()."
+            }
+        
+        if target_room_id not in rooms:
+            return {
+                "status": "error",
+                "message": f"Room {target_room_id} not found. It may have been cleaned up."
+            }
+        
+        room = rooms[target_room_id]
+        
+        return {
+            "status": "success",
+            "room_id": target_room_id,
+            "markdown_state": room.to_markdown(),
+            "game_status": room.game_status,
+            "current_player": room.current_player,
+            "moves_made": room.moves_count,
+            "your_turn": room.current_player == 'X' and room.game_status == 'active'
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Failed to get room state: {str(e)}"
+        }
+
+@mcp.tool()
+async def make_move(position: int, room_id: str = None) -> dict:
+    """
+    Make a move in a tic-tac-toe game. This will also trigger the AI's response move.
+    Args:
+        position (int): Board position (0-8, left to right, top to bottom)
+        room_id (str, optional): Room ID (uses current active room if not provided)
+    Returns:
+        dict: Result of your move and the AI's response with updated game state
+    """
+    global current_session
+    try:
+        # Use provided room_id or current active room
+        target_room_id = room_id or current_session.get('active_room_id')
+        
+        if not target_room_id:
+            return {
+                "status": "error",
+                "message": "No active room. Create a room first using create_room()."
+            }
+        
+        if target_room_id not in rooms:
+            return {
+                "status": "error",
+                "message": f"Room {target_room_id} not found."
+            }
+        
+        room = rooms[target_room_id]
+        
+        # Validate move
+        if position < 0 or position > 8:
+            return {
+                "status": "error",
+                "message": "Invalid position. Use 0-8 (left to right, top to bottom)."
+            }
+        
+        if room.game_status != 'active':
+            return {
+                "status": "error", 
+                "message": f"Game is over. Status: {room.game_status}",
+                "markdown_state": room.to_markdown()
+            }
+        
+        if room.current_player != 'X':
+            return {
+                "status": "error",
+                "message": "It's not your turn! Wait for AI to move.",
+                "markdown_state": room.to_markdown()
+            }
+        
+        # Make human move
+        if not room.make_move(position, 'X'):
+            return {
+                "status": "error",
+                "message": f"Invalid move! Position {position} may already be occupied.",
+                "markdown_state": room.to_markdown()
+            }
+        
+        result_message = f"✅ You played X at position {position}\n\n"
+        
+        # Check if game ended after human move
+        if room.game_status != 'active':
+            if room.winner == 'X':
+                result_message += "🎉 Congratulations! You won!\n\n"
+            else:
+                result_message += "🤝 It's a draw!\n\n"
+            
+            result_message += room.to_markdown()
+            return {
+                "status": "success",
+                "message": result_message,
+                "game_over": True,
+                "winner": room.winner
+            }
+        
+        # Get AI move
+        try:
+            ai_response = get_ai_move_for_room(room)
+            if ai_response and 'move' in ai_response:
+                room.make_move(ai_response['move'], 'O')
+                if 'message' in ai_response:
+                    room.add_chat_message(ai_response['message'], 'ai')
+                
+                result_message += f"🤖 Mistral AI played O at position {ai_response['move']}\n"
+                if 'message' in ai_response:
+                    result_message += f"💬 Mistral says: \"{ai_response['message']}\"\n\n"
+                else:
+                    result_message += "\n"
+                
+                # Check if AI won
+                if room.game_status == 'won' and room.winner == 'O':
+                    result_message += "💀 Mistral AI wins this round!\n\n"
+                elif room.game_status == 'draw':
+                    result_message += "🤝 It's a draw!\n\n"
+            else:
+                result_message += "⚠️ AI move failed, but you can continue\n\n"
+                
+        except Exception as e:
+            result_message += f"⚠️ AI move error: {str(e)}\n\n"
+        
+        result_message += room.to_markdown()
+        
+        return {
+            "status": "success",
+            "message": result_message,
+            "game_over": room.game_status != 'active',
+            "winner": room.winner if room.game_status == 'won' else None,
+            "your_turn": room.current_player == 'X' and room.game_status == 'active'
+        }
+        
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Failed to make move: {str(e)}"
+        }
+
+@mcp.tool()
+async def send_chat(message: str, room_id: str = None) -> dict:
+    """
+    Send a chat message to Mistral AI in the current game room.
+    Args:
+        message (str): Your message to send to the AI
+        room_id (str, optional): Room ID (uses current active room if not provided)
+    Returns:
+        dict: Your message and the AI's response with updated room state
+    """
+    global current_session
+    try:
+        # Use provided room_id or current active room
+        target_room_id = room_id or current_session.get('active_room_id')
+        
+        if not target_room_id:
+            return {
+                "status": "error",
+                "message": "No active room. Create a room first using create_room()."
+            }
+        
+        if target_room_id not in rooms:
+            return {
+                "status": "error",
+                "message": f"Room {target_room_id} not found."
+            }
+        
+        room = rooms[target_room_id]
+        
+        # Add user message
+        room.add_chat_message(message, 'user')
+        
+        # Get AI response
+        ai_response = get_ai_chat_for_room(room, message)
+        room.add_chat_message(ai_response, 'ai')
+        
+        result_message = f"💬 **You:** {message}\n💬 **Mistral AI:** {ai_response}\n\n"
+        result_message += room.to_markdown()
+        
+        return {
+            "status": "success",
+            "message": result_message,
+            "your_message": message,
+            "ai_response": ai_response
+        }
+        
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Failed to send chat: {str(e)}"
+        }
+
+@mcp.tool()
+def list_rooms() -> dict:
+    """
+    List all active tic-tac-toe game rooms.
+    Returns:
+        dict: List of active rooms with their status
+    """
+    try:
+        if not rooms:
+            return {
+                "status": "success",
+                "message": "No active rooms. Use create_room() to start a new game!",
+                "active_rooms": [],
+                "count": 0
+            }
+        
+        room_list = []
+        for room_id, room in rooms.items():
+            room_info = {
+                "room_id": room_id,
+                "game_status": room.game_status,
+                "current_player": room.current_player,
+                "moves_count": room.moves_count,
+                "winner": room.winner,
+                "is_your_turn": room.current_player == 'X' and room.game_status == 'active',
+                "is_active": current_session.get('active_room_id') == room_id
+            }
+            room_list.append(room_info)
+        
+        active_room_id = current_session.get('active_room_id')
+        message = f"Found {len(room_list)} active rooms."
+        if active_room_id:
+            message += f" Current active room: {active_room_id}"
+        
+        return {
+            "status": "success",
+            "message": message,
+            "active_rooms": room_list,
+            "count": len(room_list),
+            "current_active_room": active_room_id
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Failed to list rooms: {str(e)}"
+        }
+
+@mcp.tool()
+def switch_room(room_id: str) -> dict:
+    """
+    Switch to a different active room.
+    Args:
+        room_id (str): Room ID to switch to
+    Returns:
+        dict: Confirmation of room switch with current state
+    """
+    global current_session
+    try:
+        if room_id not in rooms:
+            return {
+                "status": "error",
+                "message": f"Room {room_id} not found. Use list_rooms() to see available rooms."
+            }
+        
+        current_session['active_room_id'] = room_id
+        room = rooms[room_id]
+        
+        return {
+            "status": "success",
+            "message": f"Switched to room {room_id}",
+            "room_id": room_id,
+            "markdown_state": room.to_markdown(),
+            "your_turn": room.current_player == 'X' and room.game_status == 'active'
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Failed to switch room: {str(e)}"
+        }
+
+@mcp.tool()
+def get_help() -> dict:
+    """
+    Get help information about playing tic-tac-toe.
+    Returns:
+        dict: Instructions and tips for playing the game
+    """
+    return {
+        "status": "success",
+        "message": "Tic-Tac-Toe Game Help",
+        "instructions": {
+            "how_to_play": [
+                "1. Create a new game room with create_room()",
+                "2. Make moves using make_move(position) where position is 0-8",
+                "3. Chat with Mistral AI using send_chat('your message')",
+                "4. Check game state anytime with get_room_state()"
+            ],
+            "board_layout": {
+                "description": "Board positions (0-8):",
+                "layout": [
+                    "0 | 1 | 2",
+                    "---------", 
+                    "3 | 4 | 5",
+                    "---------",
+                    "6 | 7 | 8"
+                ]
+            },
+            "symbols": {
+                "you": "X (you go first)",
+                "ai": "O (Mistral AI)"
+            },
+            "tips": [
+                "The AI has personality and will trash talk!",
+                "You can have multiple rooms active at once",
+                "Use list_rooms() to see all your games",
+                "Use switch_room(room_id) to change between games"
+            ]
+        },
+        "available_commands": [
+            "create_room() - Start a new game",
+            "make_move(position) - Make your move (0-8)",
+            "send_chat('message') - Chat with AI", 
+            "get_room_state() - Check current game",
+            "list_rooms() - See all active games",
+            "switch_room(room_id) - Change active room",
+            "get_help() - Show this help"
+        ]
+    }
+
+@mcp.tool()
+async def wait_5_seconds() -> dict:
+    """
+    Wait for 5 seconds. Useful for giving the AI time to respond or timing operations.
+    Returns:
+        dict: Status of the wait operation
+    """
+    try:
+        await asyncio.sleep(5)
+        return {
+            "status": "success",
+            "message": "Waited 5 seconds successfully"
+        }
+    except Exception as e:
+        return {
+            "status": "error",
+            "message": f"Failed to wait: {str(e)}"
+        }
+
+# --- Server Execution ---
+if __name__ == "__main__":
+    print(f"Tic-Tac-Toe Rooms MCP Server starting on port 7860...")
+    print("Available game features:")
+    print("- Create multiple game rooms")
+    print("- Play against Mistral AI with personality") 
+    print("- Real-time chat with the AI")
+    print("- Markdown state representation")
+    print("- Room management and switching")
+    print()
+    print("MCP Tools available:")
+    print("- create_room()")
+    print("- make_move(position)")
+    print("- send_chat(message)")
+    print("- get_room_state()")
+    print("- list_rooms()")
+    print("- get_help()")
+    print()
+    print("This MCP server is ready for LeChat integration!")
+    print("Running Tic-Tac-Toe MCP server with SSE transport")
+    mcp.run(transport="sse")

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+flask-cors==4.0.0
+mistralai
+python-dotenv
+mcp

room_game.html

@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Room-Based Tic-Tac-Toe vs Mistral AI</title>
+    <style>
+        body {
+            font-family: 'Courier New', monospace;
+            background: #1a1a1a;
+            color: #00ff00;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            height: 100vh;
+            gap: 20px;
+        }
+
+        .game-container {
+            display: flex;
+            gap: 20px;
+            width: 100%;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        .room-panel {
+            flex: 0 0 250px;
+            background: #222;
+            border: 1px solid #444;
+            border-radius: 5px;
+            padding: 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .room-header {
+            color: #00ccff;
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+
+        .room-info {
+            background: #333;
+            padding: 10px;
+            border-radius: 3px;
+            font-size: 12px;
+        }
+
+        .room-controls button {
+            width: 100%;
+            background: #4ecdc4;
+            color: white;
+            border: none;
+            padding: 10px;
+            margin-bottom: 10px;
+            cursor: pointer;
+            font-family: 'Courier New', monospace;
+            border-radius: 3px;
+        }
+
+        .room-controls button:hover {
+            background: #45a7a0;
+        }
+
+        .room-id-input {
+            width: 100%;
+            background: #333;
+            border: 1px solid #555;
+            color: #00ff00;
+            padding: 8px;
+            font-family: 'Courier New', monospace;
+            margin-bottom: 10px;
+        }
+
+        .markdown-panel {
+            flex: 0 0 300px;
+            background: #222;
+            border: 1px solid #444;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+
+        .markdown-header {
+            background: #333;
+            padding: 10px;
+            text-align: center;
+            color: #00ccff;
+            font-weight: bold;
+        }
+
+        .markdown-content {
+            padding: 15px;
+            font-size: 12px;
+            line-height: 1.4;
+            max-height: 600px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+        }
+
+        .game-board {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        .title {
+            font-size: 24px;
+            margin-bottom: 20px;
+            text-align: center;
+            color: #00ccff;
+        }
+
+        .board {
+            display: grid;
+            grid-template-columns: repeat(3, 100px);
+            grid-template-rows: repeat(3, 100px);
+            gap: 2px;
+            background: #333;
+            padding: 2px;
+            margin-bottom: 20px;
+        }
+
+        .cell {
+            background: #222;
+            border: 1px solid #555;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 36px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .cell:hover {
+            background: #333;
+        }
+
+        .cell.x {
+            color: #ff6b6b;
+        }
+
+        .cell.o {
+            color: #4ecdc4;
+        }
+
+        .status {
+            font-size: 18px;
+            margin-bottom: 20px;
+            text-align: center;
+            color: #ffff99;
+        }
+
+        .reset-btn {
+            background: #ff6b6b;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            font-family: 'Courier New', monospace;
+            margin-bottom: 20px;
+        }
+
+        .reset-btn:hover {
+            background: #ff5252;
+        }
+
+        .chat-container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            background: #222;
+            border: 1px solid #444;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+
+        .chat-header {
+            background: #333;
+            padding: 10px;
+            text-align: center;
+            color: #00ccff;
+            font-weight: bold;
+        }
+
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            max-height: 400px;
+        }
+
+        .message {
+            margin-bottom: 10px;
+            padding: 8px;
+            border-radius: 5px;
+        }
+
+        .message.user {
+            background: #1a4a1a;
+            align-self: flex-end;
+            text-align: right;
+        }
+
+        .message.ai {
+            background: #1a1a4a;
+            align-self: flex-start;
+        }
+
+        .message-sender {
+            font-weight: bold;
+            font-size: 12px;
+            margin-bottom: 4px;
+        }
+
+        .user .message-sender {
+            color: #ff6b6b;
+        }
+
+        .ai .message-sender {
+            color: #4ecdc4;
+        }
+
+        .chat-input {
+            display: flex;
+            padding: 10px;
+            background: #333;
+        }
+
+        .chat-input input {
+            flex: 1;
+            background: #222;
+            border: 1px solid #555;
+            color: #00ff00;
+            padding: 8px;
+            font-family: 'Courier New', monospace;
+        }
+
+        .chat-input button {
+            background: #4ecdc4;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            cursor: pointer;
+            font-family: 'Courier New', monospace;
+        }
+
+        .loading {
+            opacity: 0.6;
+        }
+
+        .no-room {
+            text-align: center;
+            color: #888;
+            font-style: italic;
+            margin-top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <!-- Room Management Panel -->
+        <div class="room-panel">
+            <div class="room-header">🏠 Room Management</div>
+            
+            <div class="room-controls">
+                <button onclick="createNewRoom()">Create New Room</button>
+                <input type="text" class="room-id-input" id="roomIdInput" placeholder="Enter Room ID">
+                <button onclick="joinRoom()">Join Room</button>
+                <button onclick="leaveRoom()">Leave Room</button>
+            </div>
+
+            <div class="room-info" id="roomInfo">
+                <div>Status: No room selected</div>
+                <div>Room ID: -</div>
+                <div>Game Status: -</div>
+                <div>Your Turn: -</div>
+            </div>
+        </div>
+
+        <!-- Markdown Display Panel -->
+        <div class="markdown-panel">
+            <div class="markdown-header">📝 Game State (Markdown)</div>
+            <div class="markdown-content" id="markdownContent">
+                Select or create a room to see the markdown representation...
+            </div>
+        </div>
+
+        <!-- Game Board -->
+        <div class="game-board">
+            <h1 class="title">🎮 Room-Based Tic-Tac-Toe</h1>
+            
+            <div class="status" id="gameStatus">Create or join a room to start playing!</div>
+            
+            <div id="gameArea" style="display: none;">
+                <div class="board" id="gameBoard">
+                    <div class="cell" data-index="0"></div>
+                    <div class="cell" data-index="1"></div>
+                    <div class="cell" data-index="2"></div>
+                    <div class="cell" data-index="3"></div>
+                    <div class="cell" data-index="4"></div>
+                    <div class="cell" data-index="5"></div>
+                    <div class="cell" data-index="6"></div>
+                    <div class="cell" data-index="7"></div>
+                    <div class="cell" data-index="8"></div>
+                </div>
+                
+                <button class="reset-btn" onclick="resetGame()">New Game (Same Room)</button>
+            </div>
+
+            <div class="no-room" id="noRoom">
+                👆 Create a new room or join an existing one to start playing!
+            </div>
+        </div>
+
+        <!-- Chat Panel -->
+        <div class="chat-container">
+            <div class="chat-header">💬 Chat with Mistral AI</div>
+            
+            <div class="chat-messages" id="chatMessages">
+                <div class="message ai">
+                    <div class="message-sender">System:</div>
+                    <div>Create or join a room to start chatting with Mistral AI!</div>
+                </div>
+            </div>
+            
+            <div class="chat-input">
+                <input type="text" id="chatInput" placeholder="Join a room first..." onkeypress="handleEnter(event)" disabled>
+                <button onclick="sendChatMessage()" disabled id="sendBtn">Send</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="room_game.js"></script>
+</body>
+</html>

room_game.js

@@ -0,0 +1,371 @@
+class RoomTicTacToeGame {
+    constructor() {
+        this.currentRoomId = null;
+        this.roomData = null;
+        this.cells = document.querySelectorAll('.cell');
+        this.gameStatus = document.getElementById('gameStatus');
+        this.roomInfo = document.getElementById('roomInfo');
+        this.markdownContent = document.getElementById('markdownContent');
+        this.chatMessages = document.getElementById('chatMessages');
+        this.chatInput = document.getElementById('chatInput');
+        this.sendBtn = document.getElementById('sendBtn');
+        this.gameArea = document.getElementById('gameArea');
+        this.noRoom = document.getElementById('noRoom');
+        
+        this.initGame();
+    }
+
+    initGame() {
+        this.cells.forEach((cell, index) => {
+            cell.addEventListener('click', () => this.handleCellClick(index));
+        });
+
+        // Update room state every 2 seconds if in a room
+        setInterval(() => {
+            if (this.currentRoomId) {
+                this.refreshRoomState();
+            }
+        }, 2000);
+    }
+
+    async createNewRoom() {
+        try {
+            const response = await fetch('/rooms', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.joinRoomById(data.room_id);
+            
+        } catch (error) {
+            console.error('Failed to create room:', error);
+            this.gameStatus.textContent = "Failed to create room. Try again.";
+        }
+    }
+
+    async joinRoom() {
+        const roomId = document.getElementById('roomIdInput').value.trim();
+        if (!roomId) {
+            this.gameStatus.textContent = "Please enter a room ID";
+            return;
+        }
+        
+        await this.joinRoomById(roomId);
+    }
+
+    async joinRoomById(roomId) {
+        try {
+            const response = await fetch(`/rooms/${roomId}`);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.currentRoomId = roomId;
+            this.roomData = data.room_data;
+            
+            // Clear the input
+            document.getElementById('roomIdInput').value = '';
+            
+            // Show game area and enable chat
+            this.gameArea.style.display = 'block';
+            this.noRoom.style.display = 'none';
+            this.chatInput.disabled = false;
+            this.sendBtn.disabled = false;
+            this.chatInput.placeholder = "Type a message...";
+            
+            // Update display
+            this.updateDisplay();
+            this.updateMarkdown(data.markdown);
+            this.loadChatHistory();
+            
+            this.gameStatus.textContent = `Joined room ${roomId}!`;
+            
+        } catch (error) {
+            console.error('Failed to join room:', error);
+            this.gameStatus.textContent = `Failed to join room ${roomId}. Check the room ID.`;
+        }
+    }
+
+    leaveRoom() {
+        this.currentRoomId = null;
+        this.roomData = null;
+        
+        // Hide game area and disable chat
+        this.gameArea.style.display = 'none';
+        this.noRoom.style.display = 'block';
+        this.chatInput.disabled = true;
+        this.sendBtn.disabled = true;
+        this.chatInput.placeholder = "Join a room first...";
+        
+        // Clear display
+        this.clearBoard();
+        this.gameStatus.textContent = "Create or join a room to start playing!";
+        this.updateRoomInfo();
+        this.markdownContent.textContent = "Select or create a room to see the markdown representation...";
+        
+        // Clear chat
+        this.chatMessages.innerHTML = `
+            <div class="message ai">
+                <div class="message-sender">System:</div>
+                <div>Create or join a room to start chatting with Mistral AI!</div>
+            </div>
+        `;
+    }
+
+    async refreshRoomState() {
+        if (!this.currentRoomId) return;
+        
+        try {
+            const response = await fetch(`/rooms/${this.currentRoomId}`);
+            
+            if (!response.ok) {
+                if (response.status === 404) {
+                    this.gameStatus.textContent = "Room no longer exists!";
+                    this.leaveRoom();
+                    return;
+                }
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.roomData = data.room_data;
+            this.updateDisplay();
+            this.updateMarkdown(data.markdown);
+            
+        } catch (error) {
+            console.error('Failed to refresh room:', error);
+        }
+    }
+
+    async handleCellClick(index) {
+        if (!this.currentRoomId || !this.roomData) {
+            this.gameStatus.textContent = "Join a room first!";
+            return;
+        }
+
+        if (this.roomData.game_status !== 'active' || 
+            this.roomData.board[index] !== '' || 
+            this.roomData.current_player !== 'X') {
+            return;
+        }
+
+        this.gameStatus.textContent = "Making your move...";
+        
+        try {
+            const response = await fetch(`/rooms/${this.currentRoomId}/move`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    position: index
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.roomData = data.room_data;
+            this.updateDisplay();
+            this.updateMarkdown(data.markdown);
+            this.loadChatHistory(); // Reload chat to get AI's move message
+            
+            if (this.roomData.game_status === 'active') {
+                this.gameStatus.textContent = "Mistral is thinking...";
+                setTimeout(() => {
+                    if (this.roomData.current_player === 'X') {
+                        this.gameStatus.textContent = "Your turn! Click a square.";
+                    }
+                }, 1000);
+            }
+            
+        } catch (error) {
+            console.error('Move failed:', error);
+            this.gameStatus.textContent = "Move failed. Try again.";
+        }
+    }
+
+    async sendChatMessage() {
+        if (!this.currentRoomId) {
+            return;
+        }
+
+        const message = this.chatInput.value.trim();
+        if (!message) return;
+        
+        this.chatInput.value = '';
+        
+        try {
+            const response = await fetch(`/rooms/${this.currentRoomId}/chat`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    message: message
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            this.roomData = data.room_data;
+            this.updateMarkdown(data.markdown);
+            this.loadChatHistory();
+            
+        } catch (error) {
+            console.error('Chat failed:', error);
+            this.addChatMessage("Failed to send message", 'system');
+        }
+    }
+
+    updateDisplay() {
+        if (!this.roomData) return;
+
+        // Update board
+        this.roomData.board.forEach((cell, index) => {
+            this.cells[index].textContent = cell;
+            this.cells[index].className = 'cell';
+            if (cell) {
+                this.cells[index].classList.add(cell.toLowerCase());
+            }
+        });
+
+        // Update game status
+        if (this.roomData.game_status === 'won') {
+            const winner = this.roomData.winner === 'X' ? 'You' : 'Mistral AI';
+            this.gameStatus.textContent = `🎉 ${winner} won!`;
+        } else if (this.roomData.game_status === 'draw') {
+            this.gameStatus.textContent = "🤝 It's a draw!";
+        } else if (this.roomData.current_player === 'X') {
+            this.gameStatus.textContent = "Your turn! Click a square.";
+        } else {
+            this.gameStatus.textContent = "Mistral's turn...";
+        }
+
+        this.updateRoomInfo();
+    }
+
+    updateRoomInfo() {
+        if (!this.roomData || !this.currentRoomId) {
+            this.roomInfo.innerHTML = `
+                <div>Status: No room selected</div>
+                <div>Room ID: -</div>
+                <div>Game Status: -</div>
+                <div>Your Turn: -</div>
+            `;
+            return;
+        }
+
+        const isYourTurn = this.roomData.current_player === 'X' && this.roomData.game_status === 'active';
+        this.roomInfo.innerHTML = `
+            <div>Status: Connected</div>
+            <div>Room ID: ${this.currentRoomId}</div>
+            <div>Game Status: ${this.roomData.game_status}</div>
+            <div>Your Turn: ${isYourTurn ? 'Yes' : 'No'}</div>
+            <div>Moves: ${this.roomData.moves_count}/9</div>
+        `;
+    }
+
+    updateMarkdown(markdown) {
+        if (markdown) {
+            this.markdownContent.textContent = markdown;
+        }
+    }
+
+    loadChatHistory() {
+        if (!this.roomData || !this.roomData.chat_history) return;
+
+        this.chatMessages.innerHTML = '';
+        
+        this.roomData.chat_history.forEach(msg => {
+            this.addChatMessage(msg.message, msg.sender);
+        });
+    }
+
+    addChatMessage(message, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}`;
+        
+        const senderDiv = document.createElement('div');
+        senderDiv.className = 'message-sender';
+        
+        let senderName;
+        if (sender === 'user') senderName = 'You:';
+        else if (sender === 'ai') senderName = 'Mistral AI:';
+        else senderName = 'System:';
+        
+        senderDiv.textContent = senderName;
+        
+        const contentDiv = document.createElement('div');
+        contentDiv.textContent = message;
+        
+        messageDiv.appendChild(senderDiv);
+        messageDiv.appendChild(contentDiv);
+        this.chatMessages.appendChild(messageDiv);
+        
+        // Scroll to bottom
+        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
+    }
+
+    clearBoard() {
+        this.cells.forEach(cell => {
+            cell.textContent = '';
+            cell.className = 'cell';
+        });
+    }
+
+    async resetGame() {
+        if (!this.currentRoomId) return;
+        
+        // Create a new room instead of resetting current one
+        await this.createNewRoom();
+    }
+}
+
+// Global functions for HTML onclick events
+let game;
+
+function createNewRoom() {
+    game.createNewRoom();
+}
+
+function joinRoom() {
+    game.joinRoom();
+}
+
+function leaveRoom() {
+    game.leaveRoom();
+}
+
+function sendChatMessage() {
+    game.sendChatMessage();
+}
+
+function handleEnter(event) {
+    if (event.key === 'Enter') {
+        sendChatMessage();
+    }
+}
+
+function resetGame() {
+    game.resetGame();
+}
+
+// Initialize game when page loads
+document.addEventListener('DOMContentLoaded', () => {
+    game = new RoomTicTacToeGame();
+});