⚡ react-zero-ai

Insanely fast, 100% Client-Side AI React Hooks. Zero backend. Zero API keys. Absolute Privacy.

Showcase GIF / Video Placeholder (Show typing -> instant sentiment, or image drag & drop)
Try the Live Demo

---

Imagine dropping an entire AI model straight into your React component with a single hook. No expensive backend servers to spin up. No API keys to leak. No CORS nightmare. Just pure, offline-capable AI running directly in your user's browser at 60fps.

react-zero-ai gives you production-ready full Transformers.js models wrapped in beautiful, buttery-smooth React Hooks. All inference runs entirely on a background Web Worker thread, meaning your UI never blocks, even when doing heavy ML computations.

🤯 Why React developers are going crazy over this:

• Zero Config: npm install react-zero-ai and you are done. No Webpack configuring, no WASM nightmare.
• Main Thread === Unblocked: We automatically spawn a background Web Worker pool. Your React tree stays silky smooth while ML models crunch gigabytes of data.
• 100% Free & Unlimited: Run unlimited inferences. No OpenAI billing. No Hugging Face API limits. Compute is completely offloaded to your users' devices.
• Total Privacy (Air-gapped capable): The data never leaves the browser. Perfect for analyzing sensitive PII, internal documents, or private images.

🚀 Quick Start (Copy & Paste ready)

npm install react-zero-ai

1. 💬 Sentiment Analysis

Analyze text sentiment instantly as the user types.

import { useSentimentAnalysis } from 'react-zero-ai';

function ReviewBox() {
  const { analyze, isLoading } = useSentimentAnalysis();
  const [result, setResult] = useState(null);

  if (isLoading) return <div>Downloading AI Model (Cached after first load)...</div>;

  return (
    <div>
      <textarea 
        onChange={async (e) => setResult(await analyze(e.target.value))} 
        placeholder="Type a review..."
      />
      {result && <span>{result.sentiment} (Confidence: {result.confidence})</span>}
    </div>
  );
}

2. 🧠 Semantic Embeddings (Vector Search)

Build local semantic search without a vector database! Find related sentences or documents purely offline.

import { useEmbeddings } from 'react-zero-ai';

function OfflineSearch() {
  const { findSimilar } = useEmbeddings();
  const candidates = ["How to reset password", "Contact support", "Pricing limits"];
  
  const search = async (query) => {
    // finds the top 3 most semantically similar matches
    const results = await findSimilar(query, candidates, 3);
    console.log(results); // [{ text: "How to reset password", score: 0.89 }, ...]
  };

  return <button onClick={() => search("I forgot my login")}>Search FAQ</button>;
}

3. 🖼️ Image Classification

Drop an image in, get predictions out. Support for any Hugging Face Vision Transformer model.

import { useImageClassifier } from 'react-zero-ai';

function Dropzone() {
  const { classify } = useImageClassifier({ topk: 3 });

  const onFileDrop = async (file) => {
    const { results } = await classify(file);
    console.log(results); // [{ label: "Golden Retriever", score: 0.95 }, ...]
  };

  return <input type="file" onChange={(e) => onFileDrop(e.target.files[0])} />;
}

4. 🎯 Object Detection

Draw bounding boxes around objects in images.

import { useObjectDetection } from 'react-zero-ai';

function ObjectScanner() {
  const { detect } = useObjectDetection();

  const scan = async (imageUrl) => {
    const { objects } = await detect(imageUrl);
    objects.forEach(obj => {
      console.log(`Found ${obj.label} at`, obj.box);
    });
  };
}

🛠️ Advanced: Bring Your Own Model

By default we use highly optimized, tiny models. But react-zero-ai lets you slot in ANY model from the Hugging Face hub:

const { analyze } = useSentimentAnalysis({ 
  model: "cardiffnlp/twitter-roberta-base-sentiment-latest" 
});

⚠️ Important Setup (Cross-Origin Isolation)

For maximum performance, Web Workers require SharedArrayBuffer support. You must configure your bundler to inject COOP/COEP headers.

Vite (vite.config.ts)

import { defineConfig, Plugin } from 'vite';
import react from '@vitejs/plugin-react';

function crossOriginIsolation(): Plugin {
  return {
    name: 'cross-origin-isolation',
    configureServer(server) {
      server.middlewares.use((_req, res, next) => {
        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
        next();
      });
    },
  };
}

export default defineConfig({
  plugins: [react(), crossOriginIsolation()],
  optimizeDeps: { exclude: ['@huggingface/transformers'] },
  worker: { format: 'es' },
});

Next.js and Webpack guides coming soon.

📄 License

MIT © Local AI React Team