AI-Powered Chatbot

Technologies used:
  • Dialogflow CX (natural language processing)
  • Cloud Functions / Cloud Run (webhooks to trigger backend logic)
  • Cloud Firestore / Cloud SQL (store conversations or user data)
  • Frontend: HTML/JS web chat widget or integration with Telegram, WhatsApp, etc.
Enable Required GCP APIs
gcloud services enable dialogflow.googleapis.com \
  cloudfunctions.googleapis.com \
  firestore.googleapis.com \
  run.googleapis.com
Create a Dialogflow CX Agent

Dialogflow CX is the advanced version of Dialogflow ES.

gcloud auth application-default login
gcloud config set project your-gcp-project

gcloud dialogflow cx agents create \
  --display-name="Chatbot CX" \
  --location=global \
  --default-language-code=en \
  --time-zone="Europe/Paris"

You can also create the agent via the Dialogflow CX console.

Design Your Chatbot’s Conversations

Dialogflow CX uses Flows, Pages, and Intents.

Example:

  • Flow: Main
    • Page: Welcome
    • Intents:
      • greet: matches “hi”, “hello”
      • ask_hours: matches “what are your hours?”
      • ask_price: matches “how much does it cost?”
Create a Cloud Function for Webhook

Example: Node.js webhook handler

exports.dialogflowWebhook = (req, res) => {
  const tag = req.body.fulfillmentInfo.tag;

  if (tag === "get-business-hours") {
    res.send({
      fulfillment_response: {
        messages: [{ text: { text: ["We are open from 9 AM to 5 PM."] } }]
      }
    });
  } else {
    res.send({
      fulfillment_response: {
        messages: [{ text: { text: ["Sorry, I didn’t get that."] } }]
      }
    });
  }
};

Deploy it:

gcloud functions deploy dialogflowWebhook \
  --runtime=nodejs20 \
  --trigger-http \
  --allow-unauthenticated \
  --entry-point=dialogflowWebhook \
  --region=us-central1

Save the HTTPS URL for the webhook.

Connect Webhook in Dialogflow CX

Go to your agent → Manage → Webhooks

Create a new webhook

Paste the Cloud Function URL

Assign webhook tags to specific intents or pages (e.g., get-business-hours)

Integrate a Frontend Chat UI

Use a library like BotUI, Kommunicate, or Dialogflow Messenger.

Example using Dialogflow Messenger:

In your HTML:

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  intent="WELCOME"
  chat-title="Assistant"
  agent-id="YOUR_AGENT_ID"
  language-code="en">
</df-messenger>
Add Firebase Auth or Database

Store chat logs or user sessions:

gcloud firestore databases create --region=us-central

In webhook:

const admin = require("firebase-admin");
admin.initializeApp();
const db = admin.firestore();
await db.collection("chats").add({
  userId: sessionId,
  message: queryText,
  timestamp: Date.now()
});
Deploy the Chatbot Anywhere

You can deploy the chat widget:

  • On a static website (Cloud Storage or Firebase Hosting)
  • Inside a React/Vue/Angular app
  • Integrated into Telegram, WhatsApp, Slack, etc. via Dialogflow integrations

In my case, it was in a static website in cloud storage. Here is how it was done:

The bucket name must match your domain name (if using a custom domain) or can be any unique name if using default hosting.

gsutil mb -p your-project-id -c standard -l us-central1 gs://your-bucket-name
gsutil web set -m index.html gs://your-bucket-name

Create a file named index.html with the chatbot code:

<!DOCTYPE html>
<html>
  <head>
    <title>My AI Chatbot</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Welcome to My Site!</h1>
    <p>Ask me anything 👇</p>

    <df-messenger
      intent="WELCOME"
      chat-title="Assistant"
      agent-id="YOUR_AGENT_ID"
      language-code="en">
    </df-messenger>

    <script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
  </body>
</html>

Upload the Website Files to the Bucket:

gsutil cp index.html gs://your-bucket-name

Make Files Publicly Accessible:

gsutil iam ch allUsers:objectViewer gs://your-bucket-name

Get Your Public URL:

https://storage.googleapis.com/your-bucket-name/index.html