ai-react-hooks 🤖

A collection of React hooks for seamless AI integration across multiple providers

✨ Features

• Unified API: Single hook (useAI) for all providers

• Multi-Provider: OpenAI, Anthropic, Google Gemini, Ollama, Groq, DeepSeek

• Feature-Rich: Chat, image generation, speech-to-text, summarization

• TypeScript: Full type safety and IntelliSense support

• Lightweight: Zero dependencies, tree-shakeable

• React 18+: Built for modern React applications

📦 Installation

Install using your preferred package manager.

npm

npm  install  ai-react-hooks

yarn

yarn  add  ai-react-hooks

pnpm

pnpm  add  ai-react-hooks

🚀 Quick Start

Basic Usage

import { useAI } from  "ai-react-hooks";

function  ChatComponent() {

const { ask, response, loading, error } = useAI({

provider:  "openai", // "ollama", "groq", "deepseek", etc.

apiKey:  process.env.OPENAI_API_KEY,

model:  "gpt-4o-mini",
});


const  handleClick = () => {

ask("Explain quantum computing in simple terms");

};

return (

<div>

<button  onClick={handleClick}  disabled={loading}>

{loading ? "Thinking..." : "Ask AI"}

</button>

{response && <p>{response}</p>}

  

{error && <p  className="error">Error: {error.message}</p>}

  

</div>


);

  

}

🎯 Available Hooks

Hook | Provider | Description ---- | -------- | ----------- useAI | All Providers | Unified hook for any AI provider useChatGPT | OpenAI | GPT-4, GPT-4o, GPT-3.5 useAnthropic | Anthropic | Claude 3, Claude Instant useGoogleGemini | Google | Gemini Pro, Gemini Flash useOllama | Ollama | Local models (Llama, Mistral) useGroq | Groq | Ultra-fast LLM inference useDeepSeek | DeepSeek | DeepSeek models useSummarize | Text Processing | Text summarization useAiImageGenerator | Image Generation | DALL·E, Stable Diffusion useSpeechToText | Browser API | Web Speech API integration

📖 Examples

1. Chat with OpenAI

import { useChatGPT } from  "ai-react-hooks";

function  OpenAIChat() {

const { ask, response, loading } = useChatGPT({

apiKey:  "your-openai-key",

model:  "gpt-4",

temperature:  0.7,
});

return (

<div>

<button  onClick={() =>  ask("Write a poem about React hooks")}>

Generate Poem

</button>

{loading && <span>Thinking...</span>}

{response && <p>{response}</p>}

</div>

);

}

2. Image Generation

import { useAiImageGenerator } from  "ai-react-hooks";

function  ImageGenerator() {
const { generate, imageUrl, loading } = useAiImageGenerator({

provider:  "openai",

apiKey:  process.env.OPENAI_API_KEY,

size:  "1024x1024",

});
return (

<div>

<input

placeholder="Describe an image..."

onKeyPress={(e) =>  e.key === 'Enter' && generate(e.target.value)}
/>

{loading && <p>Generating...</p>}

{imageUrl && <img  src={imageUrl}  alt="Generated"  />}

</div>

)

3. Speech to Text

import { useSpeechToText } from  "ai-react-hooks";

function  VoiceInput() {

const { start, stop, text, listening } = useSpeechToText({

continuous:  true,

language:  "en-US",


});

return (

<div>

<button  onClick={listening ? stop : start}>

{listening ? "Stop Recording" : "Start Recording"}

</button>

<p>{text || "Speak to see transcription..."}</p>

</div>

);

}

🔧 Configuration

Environment Setup

.env.local

OPENAI_API_KEY=sk-...

ANTHROPIC_API_KEY=sk-ant-...

GOOGLE_AI_API_KEY=AIza...

Provider Configuration

// OpenAI

const  openAI = useChatGPT({

apiKey:  "your-key",

model:  "gpt-4",

temperature:  0.7,
maxTokens:  1000,

});


// Anthropic

  

const  anthropic = useAnthropic({

apiKey:  "your-key",

model:  "claude-3-opus-20240229",

maxTokens:  1000,

});


// Ollama (Local)

  

const  ollama = useOllama({

baseUrl:  "http://localhost:11434",

model:  "llama2",

});

  

📚 API Reference

Common Props

Prop | Type | Description ---- | ---- | ----------- apiKey | string | Provider API key model | string | Model identifier temperature | number | Creativity level (0–1) maxTokens | number | Maximum response length

Hook Return Values

All hooks return an object with:

Property | Type | Description -------- | ---- | ----------- ask / generate | Function | Trigger AI request response | string | null | AI response loading | boolean | Request in progress error | Error | null | Error information reset | Function | Reset hook state

🤝 Contributing

Contributions are welcome! Please read the Contributing Guide for details.

Steps to contribute:

• Fork the repository

• Create a feature branch

• Commit your changes

• Push to your branch

• Open a Pull Request

🐛 Troubleshooting

CORS Issues with Ollama

Start Ollama with CORS enabled:

ollama serve --cors "*"

API Key Security

Always use environment variables for API keys:

import { useChatGPT } from 'your-package-name';

const { ask } = useChatGPT({
  apiKey: process.env.OPENAI_API_KEY, // ✅ Secure
  // apiKey: "sk-..." // ❌ Do not hardcode
});

📄 License

MIT © Yared Abebe