Site Logo

Building a LangChain Chrome Extension for Conversational AI: A Comprehensive Guide

Chrome extensions enhance browser functionality, and integrating them with LangChain and OpenAI enables a conversational AI assistant directly within the browser. This allows users to interact with an intelligent chatbot for tasks like answering questions, summarizing web content, or providing context-aware assistance.

Introduction to LangChain and Chrome Extensions

A Chrome extension is a small software module that customizes the browsing experience, often adding UI elements like popups or sidebars. LangChain enhances this with conversational memory, chains, and tool integrations, enabling context-aware AI interactions. OpenAI’s API, powering models like gpt-3.5-turbo, drives natural language processing, while a backend server (e.g., Flask) handles LangChain logic, and the extension’s frontend (built with HTML/CSS/JavaScript) provides the user interface.

This tutorial assumes basic knowledge of Python, JavaScript, HTML, CSS, and web APIs. References include LangChain’s getting started guide, OpenAI’s API documentation, Chrome Extensions documentation, and Flask documentation.

Prerequisites for Building the Chrome Extension

Ensure you have:

pip install langchain openai langchain-openai flask python-dotenv

Step 1: Setting Up the LangChain Flask Backend

Create a Flask backend to serve the LangChain conversational AI, which the Chrome extension will call.

1.1 Create the Flask App

In a backend directory, create app.py:

import os
from flask import Flask, request, jsonify
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from langchain.chains import ConversationChain
from langchain.memory import ConversationBufferMemory
from langchain.prompts import PromptTemplate

# Load environment variables
load_dotenv()

# Set OpenAI API key
openai_api_key = os.getenv("OPENAI_API_KEY")
if not openai_api_key:
    raise ValueError("OPENAI_API_KEY not found.")

# Initialize Flask app
app = Flask(__name__)

# Initialize LLM
llm = ChatOpenAI(
    model_name="gpt-3.5-turbo",
    temperature=0.7,
    max_tokens=512,
    top_p=0.9,
    frequency_penalty=0.2,
    presence_penalty=0.1,
    n=1
)

# Store user-specific memory
user_memories = {}

def get_user_memory(user_id):
    if user_id not in user_memories:
        user_memories[user_id] = ConversationBufferMemory(
            memory_key="history",
            return_messages=True,
            k=5
        )
    return user_memories[user_id]

def get_conversation_chain(user_id):
    memory = get_user_memory(user_id)
    return ConversationChain(
        llm=llm,
        memory=memory,
        verbose=True,
        prompt=None,
        output_key="response"
    )

@app.route("/chat", methods=["POST"])
def chat():
    try:
        data = request.get_json()
        user_id = data.get("user_id")
        message = data.get("message")

        if not user_id or not message:
            return jsonify({"error": "user_id and message are required"}), 400

        conversation = get_conversation_chain(user_id)
        response = conversation.predict(input=message)

        return jsonify({
            "response": response,
            "user_id": user_id
        })
    except Exception as e:
        return jsonify({"error": str(e)}), 500

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000)

Create a .env file in the backend directory:

OPENAI_API_KEY=your-openai-api-key

Replace your-openai-api-key with your actual key. Environment variables enhance security, as explained in LangChain’s security and API keys guide.

1.2 Key Parameters for ChatOpenAI

  • model_name: OpenAI model (e.g., gpt-3.5-turbo, gpt-4). gpt-3.5-turbo is efficient; gpt-4 excels in reasoning. See OpenAI’s model documentation.
  • temperature (0.0–2.0): Controls randomness. At 0.7, balances creativity and coherence.
  • max_tokens: Maximum response length (e.g., 512). Adjust for detail vs. cost. See LangChain’s token limit handling.
  • top_p (0.0–1.0): Nucleus sampling. At 0.9, focuses on likely tokens.
  • frequency_penalty (–2.0–2.0): Discourages repetition. At 0.2, promotes variety.
  • presence_penalty (–2.0–2.0): Encourages new topics. At 0.1, mild novelty boost.
  • n: Number of responses (e.g., 1). Single response suits API interactions.

