Introdução

Com os avanços atuais de IA, é fácil configurar um modelo generativo de IA em seu computador para criar um chatbot.

Neste artigo veremos como você pode configurar um chatbot em seu sistema usando Ollama e Next.js

Configurar Ollama

Vamos começar configurando o Ollama em nosso sistema. Visite ollama.com e baixe-o para o seu sistema operacional. Isso nos permitirá usar o comando ollama no terminal/prompt de comando.

Verifique a versão do Ollama usando o comando ollama -v
Confira a lista de modelos na página da biblioteca Ollama.

Baixe e execute um modelo

Para baixar e executar um modelo, execute o comando ollama run
Exemplo: ollama run llama3.1 ou ollama run gemma2

Você poderá conversar com a modelo diretamente no terminal.

Configurar aplicativo da web

Configuração básica para Next.js

• Baixe e instale a versão mais recente do Node.js
• Navegue até a pasta desejada e execute npx create-next-app@latest para gerar o projeto Next.js.
• Ele fará algumas perguntas para gerar código padrão. Para este tutorial, manteremos tudo padrão.
• Abra o projeto recém-criado no editor de código de sua preferência. Vamos usar o VS Code.

Instalando dependências

Existem alguns pacotes npm que precisam ser instalados para usar o ollama.

1. ai de vercel.
2. ollama A biblioteca JavaScript Ollama fornece a maneira mais fácil de integrar seu projeto JavaScript com Ollama.
3. ollama-ai-provider ajuda a conectar ai e ollama.
4. Os resultados do chat react-markdown serão formatados no estilo markdown. Para analisar o markdown, usaremos o pacote react-markdown.

Para instalar essas dependências, execute npm i ai ollama ollama-ai-provider.

Criar página de bate-papo

Em app/src há um arquivo chamado page.tsx.

Vamos remover tudo nele e começar com o componente funcional básico:

src/app/page.tsx

export default function Home() {
  return (
    

        {/* Code here... */}
    
  );
}

Vamos começar importando o gancho useChat de ai/react e react-markdown

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

Como estamos usando um gancho, precisamos converter esta página em um componente cliente.

Dica: você pode criar um componente separado para bate-papo e chamá-lo no page.tsx para limitar o uso do componente do cliente.

No componente, obtenha mensagens, entrada, handleInputChange e handleSubmit do gancho useChat.

    const { messages, input, handleInputChange, handleSubmit } = useChat();

Em JSX, crie um formulário de entrada para obter a entrada do usuário para iniciar a conversa.

A boa ideia é que não precisamos corrigir o manipulador ou manter um estado para o valor de entrada, o gancho useChat nos fornece isso.

Podemos exibir as mensagens percorrendo o array de mensagens.

    messages.map((m, i) => (
{m}
)

A versão estilizada com base na função do remetente é semelhante a esta:

  

    

      {messages.length ? (
        messages.map((m, i) => {
          return m.role === "user" ? (
            

              You
              

                {m.content}
            
          ) : (
            

              AI
              

                {m.content}
            
          );
        })
      ) : (
        

          
Local AI Chat
        
      )}
    
  

Vamos dar uma olhada no arquivo completo
src/app/page.tsx

"use client";
import { useChat } from "ai/react";
import Markdown from "react-markdown";

export default function Home() {
    const { messages, input, handleInputChange, handleSubmit } = useChat();
    return (
        

              

                
            
        
    );
}

Com isso, a parte do frontend está completa. Agora vamos lidar com a API.

Manipulando API

Vamos começar criando route.ts dentro de app/api/chat.
Com base na convenção de nomenclatura Next.js, isso nos permitirá lidar com as solicitações no endpoint localhost:3000/api/chat.

src/app/api/chat/route.ts

import { createOllama } from "ollama-ai-provider";
import { streamText } from "ai";

const ollama = createOllama();

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = await streamText({
    model: ollama("llama3.1"),
    messages,
  });
  return result.toDataStreamResponse();
}

O código acima usa basicamente ollama e vercel ai para transmitir os dados de volta como resposta.

• createOllama cria uma instância do ollama que irá se comunicar com o modelo instalado no sistema.
• A função POST é o manipulador de rota no endpoint /api/chat com o método post.
• O corpo da solicitação contém a lista de todas as mensagens anteriores. Portanto, é uma boa ideia limitá-lo ou o desempenho diminuirá com o tempo. Neste exemplo, a função ollama toma "llama3.1" como modelo para gerar a resposta com base no array de mensagens.

IA generativa em seu sistema

Execute npm run dev para iniciar o servidor no modo de desenvolvimento.
Abra o navegador e vá para localhost:3000 para ver os resultados.
Se tudo estiver configurado corretamente, você poderá conversar com seu próprio chatbot.

Você pode encontrar o código-fonte aqui: https://github.com/parasbansal/ai-chat

Deixe-me saber se você tiver alguma dúvida nos comentários, tentarei respondê-la.