@promptrails/ai-chat — AI Chat Widget + React Hooks

Three Ways to Use

From zero-config script tag to fully custom React hooks — pick the level of control you need.

React Hooks

Build your own UI with useChat(), useStreaming(), useAgent(), and useApproval(). Full control over every pixel.

React Components

Ready-to-use <ChatWindow />, <MessageBubble />, <AgentSteps /> and more. Customize with Tailwind.

Embeddable Widget

One <script> tag — no React, no build tools needed. Floating chat bubble with Shadow DOM isolation.

Agent Step Tracking

Multi-step agent execution timeline with real-time status updates. Perfect for chain and workflow agents.

Human-in-the-Loop

Built-in approval flow UI — checkpoint name, payload preview, approve/reject buttons. No extra work needed.

Multi-Provider

PromptRails, OpenAI, or any custom SSE/WebSocket backend. Switch providers without changing your UI code.

Pick Your Layer

Same package, three integration levels.

index.html

<!-- Add to any website — no React needed -->
<script
  src="https://cdn.jsdelivr.net/npm/@promptrails/ai-chat/dist/widget.global.js"
  data-provider="promptrails"
  data-api-key="pr_your_api_key"
  data-base-url="https://api.example.com"
  data-agent-id="your_agent_id"
  data-title="Support Chat"
  data-greeting="Hi! How can I help you today?"
  data-position="bottom-right"
  data-primary-color="#2563eb"
></script>

<!-- Or initialize programmatically -->
<script>
  PromptRailsChat.init({
    provider: {
      type: "openai",
      apiKey: "sk-...",
      model: "gpt-4o-mini",
    },
    title: "AI Assistant",
  });
</script>

App.tsx

import { ChatWindow, createPromptRailsProvider } from "@promptrails/ai-chat";
import "@promptrails/ai-chat/styles.css";

const provider = createPromptRailsProvider({
  baseUrl: "https://api.example.com",
  apiKey: "pr_your_api_key",
  agentId: "your_agent_id",
});

export default function App() {
  return (
    <ChatWindow
      provider={provider}
      title="Support Chat"
      showAgentSteps
      showApprovals
    />
  );
}

CustomChat.tsx

import { useChat, createOpenAIProvider } from "@promptrails/ai-chat";

const provider = createOpenAIProvider({
  apiKey: "sk-...",
  model: "gpt-4o-mini",
});

export default function CustomChat() {
  const {
    messages, isLoading, input,
    setInput, handleSubmit
  } = useChat({ provider });

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id} className={msg.role}>
          {msg.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type a message..."
        />
        <button disabled={isLoading}>Send</button>
      </form>
    </div>
  );
}

How It Compares

Full-spectrum AI chat toolkit vs. alternatives.

Feature	@promptrails/ai-chat	Vercel AI SDK	Flowise Embed
React Hooks	✓	✓	✗
Ready-made Components	✓	✗	✗
Embeddable Widget	✓	✗	✓
Agent Step Tracking	✓	✗	✗
Human-in-the-Loop	✓	✗	✗
Shadow DOM Isolation	✓	N/A	✓
Multi-Provider	✓	✓	✗
No Build Tools Required	✓ (widget)	✗	✓

AI Chat for
Any Website

Three Ways to Use

React Hooks

React Components

Embeddable Widget

Agent Step Tracking

Human-in-the-Loop

Multi-Provider

Pick Your Layer

Try It Live

Widget Configuration

How It Compares

Ready to add AI chat to your app?

AI Chat forAny Website

Three Ways to Use

React Hooks

React Components

Embeddable Widget

Agent Step Tracking

Human-in-the-Loop

Multi-Provider

Pick Your Layer

Try It Live

Widget Configuration

How It Compares

Ready to add AI chat to your app?

AI Chat for
Any Website