use-ai-hooks v1.1.2

use-ai

use-ai-hooks is a React hook library that provides custom hooks for integrating various AI functionalities into your React applications. It includes hooks for ChatGPT, Google Gemini, and more.

Documentation - https://use-ai.vercel.app/

Installation

To install use-ai-hooks, you can use npm or yarn:

npm install use-ai-hooks

Usage

Here's an example of how you can use the useChatGPT hook from use-ai:

import React, { useState } from 'react';
import {useChatGPT} from 'use-ai-hooks'; // Import the custom hook
 
const ChatGPTComponent = () => {
  const [messages, setMessages] = useState([{ role: 'user', content: '' }]);
  const [model, setModel] = useState('gpt-3.5-turbo');
  const apiKey = 'YOUR_API_KEY'; // Your OpenAI API key
 
  const { response, error, loading, fetchChatGPTResponse } = useChatGPT(apiKey);
 
  const handleSendMessage = async () => {
    if (messages[messages.length - 1].content !== '') {
      const newMessages = [...messages, { role: 'user', content: '' }];
      setMessages(newMessages);
      await fetchChatGPTResponse({ model, messages: newMessages });
    }
  };
 
  const handleInputChange = (index, value) => {
    const newMessages = [...messages];
    newMessages[index].content = value;
    setMessages(newMessages);
  };
 
  return (
    <div>
      <h1>Chat with GPT-3</h1>
      <div>
        {messages.map((message, index) => (
          <div key={index}>
            <input
              type="text"
              value={message.content}
              onChange={(e) => handleInputChange(index, e.target.value)}
              placeholder={`Message ${index + 1}`}
            />
          </div>
        ))}
      </div>
      <button onClick={handleSendMessage} disabled={loading}>
        Send
      </button>
 
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {response && <div>
        <h2>Response</h2>
        <p>{response}</p>
      </div>}
    </div>
  );
};
 
export default ChatGPTComponent;