useChatbotContext

Introduction

useChatbotContext() gives components access to the state, actions, and configuration provided by ChatbotProvider.

It is the API to use when building a custom chatbot UI or modifying the generated chatbot components.

Import

import { useChatbotContext } from "react-ai-chat";

Basic usage

Call the hook from a component rendered inside ChatbotProvider:

import { ChatbotProvider, useChatbotContext } from "react-ai-chat";

function CustomChatbot() {
  const { messages, input, setInput, handleSubmit, isLoading } =
    useChatbotContext();

  return (
    <div>
      <p>Messages: {messages.length}</p>
    </div>
  );
}

export default function App() {
  return (
    <ChatbotProvider>
      <CustomChatbot />
    </ChatbotProvider>
  );
}

Context values

The hook returns the chatbot state, actions, and configuration.

`isOpen`

Indicates whether the chatbot window is currently open.

isOpen: boolean;

const { isOpen } = useChatbotContext();

return <p>{isOpen ? "Chat is open" : "Chat is closed"}</p>;

`setIsOpen`

Updates the chatbot's open state.

setIsOpen: (open: boolean) => void;

const { setIsOpen } = useChatbotContext();

<button onClick={() => setIsOpen(true)}>Open chat</button>;

Close the chatbot with:

<button onClick={() => setIsOpen(false)}>Close</button>

`input`

Contains the current value of the message input.

input: string;

const { input } = useChatbotContext();

<input value={input} readOnly />;

`setInput`

Updates the message input value.

setInput: (input: string) => void;

const { input, setInput } = useChatbotContext();

<input value={input} onChange={(event) => setInput(event.target.value)} />;

`messages`

Contains the current conversation messages.

messages: ReturnType < typeof useChat > ["messages"];

The messages are provided by the AI SDK useChat hook.

Use them to render the conversation:

const { messages } = useChatbotContext();

return (
  <div>
    {messages.map((message) => (
      <div key={message.id}>{message.role}</div>
    ))}
  </div>
);

The exact message structure follows the version of the AI SDK used by react-ai-chat.

`status`

Contains the current chat request status.

status: ReturnType < typeof useChat > ["status"];

The value comes from the AI SDK useChat hook.

You can use it when your UI needs more detailed request state than isLoading provides.

const { status } = useChatbotContext();

<p>Status: {status}</p>;

`isLoading`

Indicates whether the chatbot is currently generating a response.

isLoading: boolean;

Use it to disable controls or show a loading state:

const { isLoading } = useChatbotContext();

<button disabled={isLoading}>{isLoading ? "Thinking..." : "Send"}</button>;

`handleSubmit`

Submits a message to the configured chat endpoint.

handleSubmit: (e?: SubmitEvent<HTMLFormElement>, customText?: string) =>
  Promise<void>;

The form event is optional. You can use it directly from a form:

const { handleSubmit } = useChatbotContext();

<form
  onSubmit={(event) => {
    event.preventDefault();
    void handleSubmit(event);
  }}
>
  <button type="submit">Send</button>
</form>;

You can also submit custom text without using the current input value:

const { handleSubmit } = useChatbotContext();

<button onClick={() => void handleSubmit(undefined, "Tell me about React")}>
  Ask
</button>;

The customText argument is useful for starter prompts or custom controls that should send a specific message.

`position`

Contains the configured chatbot position.

position: "bottom-right" | "bottom-left" | "top-right" | "top-left";

const { position } = useChatbotContext();

<p>Chatbot position: {position}</p>;

The value comes from the ChatbotProvider configuration.

`themeMode`

Contains the active chatbot theme mode.

themeMode: "auto" | "light" | "dark";

const { themeMode } = useChatbotContext();

<p>Theme mode: {themeMode}</p>;

The available values are:

auto
light
dark

auto allows the chatbot to follow the user's system color preference.

`themeStyles`

Contains the calculated theme styles used by the chatbot.

themeStyles: CSSProperties;

