🆕 Text Generation

This template uses best practices to generate text based on a user's input.

The text generation feature is powered by language models like OpenAI's GPT-3.5 Turbo and uses Vercel's AI SDK to stream responses back to the user.

You can generate text using the following API endpoints:

• /api/chat: Used to generate chat responses and store conversations in Supabase
• /api/vector-search: Used to perform "document search" with retrieval augmented generation, or RAG. Read more on the vector search tutorial page

3-Min Walkthrough

🆕 Generate chat responses with Groq, Claude 3, or Ollama

TemplateAI supports 3 other language models as alternatives to OpenAI's GPT, allowing you to choose the model you prefer most.

Using Groq

1. Get an API Key from the Groq Console and set GROQ_API_KEY in your .env file

2. When chatting in the ChatWindow, select Groq as the language model.

Using Claude 3

1. Get an API Key from the Anthropic Console and set ANTHROPIC_API_KEY in your .env file

2. When chatting in the ChatWindow, select Claude 3 as the language model.

Using Ollama (llama2 running locally)

1. Install Ollama and pull the llama2:chat model:

ollama pull llama2:chat

2. When chatting in the ChatWindow, select Ollama as the language model.

If you want to use a different text model, switch OLLAMA_MODEL=llama2:chat in your .env file to your preferred model.

Setup with OpenAI

1. Set the OPENAI_API_KEY in your .env file

2. Make sure you have Supabase configs set correctly, and have run migrations on your database. (Follow the Database setup first if you haven't completed these steps.)

Example Usage

import { useChat } from 'ai/react';
 
const MyComponent = () => {
  const { messages, input, handleInputChange, handleSubmit, setMessages } =
    useChat({ api: '/api/chat' });
 
  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}
 
      <form onSubmit={handleSubmit}>
        <label>
          Say something...
          <input value={input} onChange={handleInputChange} />
        </label>
        <button type='submit'>Send</button>
      </form>
    </div>
  );
};
 
export default MyComponent;