1.3 Key Parameters for ConversationBufferMemory

  • memory_key: History variable (default: "history").
  • return_messages: If True, returns message objects. Suits chat models.
  • k: Limits stored interactions (e.g., 5). Balances context and performance.

1.4 Run the Flask Backend

In the backend directory:

python app.py

The Flask server runs at http://localhost:5000. For Flask details, see Flask’s quickstart.

Step 2: Setting Up the Chrome Extension

Create the Chrome extension frontend to interact with the Flask backend via a popup interface.

2.1 Create Extension Directory

In an extension directory, create the following structure:

extension/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css
└── icon.png

2.2 Create Manifest File

In manifest.json:

{
  "manifest_version": 3,
  "name": "LangChain Chatbot",
  "version": "1.0",
  "description": "A Chrome extension for conversational AI powered by LangChain and OpenAI.",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "128": "icon.png"
  }
}

Key Fields:

  • manifest_version: Version 3 for modern Chrome extensions.
  • permissions: activeTab allows interaction with the current tab.
  • action: Defines the popup UI (popup.html) and icon.

For manifest details, see Chrome’s manifest guide.

2.3 Create Popup HTML

In popup.html:

LangChain Chatbot
  


  
    LangChain Chatbot
    
    
      
      Send

2.4 Create Popup CSS

In popup.css:

body {
  width: 300px;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 10px;
  background-color: #f0f0f0;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

h1 {
  font-size: 18px;
  text-align: center;
  margin: 0;
  color: #333;
}

.chat {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: white;
  border-radius: 5px;
}

.message {
  margin: 5px 0;
  padding: 8px;
  border-radius: 5px;
}

.user {
  background-color: #007bff;
  color: white;
  margin-left: 20%;
}

.assistant {
  background-color: #e9ecef;
  color: black;
  margin-right: 20%;
}

.input-container {
  display: flex;
  gap: 5px;
}

input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
}

button {
  padding: 8px 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

2.5 Create Popup JavaScript

In popup.js:

const API_URL = "http://localhost:5000/chat"; // Update to deployed URL in production
const USER_ID = "user123"; // Static for demo; use auth in production

function addMessage(content, role) {
  const chat = document.getElementById("chat");
  const messageDiv = document.createElement("div");
  messageDiv.className = `message ${role}`;
  messageDiv.textContent = content;
  chat.appendChild(messageDiv);
  chat.scrollTop = chat.scrollHeight;
}

async function sendMessage() {
  const input = document.getElementById("input");
  const message = input.value.trim();
  if (!message) return;

  addMessage(message, "user");
  input.value = "";

  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ user_id: USER_ID, message })
    });
    const data = await response.json();
    if (data.error) {
      addMessage(`Error: ${data.error}`, "assistant");
    } else {
      addMessage(data.response, "assistant");
    }
  } catch (error) {
    addMessage(`Error: ${error.message}`, "assistant");
  }
}

// Handle Enter key
document.getElementById("input").addEventListener("keypress", (e) => {
  if (e.key === "Enter") sendMessage();
});

2.6 Add an Icon

Place a 128x128 PNG file named icon.png in the extension directory (create or download a simple icon).

Step 3: Loading and Testing the Extension

3.1 Load the Extension in Chrome

  1. Open Chrome and navigate to chrome://extensions/.
  2. Enable “Developer mode” (top-right toggle).
  3. Click “Load unpacked” and select the extension directory.
  4. Ensure the Flask backend is running (python app.py in backend).

3.2 Test the Extension

Click the extension icon in Chrome to open the popup. Test with:

  1. Type: “Recommend a sci-fi book.”
  2. Follow up: “Tell me more about that book.”

Example Interaction:

