Actualizar README.md y crear realREADME.md con una introducción detallada del agente, enlaces útiles y una descripción de la arquitectura. Modificar la interfaz para incluir un bloque de Markdown y mejorar la navegación.

README.md

@@ -13,7 +13,10 @@ tags:
 
 # 🧙‍♂️ LLM Game Master Agent 🐉
 
-## Useful Links:
+## 🧩 Complete Architecture Overview
+![Architecture Overview](https://huggingface.co/spaces/Agents-MCP-Hackathon/LLM-GameMaster-Agent/resolve/main/media/architecture.png)
+
+## 🔗 Useful Links:
 - [Owlbear Rodeo Chat Interface](https://github.com/Agamador/OwlBear-llm-chat)
 - [MCP server](https://huggingface.co/spaces/Agents-MCP-Hackathon/LLM-GameMaster-MPC-Server)
 - [Video Demo](https://www.youtube.com/watch?v=8b1k2g3Z4aY)
@@ -30,7 +33,7 @@ The LLM Game Master Agent utilizes [LangGraph](https://github.com/langchain-ai/l
 
 The implementation uses LangGraph's `create_react_agent` function to create a reactive agent that can maintain conversation state, reason over multiple steps, and make informed decisions based on the complete tools execution trace.
 
-![./media/reactAgent.png](./media/reactagent.png)
+![React Agent Diagram](https://huggingface.co/spaces/Agents-MCP-Hackathon/LLM-GameMaster-Agent/resolve/main/media/reactAgent.png)
 
 ## 🔌 MCP Client: Integration with External Tools
 

app.py

@@ -353,20 +353,17 @@ api_demo = gr.Interface(
     outputs="text",    title="OwlBear Agent - Original API"
 )
 
-with open("README.md", "r") as f:
+with open("realREADME.md", "r", encoding="utf-8") as f:
     readme = f.read()
 
-intro_demo = gr.Markdown(
-    readme,
-    title="🧙🏼‍♂️ LLM Game Master - Agen",
-    description="This interface introduces the Agent",
-    api_name=False,
-)
+# Crear un bloque para contener el Markdown, en lugar de usar Markdown directamente
+with gr.Blocks() as intro_demo:
+    gr.Markdown(readme)
 
 # Combined interface with tabs
 combined_demo = gr.TabbedInterface(
     [intro_demo, demo, api_demo],
-    ["Complete View with History", "Original API"],
+    ["README", "Complete View with History", "Original API"],
     title="🧙🏼‍♂️ LLM Game Master - Agent"
 )
 

realREADME.md

@@ -0,0 +1,64 @@
+# 🧙‍♂️ LLM Game Master Agent 🐉
+
+## 🧩 Complete Architecture Overview
+![Architecture Overview](https://huggingface.co/spaces/Agents-MCP-Hackathon/LLM-GameMaster-Agent/resolve/main/media/architecture.png)
+
+## 🔗 Useful Links:
+- [Owlbear Rodeo Chat Interface](https://github.com/Agamador/OwlBear-llm-chat)
+- [MCP server](https://huggingface.co/spaces/Agents-MCP-Hackathon/LLM-GameMaster-MPC-Server)
+- [Video Demo](https://www.youtube.com/watch?v=8b1k2g3Z4aY)
+
+## 🌟 Introduction
+
+The **LLM Game Master Agent** is a sophisticated AI system designed as a Game Master (GM) for solo medieval fantasy role-playing sessions. This cutting-edge application showcases the power of LangGraph React architecture combined with Model Context Protocol (MCP) technology, creating an immersive and highly adaptive gaming experience unlike anything seen before.
+
+Unlike conventional chatbots, this intelligent agent generates dynamic and personalized narratives where YOU become the protagonist in epic fantasy stories. The application leverages state-of-the-art language models to deliver a gaming experience comparable to traditional sessions with a human Game Master, but with the added benefits of AI-powered adaptability and endless creative possibilities.
+
+## 🧠 LangGraph React: The System Core
+
+The LLM Game Master Agent utilizes [LangGraph](https://github.com/langchain-ai/langgraph) as the central component of its architecture, implementing the React pattern for complex task management. 
+
+The implementation uses LangGraph's `create_react_agent` function to create a reactive agent that can maintain conversation state, reason over multiple steps, and make informed decisions based on the complete tools execution trace.
+
+![React Agent Diagram](https://huggingface.co/spaces/Agents-MCP-Hackathon/LLM-GameMaster-Agent/resolve/main/media/reactAgent.png)
+
+## 🔌 MCP Client: Integration with External Tools
+
+The system implements a [Model Context Protocol (MCP)](https://github.com/microsoft/model-context-protocol) client that connects to an external MCP server. This client-server architecture allows the agent to access specialized gaming tools without implementing them directly in the codebase.
+
+The implementation uses MCP-specific adapters for LangChain that facilitate communication between the agent and the tools server.
+
+This architecture separates the agent logic from the tool implementation, making the system more modular and easier to maintain. The agent can invoke tools as needed through the MCP connection, while focusing on its core narrative generation and decision-making capabilities.
+
+## 🤖 Language Model Orchestration
+
+The system uses [LangChain](https://www.langchain.com/) to orchestrate language models, offering compatibility with:
+
+- **Anthropic Claude**: Claude 3 models via API
+- **Ollama**: Local deployment of models for self-hosted scenarios
+
+This flexibility allows selecting the most suitable model based on performance requirements and availability.
+
+## 🖥️ Gradio User Interface
+
+The application features a complete web interface built with Gradio, offering two main views:
+
+1. **Complete View with History**: Shows the conversation along with detailed execution tracking including tools and agent messages.
+2. **Original API**: A simpler interface for API access.
+
+The interface includes features for:
+
+- Tracking multiple sessions via tab IDs
+- Detailed visualization of tool calls and their results
+- Session management controls
+- API key configuration
+
+The execution history provides complete transparency into the agent's decision-making process, showing each step of the interaction between the user, agent, and tools.
+
+
+## 🔗 Links & Resources
+
+- [LangGraph Documentation](https://github.com/langchain-ai/langgraph)
+- [Model Context Protocol (MCP)](https://github.com/microsoft/model-context-protocol)
+- [LangChain](https://www.langchain.com/)
+- [Gradio](https://www.gradio.app/)