🧠 ai-state ai-state is a lightweight React hook that integrates with OpenAI to generate reactive answers based on your app’s state. Just describe your prompt using variables like @count or @user.name, and the hook will automatically call OpenAI when those values change.

✨ Features 🪄 Prompt templating with @variable syntax

🔁 Reactive updates on variable changes

⏱ Built-in debounce to avoid rapid requests

💡 Simple setup, no backend required

⚙️ Configurable model, endpoint, and debounce time

📦 Installation bash Copy Edit npm install ai-state ⚙️ Configuration Before using the hook, call configureAIState() once in your app:

ts Copy Edit import { configureAIState } from "ai-state";

configureAIState({ apiKey: "sk-...", // your OpenAI key model: "gpt-3.5-turbo-1106", // optional, defaults to this apiUrl: "https://api.openai.com/v1/chat/completions", // optional debounceMs: 1000 // optional debounce in milliseconds }); 🚀 Usage tsx Copy Edit import { useState } from "react"; import { useStateAI } from "ai-state";

function Example({ number }: { number: number }) { const [count, setCount] = useState(3);

const result = useStateAI( "What is the square root of @count + @number?", { count, number } );

return (

🛡 Notes This hook uses fetch directly from the client, so your OpenAI key will be exposed. Use only in trusted environments or proxy through your own server.

You can pass nested variables like @user.name.

Let me know if you'd like me to add badges, TypeScript support note, or a link to a demo or CodeSandbox.