User: Recommend a sci-fi book.
Assistant: I recommend *Dune* by Frank Herbert for its rich world-building. Want more details?
User: Tell me more about that book.
Assistant: *Dune* follows Paul Atreides on Arrakis, exploring politics and ecology. Interested in its themes?

The backend maintains context via ConversationBufferMemory. For testing patterns, see LangChain’s conversational flows.

Step 4: Customizing the Extension

Enhance with custom prompts, data integration, or tools.

4.1 Custom Prompt Engineering

Modify the Flask backend’s prompt for a specific tone.

custom_prompt = PromptTemplate(
    input_variables=["history", "input"],
    template="You are a friendly sci-fi expert assistant in a Chrome extension. Respond in a concise, engaging tone, using the conversation history:\n\nHistory: {history}\n\nUser: {input}\n\nAssistant: ",
    validate_template=True
)

def get_conversation_chain(user_id):
    memory = get_user_memory(user_id)
    return ConversationChain(
        llm=llm,
        memory=memory,
        prompt=custom_prompt,
        verbose=True,
        output_key="response"
    )

PromptTemplate Parameters:

  • input_variables: Variables (e.g., ["history", "input"]).
  • template: Defines tone and structure.
  • validate_template: If True, validates variables.

See LangChain’s prompt templates guide.

4.2 Integrating Web Content Summarization

Add a feature to summarize the current webpage using LangChain’s document loaders.

Update Backend (app.py):

from langchain.document_loaders import WebBaseLoader
from langchain.text_splitter import RecursiveCharacterTextSplitter
from langchain.chains import LLMChain

summary_prompt = PromptTemplate(
    input_variables=["text"],
    template="Summarize the following web content in 2-3 concise sentences:\n\n{text}\n\nSummary: ",
    validate_template=True
)

summary_chain = LLMChain(
    llm=llm,
    prompt=summary_prompt,
    verbose=True,
    output_key="summary"
)

@app.route("/summarize", methods=["POST"])
def summarize():
    try:
        data = request.get_json()
        user_id = data.get("user_id")
        url = data.get("url")

        if not user_id or not url:
            return jsonify({"error": "user_id and url are required"}), 400

        # Load and summarize web content
        loader = WebBaseLoader(
            web_path=url,
            verify_ssl=True
        )
        content = loader.load()[0].page_content
        text_splitter = RecursiveCharacterTextSplitter(chunk_size=2000, chunk_overlap=200)
        chunks = text_splitter.split_text(content)
        summaries = [summary_chain.run(text=chunk) for chunk in chunks]

        # Combine summaries
        final_prompt = PromptTemplate(
            input_variables=["summaries"],
            template="Combine these summaries into a cohesive summary (3-5 sentences):\n\n{summaries}\n\nFinal Summary: ",
            validate_template=True
        )
        final_chain = LLMChain(llm=llm, prompt=final_prompt)
        final_summary = final_chain.run(summaries="\n\n".join(summaries))

        # Update memory
        memory = get_user_memory(user_id)
        memory.save_context({"input": f"Summarize {url}"}, {"response": final_summary})

        return jsonify({
            "summary": final_summary,
            "user_id": user_id
        })
    except Exception as e:
        return jsonify({"error": str(e)}), 500

Update Extension (popup.html):

Add a summarize button:

Send
  Summarize Page

Update Extension (popup.js):

async function summarizePage() {
  try {
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    const response = await fetch("http://localhost:5000/summarize", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ user_id: USER_ID, url: tab.url })
    });
    const data = await response.json();
    if (data.error) {
      addMessage(`Error: ${data.error}`, "assistant");
    } else {
      addMessage(data.summary, "assistant");
    }
  } catch (error) {
    addMessage(`Error: ${error.message}`, "assistant");
  }
}

Add "tabs" to permissions in manifest.json:

"permissions": ["activeTab", "tabs"]

Test by clicking “Summarize Page” in the popup. See LangChain’s web loaders.

4.3 Tool Integration

Add tools like SerpAPI to the backend.

