coop2432
coop2432•4mo ago

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 :...
Jump to solution
1 Reply
Solution
Luis
Luis•4mo ago
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 : 
"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