AI Chat Widget

Drop-in AI chat interface with streaming responses, message history, typing indicators, and markdown rendering. Connects to any OpenAI-compatible API.

ReactAI WorkflowsBuilt with Cursor

2.1k

Stars

10.8k

Installs

Deps

Comments

Install / Copy

npx create-freestack-module ai-chat-widget

Code Preview

index.tsx

"use client";
import { useState, useRef } from "react";

export function ChatWidget({ apiEndpoint, systemPrompt }) {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [streaming, setStreaming] = useState(false);

  const sendMessage = async () => {
    const userMsg = { role: "user", content: input };
    setMessages((prev) => [...prev, userMsg]);
    setInput("");
    setStreaming(true);

    const res = await fetch(apiEndpoint, {
      method: "POST",
      body: JSON.stringify({ messages: [...messages, userMsg], systemPrompt }),
    });

    const reader = res.body.getReader();
    let assistantMsg = "";
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      assistantMsg += new TextDecoder().decode(value);
      setMessages((prev) => [...prev.slice(0, -1), { role: "assistant", content: assistantMsg }]);
    }
    setStreaming(false);
  };
}