3 replies

Buildship Bot for NextJs

Hi everyone,

Excited to be using Buildship for a knowledge bot! I came across this chatbot widget and wanted to know if this was available for Nextjs?

https://github.com/rowyio/buildship-chat-widget?tab=readme-ov-file#step-3-config-properties-and-customization

GitHub

GitHub - rowyio/buildship-chat-widget: AI Chat Widget - flexible an...

AI Chat Widget - flexible and lite chat widget that can connect to OpenAI Assistant, any database, tools - rowyio/buildship-chat-widget

Solution

Hey @coop2432, here's one way you can do this:

First, install the NPM package in your project: https://www.npmjs.com/package/@buildshipapp/chat-widget

Second, you can initialize the widget in any page or component you want using useEffect. Lets say you want to do this in

page.tsx

page.tsx

page.tsx

page.tsx :

"use client";

import "@buildshipapp/chat-widget";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.buildShipChatWidget.config.widgetTitle = "Chatbot";
      window.buildShipChatWidget.config.greetingMessage =
        "Hello! How may I help you today?";
      window.buildShipChatWidget.config.url =
        "https://<project_id>.buildship.run/chat/....";
    }
  }, []);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-xl">Hello World from BuildShip</h1>
      <button
        data-buildship-chat-widget-button
        className="bg-slate-500 p-2 rounded-sm"
      >
        Chat with BuildShip
      </button>
    </main>
  );
}

"use client";

import "@buildshipapp/chat-widget";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.buildShipChatWidget.config.widgetTitle = "Chatbot";
      window.buildShipChatWidget.config.greetingMessage =
        "Hello! How may I help you today?";
      window.buildShipChatWidget.config.url =
        "https://<project_id>.buildship.run/chat/....";
    }
  }, []);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-xl">Hello World from BuildShip</h1>
      <button
        data-buildship-chat-widget-button
        className="bg-slate-500 p-2 rounded-sm"
      >
        Chat with BuildShip
      </button>
    </main>
  );
}

"use client";

import "@buildshipapp/chat-widget";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.buildShipChatWidget.config.widgetTitle = "Chatbot";
      window.buildShipChatWidget.config.greetingMessage =
        "Hello! How may I help you today?";
      window.buildShipChatWidget.config.url =
        "https://<project_id>.buildship.run/chat/....";
    }
  }, []);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-xl">Hello World from BuildShip</h1>
      <button
        data-buildship-chat-widget-button
        className="bg-slate-500 p-2 rounded-sm"
      >
        Chat with BuildShip
      </button>
    </main>
  );
}

"use client";

import "@buildshipapp/chat-widget";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.buildShipChatWidget.config.widgetTitle = "Chatbot";
      window.buildShipChatWidget.config.greetingMessage =
        "Hello! How may I help you today?";
      window.buildShipChatWidget.config.url =
        "https://<project_id>.buildship.run/chat/....";
    }
  }, []);
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-xl">Hello World from BuildShip</h1>
      <button
        data-buildship-chat-widget-button
        className="bg-slate-500 p-2 rounded-sm"
      >
        Chat with BuildShip
      </button>
    </main>
  );
}

Finally, follow these steps to connect the widget with your BuildShip workflow: https://github.com/rowyio/buildship-chat-widget?tab=readme-ov-file#step-2-connecting-the-chat-widget-to-your-buildship-workflow

Jump to solution

Buildship Bot for NextJs

Similar Threads

Similar Threads

Similar Threads