chatcraft-bot

Official ChatCraft npm package for embedding your chatbot in React and npm-based web frameworks.

Install

npm install chatcraft-bot

Features

• Same widget behavior as ChatCraft script-tag embed
• Public config loading with deployed-only guard
• Theme, icon, chatbot name, font family, user/bot text colors
• Google Fonts dynamic loading (supports Customization font selection)
• Streaming chat responses (SSE) with typing bubble
• Markdown rendering for bold, lists, links, and tables
• Source/link cleanup in client response text
• Slide-up chat panel animation
• React component and hook APIs
• Framework-agnostic core for any npm app

React Usage

import { ChatCraftBot } from "chatcraft-bot/react";

export default function App() {
  return (
    <>
      <main>Your website content</main>
      <ChatCraftBot
        projectId="YOUR_PROJECT_ID"
        apiBase="http://localhost:8080/api/v1"
      />
    </>
  );
}

Next.js Usage

"use client";

import dynamic from "next/dynamic";

const ChatCraftBot = dynamic(
  () => import("chatcraft-bot/react").then((m) => m.ChatCraftBot),
  { ssr: false },
);

export default function ClientWidget() {
  return (
    <ChatCraftBot
      projectId="YOUR_PROJECT_ID"
      apiBase="https://your-backend-domain/api/v1"
    />
  );
}

Hook Usage

import { useChatCraftBot } from "chatcraft-bot/react";

export default function App() {
  useChatCraftBot({
    projectId: "YOUR_PROJECT_ID",
    apiBase: "http://localhost:8080/api/v1",
  });

  return <main>Website</main>;
}

Framework-Agnostic Usage (Vanilla / Any npm app)

import { createChatCraftWidget } from "chatcraft-bot";

const widget = createChatCraftWidget({
  projectId: "YOUR_PROJECT_ID",
  apiBase: "http://localhost:8080/api/v1",
});

widget.mount();

// Optional controls
// widget.open();
// widget.close();
// widget.toggle();
// widget.destroy();

API

createChatCraftWidget(options)

Returns a widget instance with:

• mount(): Promise<void>
• destroy(): void
• open(): void
• close(): void
• toggle(): void
• isMounted(): boolean

ChatCraftBot props

• projectId (required)
• apiBase (default: <current-origin>/api/v1)
• mountTarget (default: document.body)
• position (bottom-right or bottom-left)
• zIndex
• sessionId
• greeting
• autoOpen
• onError
• enabled (React only)

Deploy-state behavior

If a bot is in draft mode, /embed/config/{project_id} returns forbidden and the widget will not mount.

Security notes

• The widget renders markdown through controlled DOM node creation (no unsafe HTML injection).
• Inline source URLs and source markers are stripped from bot response text in the client.
• Public config and chat calls are made only to your provided apiBase.

Publish to npm

From this folder:

npm login
npm run build
npm publish --access public

Use package name:

chatcraft-bot

If npm says the version already exists, bump version in package.json and publish again.