LangGraph Chatbot

A customizable React chatbot component that integrates with LangGraph's API.

Installation

npm install langgraph-chatbot
# or
yarn add langgraph-chatbot

Usage

import { Chatbot } from 'langgraph-chatbot';

function App() {
  return (
    <Chatbot
      apiUrl="http://your-api-url"
      assistantId="your-assistant-id"
      title="My Chatbot"
      placeholder="Type your message..."
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | "http://127.0.0.1:2024" | The URL of your LangGraph API | | assistantId | string | "agent" | The ID of your assistant | | title | string | "Chatbot" | The title displayed in the chat window | | placeholder | string | "Type a message..." | The placeholder text for the input field | | className | string | "" | Additional CSS classes for the root element |

Methods

You can access the following methods using a ref:

import { Chatbot, ChatbotHandle } from 'langgraph-chatbot';
import { useRef } from 'react';

function App() {
  const chatbotRef = useRef<ChatbotHandle>(null);

  const sendMessage = () => {
    chatbotRef.current?.sendUserMessage("Hello!");
  };

  return (
    <>
      <button onClick={sendMessage}>Send Message</button>
      <Chatbot ref={chatbotRef} />
    </>
  );
}

Available Methods

• sendUserMessage(text: string): Programmatically send a user message
• sendBotResponse(text: string): Programmatically send a bot response

Styling

The component uses Tailwind CSS classes for styling. Make sure your project has Tailwind CSS configured to use the component's styles.

License

MIT