The value can be applied to a custom chatbot element:

const { themeStyles } = useChatbotContext();

<div style={themeStyles}>Custom chatbot UI</div>;

This is useful when building custom components that should use the theme configured through ChatbotProvider.

Building a custom input

The context API lets you replace the generated input with your own component.

function CustomInput() {
  const { input, setInput, handleSubmit, isLoading } = useChatbotContext();

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        void handleSubmit(event);
      }}
    >
      <input
        value={input}
        onChange={(event) => setInput(event.target.value)}
        placeholder="Ask a question..."
      />

      <button type="submit" disabled={isLoading || !input.trim()}>
        {isLoading ? "Thinking..." : "Send"}
      </button>
    </form>
  );
}

Building a custom message list

You can control how the conversation is rendered.

function CustomMessages() {
  const { messages } = useChatbotContext();

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <strong>{message.role}</strong>

          <div>
            {message.parts.map((part, index) =>
              part.type === "text" ? <p key={index}>{part.text}</p> : null,
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

The message structure follows the AI SDK message format used by the package.

Building a custom trigger

Use isOpen and setIsOpen to create your own trigger:

function CustomTrigger() {
  const { isOpen, setIsOpen } = useChatbotContext();

  return (
    <button onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? "Close chat" : "Open chat"}
    </button>
  );
}

Using starter prompts

You can use handleSubmit with customText to create custom prompt buttons:

function StarterPrompts() {
  const { handleSubmit, isLoading } = useChatbotContext();

  const prompts = [
    "What can you help me with?",
    "How does this work?",
    "Tell me about this project",
  ];

  return (
    <div>
      {prompts.map((prompt) => (
        <button
          key={prompt}
          disabled={isLoading}
          onClick={() => void handleSubmit(undefined, prompt)}
        >
          {prompt}
        </button>
      ))}
    </div>
  );
}

This sends the selected prompt through the same chat submission flow as the regular input.

Full custom UI

The context values can be combined to build a complete chatbot interface:

import { ChatbotProvider, useChatbotContext } from "react-ai-chat";

function Chat() {
  const {
    messages,
    input,
    setInput,
    handleSubmit,
    isLoading,
    isOpen,
    setIsOpen,
    position,
    themeMode,
    themeStyles,
  } = useChatbotContext();

  if (!isOpen) {
    return <button onClick={() => setIsOpen(true)}>Open chat</button>;
  }

  return (
    <section style={themeStyles} data-position={position}>
      <header>
        <h2>AI Assistant</h2>
        <p>Theme: {themeMode}</p>

        <button onClick={() => setIsOpen(false)}>Close</button>
      </header>

      <div>
        {messages.map((message) => (
          <div key={message.id}>
            {message.role}:{" "}
            {message.parts.map((part, index) =>
              part.type === "text" ? (
                <span key={index}>{part.text}</span>
              ) : null,
            )}
          </div>
        ))}
      </div>

      <form
        onSubmit={(event) => {
          event.preventDefault();
          void handleSubmit(event);
        }}
      >
        <input
          value={input}
          onChange={(event) => setInput(event.target.value)}
        />

        <button type="submit" disabled={isLoading || !input.trim()}>
          {isLoading ? "Thinking..." : "Send"}
        </button>
      </form>
    </section>
  );
}

export default function App() {
  return (
    <ChatbotProvider apiEndpoint="/api/chat">
      <Chat />
    </ChatbotProvider>
  );
}

Provider requirement

useChatbotContext() must be called from a component rendered inside ChatbotProvider.

<ChatbotProvider>
  <CustomChatbot />
</ChatbotProvider>

Use ChatbotProvider to provide the chatbot state and configuration to its child components.

When to use this API

Use useChatbotContext() when you need direct access to chatbot state or when you are building a custom chatbot interface.

For a complete ready-made interface, use <Chatbot />.

For an editable starting point, generate the chatbot:

npx react-ai-chat init

The generated components use ChatbotProvider and useChatbotContext().