docs: update architecture diagrams and readme to include openai chat app integration

README.md

@@ -125,6 +125,39 @@ Each agent has **filtered tool access**:
 - PlannerAgent: All Flixbus tools, blocked from map tools
 - ItineraryAgent: Only `gm_walking_dir_tool` + `get_city_info_tool`
 
+## OpenAI ChatGPT App Integration
+
+This MCP server is fully compatible with the **OpenAI ChatGPT**. You can connect the MCP server to ChatGPT and use the Flixbus tools directly within conversations.
+
+### Rich UI Widgets
+
+When used through the ChatGPT app, tools render **interactive visual widgets** instead of raw JSON:
+
+| Tool | Widget |
+|------|--------|
+| `get_city_info_tool` | City card with name, country, coordinates, and Flixbus UUID |
+| `search_cities_in_radius_tool` | Grid of city cards showing nearby destinations |
+| `get_tripe_options_list_tool` | Trip options with prices, times, and booking links |
+
+Widgets are implemented as HTML/CSS/JS components in `src/tools/widgets/` and registered using Gradio's `@gr.mcp.resource()` decorator with OpenAI-specific metadata:
+
+```python
+@gr.mcp.tool(
+    name="get_city_info_tool",
+    _meta={
+        "openai/outputTemplate": "ui://widget/get_city_info_widget.html",
+        "openai/resultCanProduceWidget": True,
+        "openai/widgetAccessible": True,
+    },
+)
+```
+
+### Connecting to ChatGPT
+
+1. In ChatGPT app, go to Settings -> Apps & connections -> Enable Developer mode -> Create app with the folloing MCP endpoint
+2. MCP endpoint: `https://mcp-1st-birthday-backpacking-assistant.hf.space/gradio_api/mcp/`
+3. The Flixbus tools will appear in your ChatGPT conversations
+
 ## Request Flow
 
 1. User fills form in Gradio UI

docs/diagrams/architecture_detailed.mmd

@@ -14,7 +14,7 @@ config:
     deterministicIDSeed: 46
     flowchart:
         useMaxWidth: false
-        wrappingWidth: 250
+        wrappingWidth: 350
         inheritDir: true
         curve: linear
     gantt:
@@ -37,6 +37,17 @@ flowchart LR
 
     end
 
+
+    %% OpenAI ChatGPT App
+    subgraph OpenAIChatGPTApp["OpenAI ChatGPT"]
+
+      gpt_app("`
+        Backpacking Assistant ChatGPT App
+        Our MCP server supports OpenAI ChatGPT app widgets
+      `")
+
+    end
+
     %% Blaxel
     subgraph Blaxel["Blaxel Platform"]
 
@@ -77,7 +88,8 @@ flowchart LR
     ux_agent ux_agent__blaxel_llm_sandbox@--HTTPS--> blaxel_llm_sandbox
     ux_agent ux_agent__api_gateway@--> api_gateway
     
-    
+    %% gpt app connections
+    gpt_app gpt_app__mcp_server@--> mcp_server
     
 
     %% styles
@@ -102,5 +114,8 @@ flowchart LR
     class ux_agent__blaxel_llm_sandbox animate_stroke
     class ux_agent__api_gateway animate_stroke
 
+    %% gpt app connections
+    class gpt_app__mcp_server animate_stroke
+
     %% global styles
     classDef animate_stroke stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;

docs/diagrams/architecture_lite.mmd

@@ -14,7 +14,7 @@ config:
     deterministicIDSeed: 46
     flowchart:
         useMaxWidth: false
-        wrappingWidth: 250
+        wrappingWidth: 350
         inheritDir: true
         curve: linear
     gantt:
@@ -37,6 +37,16 @@ flowchart LR
 
     end
 
+    %% OpenAI ChatGPT App
+    subgraph OpenAIChatGPTApp["OpenAI ChatGPT"]
+
+      gpt_app("`
+        Backpacking Assistant ChatGPT App
+        Our MCP server supports OpenAI ChatGPT app widgets
+      `")
+
+    end
+
     %% Blaxel
     subgraph Blaxel["Blaxel Platform"]
 
@@ -68,6 +78,7 @@ flowchart LR
     BackpackingAssistantAgent BackpackingAssistantAgent__blaxel_search_mcp@--> blaxel_search_mcp
     BackpackingAssistantAgent BackpackingAssistantAgent__mcp_server@--> mcp_server
     
+    gpt_app gpt_app__mcp_server@--> mcp_server
     
     %% styles
     class user__ui_app animate_stroke
@@ -82,5 +93,7 @@ flowchart LR
     class BackpackingAssistantAgent__blaxel_search_mcp animate_stroke
     class BackpackingAssistantAgent__mcp_server animate_stroke
 
+    class gpt_app__mcp_server animate_stroke
+
     %% global styles
     classDef animate_stroke stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 25s linear infinite;