Skip to main content

Why Build Your Chatbot with Bigdata.com?

Bigdata.com is designed specifically for business and finance professionals, delivering real-time, AI-driven insights with precision and speed. βœ… Unmatched Data Access β€” Instantly analyze vast, high-quality datasets.
βœ… Grounding with Bigdata.com β€” Generated responses reflect the accurate and real-time market conditions.
βœ… Finance & Business Expertise β€” Designed for professionals, not generic use.
βœ… Seamless Integration β€” Easily power your chatbot with cutting-edge AI.
Sample Chatbox Widget

πŸ“ Overview

This tutorial walks you through creating a sample Financial Research Assistant chatbot Widget on your proprietary platform. Flow Summary:
  • The Web Widget sends users’ inputs to the Python-based chat server chat-server.py.
  • The server processes these inputs and communicates with Bigdata.com’s Chat Service API.
  • Responses are routed back to the Web Widget for display.

🧰 Prerequisites

  • Set up a chat-server.py backend (see expandable section below)
  • Node.js & npm – already set up
  • Follow the how-to guide Prerequisites to set up your Bigdata.com Python SDK environment
If you are on a Windows machine, please use your workspace in your windows machine instead of your Windows Subsystem for Linux (WSL). Otherwise you will run into issues when trying to execute the application.
  1. Create a directory for the chat server:
mkdir chat-server
cd chat-server/
  1. Place the files chat-server.py and requirements.txt in your project directory:
chat-server.py
from flask import Flask, request, jsonify
from flask_cors import CORS
import uuid
from bigdata_client import Bigdata
from bigdata_client.models.chat import ChatScope
from flask import Response, stream_with_context
from dotenv import load_dotenv

app = Flask(__name__)
from flask import Response

class UnbufferedResponse(Response):
    direct_passthrough = True

app.response_class = UnbufferedResponse
CORS(app)

# Initialize Bigdata instance
load_dotenv()
db = Bigdata()

@app.route('/chats', methods=['POST', 'OPTIONS'])
def create_chat():
    if request.method == 'OPTIONS':
        return _build_cors_preflight_response()

    data = request.json
    chat_title = data.get("chat_title")

    chat = db.chat.new(chat_title)
    chat_id = chat.id  # Extract chat ID from the chat object
    print(f"[INFO] Creating chat with ID: {chat_id}")
    print(f"[INFO] Created chat with ID: {chat_id}, Title: {chat_title}")
    return jsonify({"chat_id": chat_id})

@app.route('/chats/ask-stream', methods=['GET'])
def ask_question_stream():
    chat_id = request.args.get("chat_id")
    question = request.args.get("question")
    scope = request.args.get("scope")

    if not chat_id or not question:
        return jsonify({"error": "Missing required parameters"}), 400

    try:
        scope_enum = ChatScope[scope] if scope and scope != "ALL" else None
    except KeyError:
        return jsonify({"error": "Invalid scope value"}), 400

    chat_instance = db.chat.get(chat_id)

    def generate():
        if scope_enum:
            stream = chat_instance.ask(question, scope=scope_enum, streaming=True)
        else:
            stream = chat_instance.ask(question, streaming=True)

        for chunk in stream:
            # Force flush-friendly formatting (newline-separated, short)
            yield f"data: {chunk}\n\n"

        yield "event: done\ndata: [DONE]\n\n"


    return Response(stream_with_context(generate()), mimetype='text/event-stream')


@app.route('/chats', methods=['DELETE', 'OPTIONS'])
def delete_chat():
    if request.method == 'OPTIONS':
        return _build_cors_preflight_response()

    data = request.json
    chat_id = data.get("chat_id")

    db.chat.delete(chat_id)
    print(f"[INFO] Deleted chat with ID: {chat_id}")

    return jsonify({"message": "Chat deleted successfully"})

def _build_cors_preflight_response():
    response = jsonify({})
    response.headers.add("Access-Control-Allow-Origin", "*")
    response.headers.add("Access-Control-Allow-Methods", "GET, POST, OPTIONS, DELETE")
    response.headers.add("Access-Control-Allow-Headers", "Content-Type")
    return response