from langchain.agents import initialize_agent, Tool
from langchain_community.utilities import SerpAPIWrapper

search = SerpAPIWrapper()
tools = [
    Tool(
        name="Search",
        func=search.run,
        description="Fetch current information."
    )
]

agent = initialize_agent(
    tools=tools,
    llm=llm,
    agent=AgentType.ZERO_SHOT_REACT_DESCRIPTION,
    verbose=True,
    max_iterations=3,
    early_stopping_method="force"
)

@app.route("/agent", methods=["POST"])
def agent_endpoint():
    try:
        data = request.get_json()
        user_id = data.get("user_id")
        query = data.get("query")

        if not user_id or not query:
            return jsonify({"error": "user_id and query are required"}), 400

        memory = get_user_memory(user_id)
        history = memory.load_memory_variables({})["history"]
        response = agent.run(f"{query}\nHistory: {history}")

        memory.save_context({"input": query}, {"response": response})

        return jsonify({
            "response": response,
            "user_id": user_id
        })
    except Exception as e:
        return jsonify({"error": str(e)}), 500

Update popup.html to add a search button:

Search Web

Update popup.js:

async function searchWeb() {
  const input = document.getElementById("input");
  const query = input.value.trim();
  if (!query) return;

  addMessage(query, "user");
  input.value = "";

  try {
    const response = await fetch("http://localhost:5000/agent", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ user_id: USER_ID, query })
    });
    const data = await response.json();
    if (data.error) {
      addMessage(`Error: ${data.error}`, "assistant");
    } else {
      addMessage(data.response, "assistant");
    }
  } catch (error) {
    addMessage(`Error: ${error.message}`, "assistant");
  }
}

Test with the “Search Web” button. See LangChain’s agents guide.

Step 5: Deploying the Extension

5.1 Deploy Flask Backend

Use Heroku:

  1. Create a Procfile in backend:
web: gunicorn app:app
  1. Create requirements.txt:
pip freeze > requirements.txt
  1. Install gunicorn:
pip install gunicorn
  1. Deploy:
heroku create
heroku config:set OPENAI_API_KEY=your-openai-api-key
git push heroku main

Update popup.js with the Heroku URL (e.g., https://your-app.herokuapp.com).

5.2 Publish Chrome Extension

  1. Test locally to ensure functionality.
  2. Zip the extension directory:
cd extension
zip -r langchain-chatbot.zip .
  1. Submit to the Chrome Web Store:
    • Create a developer account ($5 fee).
    • Upload the ZIP file and complete the listing details.
    • Await review (may take days).

For details, see Chrome’s publishing guide.

Step 6: Evaluating and Testing the Extension

Evaluate responses using LangChain’s evaluation metrics.

from langchain.evaluation import load_evaluator

evaluator = load_evaluator(
    "qa",
    criteria=["correctness", "relevance"]
)
result = evaluator.evaluate_strings(
    prediction="I recommend *Dune* by Frank Herbert.",
    input="Recommend a sci-fi book.",
    reference="*Dune* by Frank Herbert is a recommended sci-fi novel."
)
print(result)

load_evaluator Parameters:

  • evaluator_type: Metric type (e.g., "qa").
  • criteria: Evaluation criteria.

Test the extension by:

  • Sending sequential messages in the popup to verify context retention.
  • Using the “Summarize Page” and “Search Web” features.
  • Testing on different websites.

Debug with LangSmith per LangChain’s LangSmith intro. For extension debugging, see Chrome’s debugging guide.

Advanced Features and Next Steps

Enhance with:

See LangChain’s startup examples or GitHub repos.

Conclusion

Building a LangChain Chrome extension creates a powerful, browser-integrated conversational AI tool. This guide covered backend setup, extension development, customization, deployment, evaluation, and parameters. Leverage LangChain’s chains, memory, and integrations with Chrome’s extension capabilities to build innovative AI-driven tools.

Explore agents, tools, or evaluation metrics. Debug with LangSmith. Happy coding!