use-ai-lib

A React hooks library for building AI-powered apps as simple as possible.

Features

• Build on top of ai.
• Manage generating state by @tanstack/react-query.
• Schema declaration and validation by zod.
• Support custom AI requests.

Most important, it's simple and out-of-the-box.

No API. Just tell the hook which model you're using, what the prompt is, stream or not, schema or not, and then get the data generated from AI.

Examples

Use AIModelProvider to get the default query client.

import { AIModelProvider } from 'use-ai-lib';

const yourApp = () => {
  return (
    <AIModelProvider>
      <App />
    </AIModelProvider>
  );
};

Set your global model and custom query client.

import { openai } from '@ai-sdk/openai';
import { yourQueryClient } from './yourQueryClient';

const yourApp = () => {
  return (
    <AIModelProvider
      model={openai('gpt-4-turbo')}
      queryClient={yourQueryClient}
    >
      <App />
    </AIModelProvider>
  );
};

Generate text as you're using a simple hook!

import { useAIModel } from 'use-ai-lib';

const { data } = useAIModel({ prompt: 'How are you?' });

Generate object using zod schema.

import { z } from 'zod';
import { chromeai } from 'chrome-ai';

const schema = z.object({
  name: z.string({ description: 'Name' }),
  address: z.string({ description: 'Address' }),
});

const {
  data, // get the right type
  isError,
  error,   // errors throwed by the model or query
} = useAIModel<{ name: string; address: string }>({
  model: chromeai(), // use different model from global
  messages, // instead of string, pass messages array
  schema,
})

Use stream.

const {
  data, // get the final text
  isGenerating, // isLoading
  usage, // the number of tokens used
} = useAIModel({
  prompt: 'Tell me about React.js',
  stream: true,
  onSuccess: (chunk) => { 
    // doSomething 
  }
})

Contributing

Use pnpm and biome.

The initial idea

#2