if __name__ == "__main__":
    app.run(debug=True, port=5000)
requirements.txt
flask>=2.0.0
flask-cors>=3.0.10
bigdata-client>=2.14.0
  1. Install dependencies:
pip install -r requirements.txt
  1. Run the server:
python chat-server.py
By default, this starts on http://localhost:5000.

πŸ§ͺ Step 1: Create the Project folder

Open your Windows PowerShell and run the following commands:
mkdir my-chat-widget
cd my-chat-widget
npm init
That command will prompt you to configure some fields.
  • When asked about entry point: (index.js), type main.js
package name: (my-chat-widget)
version: (1.0.0)
description: Bigdata.com Chatbot Windows Widget
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: Your name
license: (ISC)
About to write to C:\Users\osanchez\workspace\my-chat-widget\package.json:

{
  "name": "my-chat-widget",
  "version": "1.0.0",
  "description": "Bigdata.com Chatbot Windows Widget",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your name",
  "license": "ISC"
}


Is this OK? (yes) yes
It creates the following structure:
my-chat-widget/
β”œβ”€β”€ package.json
and the next steps will create the following structure:
my-chat-widget/
β”œβ”€β”€ main.js
β”œβ”€β”€ index.html
β”œβ”€β”€ package.json
└── icon.ico (Optional)

πŸ§‘β€πŸ’» Step 2: Update the package.json

{
  "name": "my-chat-widget",
  "version": "1.0.0",
  "main": "main.js",
  "description": "Bigdata.com Chatbot Windows Widget",
  "author": "Your name",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.bigdata.chat",
    "productName": "My Widget",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis",
      "icon": "bigdata-icon.ico"
    }
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.13.3"
  }
}

🧭 Step 3: Create the index.html file

We will create a basic index.html file with an iFrame to the Bigdata Chatbox Sample Web App.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Financial Assistant</title>
  <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Hanken Grotesk', Mo, sans-serif;
    }
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #2c3e50;
      color: white;
      padding: 10px 20px;
      user-select: none;
      -webkit-app-region: drag;
    }
    .top-bar-left {
      display: flex;
      align-items: center;
    }
    .top-bar img.logo {
      height: 20px;
      margin-right: 15px;
    }
    .close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 1.5em;
      cursor: pointer;
      -webkit-app-region: no-drag;
    }
    .close-btn:hover {
      color: #e74c3c;
    }
    #widget {
      width: 100%;
      height: calc(100vh - 50px);
      overflow: hidden;
    }
    #widget iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
  <script>
    function closeApplication() {
      // Customize this behavior to integrate with your app logic
      if (confirm("Are you sure you want to close the application?")) {
        window.close();
      }
    }
  </script>
</head>
<body>
    <div class="top-bar">
        <div class="top-bar-left">
            <img class="logo" src="https://mintlify.s3.us-west-1.amazonaws.com/ravenpackinternational/logo/logo_ribbon_horiz_inverted@4x.png" alt="Logo">
        </div>
        <button class="close-btn" onclick="closeApplication()">&times;</button>
    </div>
  <div id="widget">
    <iframe src="https://fin-chat-whisper.lovable.app/"></iframe>
  </div>
</body>
</html>

πŸ“₯ Step 4: Install electron-builder

Run this from your project root:
npm install --save-dev electron-builder

πŸ•ΈοΈ Step 5: Create a basic main.js

This is your window (you probably already have this):
const { app, BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,           // Hides title bar and window controls
    alwaysOnTop: false,      // Keeps widget above other windows
    transparent: true,      // Makes window background transparent
    resizable: true,       // Optional: Prevent resizing
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html'); // or loadURL if you're using a remote site

}

app.whenReady().then(createWindow);

🌐 Step 6: Customise icon

You can create your own icon.ico or download this sample bigdata-icon.ico

πŸ› οΈ Step 7: Build the App

From your project folder:
npm run dist
This will:
  • Compile the app
  • Package it into an installer (e.g. My Widget Setup 1.0.0.exe)
  • Output it to a dist/ folder
You can now share that EXE with others. You can also use the npm run start command to run the app in development mode.