{"id":5383,"date":"2025-02-09T21:18:40","date_gmt":"2025-02-09T21:18:40","guid":{"rendered":"https:\/\/blog.gordonbuchan.com\/blog\/?p=5383"},"modified":"2025-02-10T18:12:19","modified_gmt":"2025-02-10T18:12:19","slug":"creating-a-wordpress-chatbot-using-facebook-ai-similarity-search-faiss-for-retrieval-augmented-generation-rag-and-an-external-large-language-model-llm-application-programming-interface-api","status":"publish","type":"post","link":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/2025\/02\/09\/creating-a-wordpress-chatbot-using-facebook-ai-similarity-search-faiss-for-retrieval-augmented-generation-rag-and-an-external-large-language-model-llm-application-programming-interface-api\/","title":{"rendered":"Creating a WordPress chatbot using Facebook AI\u00a0Similarity Search (FAISS) for retrieval augmented generation (RAG) and an external large language model (LLM) application programming interface (API)"},"content":{"rendered":"\n

This procedure describes how to create a WordPress chatbot using FAISS for RAG and an external LLM API. We start by scanning the database of WordPress posts, to create a FAISS vector database. We then create an API wrapper that combines hinting information from the local FAISS database with a call to a remote LLM API. This API wrapper is then called by a chatbot, which is then integrated into WordPress as a plugin. The user interface for the chatbot is added to the sidebar of the WordPress blog by adding a shortcode widget that references the chatbot’s PHP, JavaScript, and cascading stylesheet (CSS) elements.<\/p>\n\n\n\n

The chatbot accepts natural language queries, submits the queries to the RAG API wrapper, and displays results that contain the remote LLM API’s responses based on the text of blog posts scanned by the RAG system. Links to relevant blog posts are listed in the responses.<\/p>\n\n\n\n

Using a recent Linux distribution to support Python 3.12 and some machine learning tools<\/h1>\n\n\n\n

In order to implement this procedure, we need a recent Linux distribution to support Python 3.12 and some machine learning tools. For this procedure we are using Ubuntu Server 24.04 LTS.<\/p>\n\n\n\n

Using a server with relatively modest specifications<\/h1>\n\n\n\n

Most public-facing websites are hosted in virtual machines (VMs) on cloud servers, with relatively modest specifications. Because we are able to use an external LLM API service, we only need enough processing power to host the WordPress blog itself, as well as some Python and PHP code that implements the FAISS vector database, the RAG API wrapper, and the chatbot itself. For this procedure, we are deploying on a cloud server with 2GB RAM, 2 x vCPU, and 50GB SSD drive space.<\/p>\n\n\n\n

Escalating to the root user<\/h1>\n\n\n\n

Enter the following command:<\/p>\n\n\n

\nsudo su\n<\/pre><\/div>\n\n\n
Installing operating system dependencies<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\napt install php-curl libmariadb-dev python3-pip python3-venv\n<\/pre><\/div>\n\n\n
Creating a virtual environment for Python<\/h1>\n\n\n\n
Enter the following commands:<\/p>\n\n\n
\ncd \/var\/www\/html\nmkdir ragblog_workdir\ncd ragblog_workdir\npython3 -m venv ragblog_env\nsource ragblog_env\/bin\/activate\n<\/pre><\/div>\n\n\n
Installing Python dependencies<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\npip install faiss-cpu sentence-transformers numpy fastapi uvicorn requests python-dotenv mariadb\n<\/pre><\/div>\n\n\n
Creating a .env file<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano .env\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text. Substitute values as appropriate for your environment:<\/p>\n\n\n
\nEXTERNAL_LLM_API=https:\/\/api.lemonfox.ai\/v1\/chat\/completions\nEXTERNAL_LLM_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\nBLOG_URL_BASE=https:\/\/yourdomain\/blog\nDB_USER=db_user\nDB_PASSWORD=db_password\nDB_HOST=localhost\nDB_NAME=db_name\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Creating the FAISS indexing script<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano rag_faiss.py\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\nimport faiss\nimport numpy as np\nimport json\nimport os\nimport mariadb\nfrom sentence_transformers import SentenceTransformer\nfrom dotenv import load_dotenv\n\n# MIT license Gordon Buchan 2025\n# see https:\/\/opensource.org\/license\/mit\n# some of the code was generated with the assistance of AI tools.\n\n# Load environment variables from .env file\nload_dotenv(dotenv_path=".\/.env")\n\nDB_USER = os.getenv('DB_USER')\nDB_PASSWORD = os.getenv('DB_PASSWORD')\nDB_HOST = os.getenv('DB_HOST')\nDB_NAME = os.getenv('DB_NAME')\n\n\n# Load embedding model\nmodel = SentenceTransformer("all-MiniLM-L6-v2")\n\n# FAISS setup\nembedding_dim = 384\nindex_file = "faiss_index.bin"\nmetadata_file = "faiss_metadata.json"\n\n# Load FAISS index and metadata\nif os.path.exists(index_file):\n    index = faiss.read_index(index_file)\n    with open(metadata_file, "r") as f:\n        metadata = json.load(f)\n        metadata = {int(k): v for k, v in metadata.items()}  # Ensure integer keys\n    print(f"\ud83d\udcc2 Loaded existing FAISS index with {index.ntotal} embeddings.")\nelse:\n    index = faiss.IndexHNSWFlat(embedding_dim, 32)\n    metadata = {}\n    print("\ud83c\udd95 Created a new FAISS index.")\n\ndef chunk_text(text, chunk_size=500):\n    """Split text into smaller chunks"""\n    words = text.split()\n    return [" ".join(words[i:i + chunk_size]) for i in range(0, len(words), chunk_size)]\n\ndef get_blog_posts():\n    """Fetch published blog posts from WordPress database."""\n    try:\n        conn = mariadb.connect(\n            user=DB_USER,\n            password=DB_PASSWORD,\n            host=DB_HOST,\n            database=DB_NAME\n        )\n        cursor = conn.cursor()\n\n        cursor.execute("""\n            SELECT ID, post_title, post_content \n            FROM wp_posts \n            WHERE post_status='publish' AND post_type='post'\n        """)\n\n        posts = cursor.fetchall()\n        conn.close()\n        return posts\n\n    except mariadb.Error as e:\n        print(f"\u274c Database error: {e}")\n        return []\n\ndef index_blog_posts():\n    """Index only new blog posts in FAISS"""\n    blog_posts = get_blog_posts()\n    if not blog_posts:\n        print("\u274c No blog posts found. Check database connection.")\n        return\n\n    vectors = []\n    new_metadata = {}\n    current_index = len(metadata)\n\n    print(f"\ud83d\udcdd Found {len(blog_posts)} blog posts to check for indexing.")\n\n    for post_id, title, content in blog_posts:\n        if any(str(idx) for idx in metadata if metadata[idx]["post_id"] == post_id):\n            print(f"\ud83d\udd04 Skipping already indexed post: {title} (ID: {post_id})")\n            continue\n\n        chunks = chunk_text(content)\n        for chunk in chunks:\n            embedding = model.encode(chunk, normalize_embeddings=True)  # Normalize embeddings\n            vectors.append(embedding)\n            new_metadata[current_index] = {\n                "post_id": post_id,\n                "title": title,\n                "chunk_text": chunk\n            }\n            current_index += 1\n\n    if vectors:\n        faiss_vectors = np.array(vectors, dtype=np.float32)\n        index.add(faiss_vectors)\n\n        metadata.update(new_metadata)\n\n        faiss.write_index(index, index_file)\n        with open(metadata_file, "w") as f:\n            json.dump(metadata, f, indent=4)\n\n        print(f"\u2705 Indexed {len(new_metadata)} new chunks.")\n    else:\n        print("\u2705 No new posts to index.")\n\nif __name__ == "__main__":\n    index_blog_posts()\n    print("\u2705 Indexing completed.")\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Creating the FAISS retrieval API<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano faiss_search.py\n<\/pre><\/div>\n\n\n
Use the nano editor to add text to the file:<\/p>\n\n\n
\nimport os\nimport faiss\nimport numpy as np\nimport json\nfrom sentence_transformers import SentenceTransformer  # \u2705 Ensure this is imported\n\n# MIT license Gordon Buchan 2025\n# see https:\/\/opensource.org\/license\/mit\n# some of the code was generated with the assistance of AI tools.\n\n# \u2705 Load the same embedding model used in `rag_api_wrapper.py`\nmodel = SentenceTransformer("all-MiniLM-L6-v2")\n\n# \u2705 Load FAISS index and metadata\nindex_file = "faiss_index.bin"\nmetadata_file = "faiss_metadata.json"\n\nembedding_dim = 384\n\nif os.path.exists(index_file):\n    index = faiss.read_index(index_file)\n    with open(metadata_file, "r") as f:\n        metadata = json.load(f)\nelse:\n    index = faiss.IndexFlatL2(embedding_dim)\n    metadata = {}\n\ndef search_faiss(query_text, top_k=10):\n    """Search FAISS index and retrieve relevant metadata"""\n    query_embedding = model.encode(query_text).reshape(1, -1)  # \u2705 Ensure `model` is used correctly\n    _, indices = index.search(query_embedding, top_k)\n\n    results = []\n    for idx in indices[0]:\n        if str(idx) in metadata:  # \u2705 Convert index to string to match JSON keys\n            results.append(metadata[str(idx)])\n\n    return results\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Creating the RAG API wrapper<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano rag_api_wrapper.py\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\nfrom fastapi import FastAPI, HTTPException\nimport requests\nimport os\nimport json\nimport faiss\nimport numpy as np\nfrom dotenv import load_dotenv\nfrom sentence_transformers import SentenceTransformer\n\n# MIT license Gordon Buchan 2025\n# see https:\/\/opensource.org\/license\/mit\n# some of the code was generated with the assistance of AI tools.\n\n# Load environment variables\nload_dotenv(dotenv_path=".\/.env")\n\nEXTERNAL_LLM_API = os.getenv('EXTERNAL_LLM_API')\nEXTERNAL_LLM_API_KEY = os.getenv('EXTERNAL_LLM_API_KEY')\nBLOG_URL_BASE = os.getenv('BLOG_URL_BASE')\n\n# Load FAISS index and metadata\nembedding_dim = 384\nindex_file = "faiss_index.bin"\nmetadata_file = "faiss_metadata.json"\n\nif os.path.exists(index_file):\n    index = faiss.read_index(index_file)\n    with open(metadata_file, "r") as f:\n        metadata = json.load(f)\n        metadata = {int(k): v for k, v in metadata.items()}  # Ensure integer keys\n    print(f"\ud83d\udcc2 Loaded FAISS index with {index.ntotal} embeddings.")\nelse:\n    index = faiss.IndexHNSWFlat(embedding_dim, 32)\n    metadata = {}\n    print("\u274c No FAISS index found.")\n\n# Load embedding model\nmodel = SentenceTransformer("all-MiniLM-L6-v2")\n\napp = FastAPI()\n\ndef search_faiss(query_text, top_k=3):\n    """Retrieve top K relevant chunks from FAISS index"""\n    if index.ntotal == 0:\n        return []\n\n    query_embedding = model.encode(query_text, normalize_embeddings=True).reshape(1, -1)\n    distances, indices = index.search(query_embedding, top_k)\n\n    results = []\n    for idx in indices[0]:\n        if idx in metadata:\n            post_id = metadata[idx]["post_id"]\n            title = metadata[idx]["title"]\n            chunk_text = metadata[idx]["chunk_text"]\n            post_url = f"{BLOG_URL_BASE}\/?p={post_id}"\n            \n            # Limit chunk text to 300 characters for cleaner display\n            short_chunk = chunk_text[:300] + "..." if len(chunk_text) > 300 else chunk_text\n            results.append(f"\ud83d\udccc {title}: {short_chunk} (Read more: {post_url})")\n    \n    return results[:3]  # Limit to max 3 sources\n\n@app.post("\/v1\/chat\/completions")\ndef chat_completions(request: dict):\n    if "messages" not in request:\n        raise HTTPException(status_code=400, detail="No messages provided.")\n\n    user_query = request["messages"][-1]["content"]\n\n    # Retrieve relevant blog context\n    context_snippets = search_faiss(user_query)\n    \n    context_text = "\\n".join(context_snippets) if context_snippets else "No relevant sources found."\n    \n    # Send query with context to LLM API\n    payload = {\n        "model": "llama-8b-chat",\n        "messages": [\n            {"role": "system", "content": "Use the following blog snippets to provide a detailed response."},\n            {"role": "user", "content": f"{user_query}\\n\\nContext:\\n{context_text}"}\n        ]\n    }\n    headers = {"Authorization": f"Bearer {EXTERNAL_LLM_API_KEY}"}\n    response = requests.post(EXTERNAL_LLM_API, json=payload, headers=headers)\n\n    if response.status_code != 200:\n        raise HTTPException(status_code=500, detail="External LLM API request failed.")\n\n    llm_response = response.json()\n    response_text = llm_response["choices"][0]["message"]["content"]\n\n    return {\n        "id": llm_response.get("id", "generated_id"),\n        "object": "chat.completion",\n        "created": llm_response.get("created", 1700000000),\n        "model": llm_response.get("model", "llama-8b-chat"),\n        "choices": [\n            {\n                "message": {\n                    "role": "assistant",\n                    "content": f"{response_text}\\n\\n\ud83d\udcda Sources:\\n{context_text}"\n                }\n            }\n        ],\n        "usage": llm_response.get("usage", {"prompt_tokens": 0, "completion_tokens": 0, "total_tokens": 0})\n    }\n\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Running the rag_faiss.py file manually to create the FAISS vector database<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\npython3 rag_faiss.py\n<\/pre><\/div>\n\n\n
Starting the RAG API wrapper manually to test the system<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nuvicorn rag_api_wrapper:app --host 127.0.0.1 --port 8000\n<\/pre><\/div>\n\n\n
Testing the RAG API wrapper with a curl command<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\ncurl -X POST http:\/\/localhost:8000\/v1\/chat\/completions -H "Content-Type: application\/json" -d '{"messages": [{"role": "user", "content": "How do I use an external LLM API?"}]}'\n<\/pre><\/div>\n\n\n
Creating the ragblog-faiss service<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano ragblog-faiss.service\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\n[Unit]\nDescription=ragblog-faiss\nAfter=network.target\n \n[Service]\nUser=root\nWorkingDirectory=\/var\/www\/html\/ragblog_workdir\nExecStart=\/usr\/bin\/bash -c "source \/var\/www\/html\/ragblog_workdir\/ragblog_env\/bin\/activate &amp;&amp; python3 \/var\/www\/html\/ragblog_workdir\/rag_faiss.py"\nRestart=always\nEnvironment=PYTHONUNBUFFERED=1\nStandardOutput=journal\nStandardError=journal\n \n[Install]\nWantedBy=multi-user.target\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Creating the ragblog-faiss timer<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano ragblog-faiss.timer\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\n[Unit]\nDescription=Run monitoring tasks every 5 minutes\n \n[Timer]\nOnBootSec=5min\nOnUnitActiveSec=5min\n \n[Install]\nWantedBy=timers.target\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Enabling and starting the ragblog-faiss service and the ragblog-faiss timer<\/h1>\n\n\n\n
Enter the following commands:<\/p>\n\n\n
\nsystemctl daemon-reload\nsystemctl enable ragblog-faiss.service\nsystemctl start ragblog-faiss.service\nsystemctl enable ragblog-faiss.timer\nsystemctl start ragblog-faiss.timer\n<\/pre><\/div>\n\n\n
Creating the ragblog-api-wrapper service<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano \/etc\/systemd\/system\/ragblog-api-wrapper.service\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\n[Unit]\nDescription=ragblog-api-wrapper service\nAfter=network.target\n\n[Service]\nUser=root\nWorkingDirectory=\/var\/www\/html\/ragblog_workdir\nExecStart=\/usr\/bin\/bash -c "source \/var\/www\/html\/ragblog_workdir\/ragblog_env\/bin\/activate &amp;&amp; uvicorn rag_api_wrapper:app --host 127.0.0.1 --port 8000"\nRestart=always\nEnvironment=PYTHONUNBUFFERED=1\nStandardOutput=journal\nStandardError=journal\n\n[Install]\nWantedBy=multi-user.target\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Enabling and starting the ragblog-api wrapper service<\/h1>\n\n\n\n
Enter the following commands:<\/p>\n\n\n
\nsystemctl daemon-reload\nsystemctl enable ragblog-api-wrapper.service\nsystemctl start ragblog-api.service\n<\/pre><\/div>\n\n\n
Creating the chatbot.php file<\/h1>\n\n\n\n
Enter the following command (adjust values to match your environment):<\/p>\n\n\n
\nnano \/var\/www\/html\/yourdomain.com\/blog\/chatbot.php\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\n&lt;?php\nheader("Content-Type: text\/html");\n\n\/\/ MIT license Gordon Buchan 2025\n\/\/ see https:\/\/opensource.org\/license\/mit\n\/\/ some of the code was generated with the assistance of AI tools.\n\n\/\/ If this is a POST request, process the chatbot response\nif ($_SERVER["REQUEST_METHOD"] === "POST") {\n    header("Content-Type: application\/json");\n\n    \/\/ Read raw POST input\n    $raw_input = file_get_contents("php:\/\/input");\n\n    \/\/ Debugging: Log received input\n    error_log("Received input: " . $raw_input);\n\n    \/\/ If raw input is empty, fallback to $_POST\n    if (!$raw_input) {\n        $raw_input = json_encode($_POST);\n    }\n\n    \/\/ Decode JSON input\n    $data = json_decode($raw_input, true);\n\n    \/\/ Check if JSON decoding was successful\n    if (json_last_error() !== JSON_ERROR_NONE) {\n        echo json_encode(["error" => "Invalid JSON format"]);\n        exit;\n    }\n\n    \/\/ Validate the message field\n    if (!isset($data["message"]) || empty(trim($data["message"]))) {\n        echo json_encode(["error" => "Invalid input: Message is empty"]);\n        exit;\n    }\n\n    $user_message = trim($data["message"]); \/\/ Sanitize input\n\n    \/\/ API request to FastAPI server\n    $api_url = "http:\/\/127.0.0.1:8000\/v1\/chat\/completions";\n    $payload = json_encode([\n        "messages" => [\n            ["role" => "user", "content" => $user_message]\n        ]\n    ]);\n\n    $ch = curl_init();\n    curl_setopt($ch, CURLOPT_URL, $api_url);\n    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);\n    curl_setopt($ch, CURLOPT_POST, true);\n    curl_setopt($ch, CURLOPT_HTTPHEADER, ["Content-Type: application\/json"]);\n    curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);\n    curl_setopt($ch, CURLOPT_TIMEOUT, 10);\n\n    $response = curl_exec($ch);\n    $http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);\n    curl_close($ch);\n\n    \/\/ Handle errors\n    if ($http_status !== 200) {\n        echo json_encode(["error" => "API error: HTTP $http_status"]);\n        exit;\n    }\n\n    \/\/ Return API response\n    echo $response;\n    exit;\n}\n\n\/\/ If not a POST request, show the chatbot UI\n?>\n&lt;!DOCTYPE html>\n&lt;html lang="en">\n&lt;head>\n    &lt;meta charset="UTF-8">\n    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">\n    &lt;title>Standalone PHP Chatbot&lt;\/title>\n    &lt;style>\n        #chat-container {\n            width: 100%;\n            max-width: 350px;\n            padding: 10px;\n            border: 1px solid #ccc;\n            background-color: #fff;\n        }\n\n        #chat-input {\n            width: calc(100% - 60px);\n            padding: 5px;\n            margin-right: 5px;\n        }\n\n        button {\n            padding: 6px 10px;\n            cursor: pointer;\n        }\n\n        #chat-output {\n            margin-top: 10px;\n            padding: 5px;\n            background-color: #f9f9f9;\n            max-height: 200px;\n            overflow-y: auto; \/* Enables scrolling *\/\n            border: 1px solid #ddd;\n        }\n    &lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;div id="chat-container">\n    &lt;input type="text" id="chat-input" placeholder="Ask me something...">\n    &lt;button onclick="sendMessage()">Send&lt;\/button>\n    &lt;div id="chat-output">&lt;\/div>\n&lt;\/div>\n\n&lt;script>\n    async function sendMessage() {\n        let userMessage = document.getElementById("chat-input").value.trim();\n        let chatOutput = document.getElementById("chat-output");\n\n        if (!userMessage || userMessage.length > 500) {\n            chatOutput.innerHTML = "&lt;i>Invalid input. Please enter 1-500 characters.&lt;\/i>";\n            return;\n        }\n\n        chatOutput.innerHTML = "&lt;i>Loading...&lt;\/i>"; \/\/ Show loading text\n\n        try {\n            let response = await fetch("chatbot.php", {\n                method: "POST",\n                headers: { "Content-Type": "application\/json" },\n                body: JSON.stringify({ message: userMessage })\n            });\n\n            let data = await response.json();\n            if (data.error) {\n                throw new Error(data.error);\n            }\n\n            let formattedResponse = data.choices[0].message.content.replace(\n                \/(https?:\\\/\\\/[^\\s]+)\/g,\n                '&lt;a href="$1" target="_blank">$1&lt;\/a>'\n            );\n\n            chatOutput.innerHTML = `&lt;p>${formattedResponse}&lt;\/p>`;\n        } catch (error) {\n            console.error("Error:", error);\n            chatOutput.innerHTML = `&lt;i>Error: ${error.message}&lt;\/i>`;\n        } finally {\n            document.getElementById("chat-input").value = "";\n        }\n    }\n&lt;\/script>\n\n&lt;\/body>\n&lt;\/html>\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Testing the chatbot.php file<\/h1>\n\n\n\n
Use a web browser to visit the address of the chatbot (modify values to match your environment):<\/p>\n\n\n
\nhttps:\/\/yourdomain.com\/blog\/chatbot.php\n<\/pre><\/div>\n\n\n
Suggested query: “Tell me about LLMs.”<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Creating the WordPress plugin directory<\/h1>\n\n\n\n
Enter the following commands:<\/p>\n\n\n
\ncd \/var\/www\/html\/yourdomain.com\/blog\/wp-content\/plugins\nmkdir rag-chatbot\ncd rag-chatbot\n<\/pre><\/div>\n\n\n
Creating the rag-chatbot.php file<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano rag-chatbot.php\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\n&lt;?php\n\/**\n * Plugin Name: RAG Chatbot\n * Description: A WordPress chatbot powered by chatbot.php.\n * Version: 1.3\n * Author: Gordon Buchan\n *\/\n\n\/\/ MIT license Gordon Buchan 2025\n\/\/ see https:\/\/opensource.org\/license\/mit\n\/\/ some of the code was generated with the assistance of AI tools.\n\nfunction rag_chatbot_enqueue_scripts() {\n    \/\/ \u2705 Load scripts from the plugin directory\n    wp_enqueue_script('rag-chatbot-js', plugin_dir_url(__FILE__) . 'rag-chatbot.js', array(), '1.3', true);\n    wp_enqueue_style('rag-chatbot-css', plugin_dir_url(__FILE__) . 'rag-chatbot.css', array(), '1.3');\n}\nadd_action('wp_enqueue_scripts', 'rag_chatbot_enqueue_scripts');\n\nfunction rag_chatbot_shortcode() {\n    ob_start(); ?>\n    &lt;div id="chat-container">\n        &lt;input type="text" id="chat-input" placeholder="Ask me something...">\n        &lt;button onclick="sendMessage()">Send&lt;\/button>\n        &lt;div id="chat-output">&lt;\/div>\n    &lt;\/div>\n    &lt;?php\n    return ob_get_clean();\n}\nadd_shortcode('rag_chatbot', 'rag_chatbot_shortcode');\n?>\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Creating the rag-chatbot.js file<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano rag-chatbot.js\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\nasync function sendMessage() {\n    let userMessage = document.getElementById("chat-input").value.trim();\n    let chatOutput = document.getElementById("chat-output");\n\n    console.log("User input:", userMessage); \/\/ Debugging log\n\n    if (!userMessage || userMessage.length > 500) {\n        chatOutput.innerHTML = "&lt;i>Invalid input. Please enter 1-500 characters.&lt;\/i>";\n        return;\n    }\n\n    chatOutput.innerHTML = "&lt;i>Loading...&lt;\/i>";\n\n    try {\n        let response = await fetch("\/blog\/chatbot.php", { \/\/ \u2705 Calls chatbot.php in \/blog\/\n            method: "POST",\n            headers: { "Content-Type": "application\/json" },\n            body: JSON.stringify({ message: userMessage })\n        });\n\n        console.log("Response received:", response);\n\n        let data = await response.json();\n        if (data.error) {\n            throw new Error(data.error);\n        }\n\n        chatOutput.innerHTML = `&lt;p>${data.choices[0].message.content.replace(\n            \/(https?:\\\/\\\/[^\\s]+)\/g,\n            '&lt;a href="$1" target="_blank">$1&lt;\/a>'\n        )}&lt;\/p>`;\n    } catch (error) {\n        console.error("Error:", error);\n        chatOutput.innerHTML = `&lt;i>Error: ${error.message}&lt;\/i>`;\n    } finally {\n        document.getElementById("chat-input").value = "";\n    }\n}\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Creating the rag-chatbot.css file<\/h1>\n\n\n\n
Enter the following command:<\/p>\n\n\n
\nnano rag-chatbot.css\n<\/pre><\/div>\n\n\n
Use the nano editor to add the following text:<\/p>\n\n\n
\n\/* Chatbot container *\/\n#chat-container {\n    width: 100%;\n    max-width: 350px; \/* \u2705 Works in sidebars and posts *\/\n    padding: 10px;\n    border: 1px solid #ccc;\n    background-color: #fff;\n    border-radius: 5px;\n    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);\n    font-family: Arial, sans-serif;\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n}\n\n\/* Input field *\/\n#chat-input {\n    width: calc(100% - 70px);\n    padding: 8px;\n    border: 1px solid #aaa;\n    border-radius: 3px;\n    font-size: 14px;\n}\n\n\/* Send button *\/\nbutton {\n    padding: 8px 12px;\n    cursor: pointer;\n    background-color: #0073aa; \/* \u2705 Matches WordPress admin blue *\/\n    color: #fff;\n    border: none;\n    border-radius: 3px;\n    font-size: 14px;\n    font-weight: bold;\n}\n\nbutton:hover {\n    background-color: #005d8c;\n}\n\n\/* Chat output area *\/\n#chat-output {\n    margin-top: 10px;\n    padding: 8px;\n    background-color: #f9f9f9;\n    max-height: 250px; \/* \u2705 Scrollable output *\/\n    overflow-y: auto;\n    border: 1px solid #ddd;\n    border-radius: 3px;\n    font-size: 14px;\n}\n\n\/* Ensures long responses don\u2019t overflow *\/\n#chat-output p {\n    margin: 0;\n    padding: 5px;\n    word-wrap: break-word;\n}\n\n\/* Links inside chatbot responses *\/\n#chat-output a {\n    color: #0073aa;\n    text-decoration: underline;\n}\n\n#chat-output a:hover {\n    color: #005d8c;\n}\n\n\/* Mobile responsiveness *\/\n@media (max-width: 500px) {\n    #chat-container {\n        max-width: 100%;\n    }\n\n    #chat-input {\n        width: 100%;\n    }\n}\n<\/pre><\/div>\n\n\n
Save and exit the file.<\/p>\n\n\n\n
Activating the WordPress plugin<\/h1>\n\n\n\n
Enter the WordPress admin console.<\/p>\n\n\n\n
Go to the section “Plugins”<\/p>\n\n\n\n
Click on “Activate” for “RAG Chatbot”<\/p>\n\n\n\n
Adding the shortcode widget to add the chatbot to the WordPress sidebar<\/h1>\n\n\n\n
Go to the section  “Appearance” | “Widgets.”<\/p>\n\n\n\n
Select the sidebar area. Click on the “+” symbol. Search for “shortcode,” click on the short code icon.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In the text box marked \u201cWrite shortcode here\u2026\u201d
Enter the shortcode:<\/p>\n\n\n
\n[rag_chatbot]\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Click on Update.<\/p>\n\n\n\n
Checking that the chatbot has been added to the sidebar of the blog<\/h1>\n\n\n\n
Go to the main page of the blog. Look to ensure that the short code element has been added to the blog\u2019s sidebar. Test the chatbot (suggested query: “Tell me about LLMs.”):<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
This procedure describes how to create a WordPress chatbot using FAISS for RAG and an external LLM API. We start by scanning the database of WordPress posts, to create a FAISS vector database. We then create an API wrapper that combines hinting information from the local FAISS database with a call to a remote LLM … <\/p>\n
Continue reading “Creating a WordPress chatbot using Facebook AI\u00a0Similarity Search (FAISS) for retrieval augmented generation (RAG) and an external large language model (LLM) application programming interface (API)”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,1],"tags":[],"class_list":["post-5383","post","type-post","status-publish","format-standard","hentry","category-linux","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/5383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=5383"}],"version-history":[{"count":32,"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/5383\/revisions"}],"predecessor-version":[{"id":5426,"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/5383\/revisions\/5426"}],"wp:attachment":[{"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=5383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=5383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.gordonbuchan.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=5383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}