rver.py <-- Your existing server script ├── documents/ <-- Folder needed by server.py │ └── ... (your PDFs) ├── .env <-- File needed by server.py └── chroma_db_data/ <-- Directory created/used by server.py ``` --- ### 1. Base Template (`templates/base.html`) This is the template you provided, setting up the background and Tailwind CSS. ```html {% block title %}Watsonx RAG Chat{% endblock %} {# Default background if image fails #}

{% block content %}{% endblock %}

{# Optional: Add scripts here if needed globally #} ``` *(Note: Updated Tailwind CDN link and added `background-attachment: fixed` and flexbox layout to better handle content centering and scrolling with the fixed background).* --- ### 2. Chat Interface Template (`templates/chat.html`) This template extends `base.html` and creates the chat UI. ```html {% extends 'base.html' %} {% block title %}Watsonx RAG Chat{% endblock %} {% block content %}

Chat with PDF Manuals

Clear Chat

{% if not history %}

Ask a question about the PDF documents!

{% endif %} {% for message in history %} {% if message.role == 'user' %}

{% elif message.role == 'assistant' %}

{# Use safe filter or pre tags if response might contain HTML/code #}

{{ message.content }}

{% elif message.role == 'error' %}

Error: {{ message.content }}

{% endif %} {% endfor %}

Building a Watsonx.ai Chatbot RAG Server with MCP

Comments