ai-react-hooks

A powerful collection of simple React Hooks for interacting with multiple AI providers:

🧠 OpenAI / ChatGPT

🦙 Ollama (local AI)

⚡ Groq

🧩 DeepSeek

🔮 Anthropic Claude

🔥 Google Gemini

🎨 AI Image Generation

🎤 Speech-to-Text (Browser API)

This library allows any React developer to plug AI models into their app using just a single hook.

🚀 Installation npm install ai-react-hooks

or

yarn add ai-react-hooks

📦 Available Hooks Provider Hook Name OpenAI GPT useChatGPT Ollama (Local AI) useOllama Groq useGroq DeepSeek useDeepSeek Anthropic Claude useAnthropic Google Gemini useGoogleGemini Text Summarization useSummarize Image Generation useAiImageGenerator Speech to Text useSpeechToText ⚡ Quick Examples

Below is how to use each hook.

🧠 1. useChatGPT (OpenAI) import { useChatGPT } from "ai-react-hooks";

const { ask, response, loading } = useChatGPT({ apiKey: "YOUR_OPENAI_API_KEY", model: "gpt-4o-mini" });

ask("Tell me about cats");

🦙 2. useOllama (Local AI) import { useOllama } from "ai-react-hooks";

const { ask, response, loading } = useOllama({ baseUrl: "http://localhost:11434", model: "llama3" });

ask("Tell me about cats");

Requires Ollama installed: https://ollama.com

⚡ 3. useGroq import { useGroq } from "ai-react-hooks";

const { ask, response, loading } = useGroq( "YOUR_GROQ_API_KEY", "llama3-8b-8192" );

ask("Explain quantum physics");

🧩 4. useDeepSeek import { useDeepSeek } from "ai-react-hooks";

const { ask, response, loading } = useDeepSeek( "YOUR_DEEPSEEK_API_KEY", "deepseek-chat" );

ask("Write a poem about the ocean");

🔮 5. useAnthropic (Claude) import { useAnthropic } from "ai-react-hooks";

const { ask, response, loading } = useAnthropic( "YOUR_ANTHROPIC_API_KEY", "claude-3-5-sonnet-latest" );

ask("Summarize this article");

🔥 6. useGoogleGemini import { useGoogleGemini } from "ai-react-hooks";

const { ask, response, loading } = useGoogleGemini( "YOUR_GOOGLE_API_KEY", "gemini-pro" );

ask("Tell me a joke");

✂️ 7. useSummarize (OpenAI) import { useSummarize } from "ai-react-hooks";

const { summarize, summary, loading } = useSummarize("YOUR_OPENAI_API_KEY");

summarize("Long text goes here...");

🎨 8. useAiImageGenerator import { useAiImageGenerator } from "ai-react-hooks";

const { generate, imageUrl, loading } = useAiImageGenerator( "YOUR_OPENAI_API_KEY" );

generate("A cat wearing sunglasses");

🎤 9. useSpeechToText (Browser) import { useSpeechToText } from "ai-react-hooks";

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

start(); // start listening stop(); // stop listening

🔌 How to Import All Hooks import { useChatGPT, useOllama, useGroq, useDeepSeek, useAnthropic, useGoogleGemini, useSummarize, useAiImageGenerator, useSpeechToText } from "ai-react-hooks";

📄 License

MIT — free for personal and commercial use.

🎉 Summary

With ai-react-hooks, developers can:

✔ Install one package ✔ Import any AI provider ✔ Use local or cloud models ✔ Chat, summarize, generate images, run speech-to-text, and more

✅ You can now publish safely

This README will NOT break npm.

If you want, I can also:

✅ Add badges ✅ Add examples GIFs ✅ Add TypeScript docs ✅ Add website documentation

Just tell me!