Getting Started

Quick Start

Install

npm install @intentctrl/react

Make sure react, react-dom, and zod are already in your project.

Add the provider

Wrap your application (or the part that needs AI) in IntentCtrlProvider. You need an API key and the URL of an AI backend. Use the cloud platform directly, or self-host the backend for free.

app/layout.tsx

import { IntentCtrlProvider } from "@intentctrl/react";

export default function RootLayout({ children }) {
  return (
    <IntentCtrlProvider apiUrl="http://app.intentctrl.com/api/chat" apiKey={process.env.NEXT_PUBLIC_API_KEY!}>
      {children}
    </IntentCtrlProvider>
  );
}

Start a chat

Inside any child component, use useIntentCtrlChat() to send messages and display responses.

components/chat-panel.tsx

import { useIntentCtrlChat } from "@intentctrl/react";

export function ChatPanel() {
  const { messages, sendMessage, status } = useIntentCtrlChat();

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}
      <input
        placeholder="Ask something..."
        onKeyDown={(e) => {
          if (e.key === "Enter" && e.currentTarget.value) {
            sendMessage(e.currentTarget.value);
            e.currentTarget.value = "";
          }
        }}
      />
      {status === "streaming" && <span>Thinking...</span>}
    </div>
  );
}

That's it. The AI sees the current page, knows about any tools you've registered, and can respond with text or take actions.

What's next

Register custom tools so the AI can interact with your app
Control permissions to restrict which actions the AI can take
Learn about built-in tools the AI already has