Como construir um aplicativo de assistente pessoal baseado em pesquisa de IA

Neste artigo, gostaríamos de mostrar como combinar duas tecnologias ( e ) e criar um LangChain Anthropic assistente pessoal com motor de busca. Mais e mais produtos de IA estão sendo criados pelos participantes de A próxima oportunidade para desenvolvedores é nosso hackathon conjunto com , onde cada participante tem a chance de criar seu próprio usando a tecnologia mais recente do . Aqui falaremos sobre uma aplicação de IA que está se tornando cada vez mais importante: . nossos hackathons. o Google Cloud Vertex AI aplicativo de IA Google Cloud os mecanismos de busca O que é? Um assistente pessoal com tecnologia de pesquisa é um assistente digital que usa para ajudar os usuários em tarefas como Esses assistentes usam algoritmos de pesquisa para coletar e analisar dados de várias fontes, apresentando-os aos usuários de maneira útil e concisa. tecnologia de mecanismo de pesquisa encontrar informações, fazer reservas, definir lembretes e enviar mensagens. Exemplos proeminentes de assistentes pessoais baseados em pesquisa são , , e . Esses assistentes usam efetivamente seus recursos de pesquisa para fornecer informações precisas e relevantes, concluir tarefas e melhorar suas respostas à medida que interagem com o usuário. Google Assistant Siri Alexa Cortana Apresentando o Claude do Anthropic A Anthropic é uma organização de pesquisa focada no desenvolvimento de sistemas avançados de IA. Sua última criação, Claude, é um assistente de IA de próxima geração projetado para ser útil, honesto e inofensivo. Este modelo de ponta garante um alto grau de confiabilidade e previsibilidade em diversas tarefas. Os principais recursos do Claude incluem: Recursos versáteis de conversação e processamento de texto Manter a segurança e a privacidade do usuário como sua principal prioridade Os principais casos de uso de Claude são: resumo Procurar Escrita criativa e colaborativa perguntas e respostas Assistência de codificação Esses recursos tornam o Claude uma ferramenta de IA ideal para uma variedade de aplicativos, capacitando usuários em diferentes domínios. Introdução ao LangChain LangChain é uma ferramenta versátil para construir aplicativos de modelo de linguagem de ponta a ponta. Ele fornece uma estrutura robusta que simplifica o processo de criação, gerenciamento e implantação de modelos de aprendizado de idiomas (LLMs). Os LLMs são modelos avançados de IA projetados para entender, gerar e manipular texto humano em vários idiomas e tarefas. Os principais recursos do LangChain incluem: Gerenciamento eficiente de prompts para LLMs A capacidade de criar cadeias de tarefas para fluxos de trabalho complexos Adicionando estado à IA, permitindo que ela se lembre de informações de interações anteriores Esses recursos tornam o LangChain uma plataforma poderosa e fácil de usar para aproveitar o potencial dos modelos de linguagem em diversas aplicações. Pré-requisitos Conhecimento básico de Python Conhecimento básico de Typescipt e/ou React Acesso à API Claude da Anthropic Acesso à API de pesquisa na web do SerpApi Contorno Inicializando o Projeto Construindo o front-end para um aplicativo AI Assistant com Claude e LangCHain Escrevendo os arquivos do projeto Testando o aplicativo AI Assistant Discussão Inicializando o Projeto app.py (ponto de entrada do aplicativo Flask) 🐍 : Para começar, certifique-se de ter o Flask instalado em seu ambiente. Você pode fazer isso usando : Instalar o Flask pip pip install Flask : Crie um novo diretório para o seu projeto e navegue até ele: Crie um novo diretório mkdir claude-langchain cd claude-langchain : é uma boa prática usar um ambiente virtual ao trabalhar com projetos Python. Você pode criar um usando ou qualquer outra ferramenta de sua escolha: Configure um ambiente virtual (opcional) venv python -m venv venv source venv/bin/activate (Linux/Mac) venv\Scripts\activate (Windows) arquivo : Crie um arquivo para escrever o código do aplicativo Flask: Crie um main.py main.py touch app.py # Linux/Mac echo.>app.py # Windows : Abra o arquivo em seu editor de código favorito e adicione o seguinte código: Escreva o código do aplicativo Flask main.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() : salve o arquivo e execute o seguinte comando em seu terminal/prompt de comando: Execute o aplicativo Flask main.py python main.py : Abra seu navegador preferido e navegue até . Você deve ver "Hello, World!" exibido na página da web. Abra seu navegador http://127.0.0.1:5000/ E é isso! Você inicializou com sucesso um projeto Flask e criou um aplicativo simples. .env 🌏 : Para gerenciar facilmente as variáveis de ambiente com um arquivo , usaremos o pacote . Ao mesmo tempo, vamos também instalar . Instale ambos os pacotes usando : Instale python-dotenv e langchain .env python-dotenv langchain pip pip install python-dotenv langchain arquivo : Crie um arquivo no diretório raiz do seu projeto: Crie um .env .env touch .env # Linux/Mac echo.>.env # Windows : Abra o arquivo em seu editor de código favorito e adicione suas variáveis de ambiente. Cada variável deve estar em uma nova linha, no formato CHAVE=VALOR: Adicionar variáveis de ambiente .env ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxx SERPAPI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Observe que você precisa ter a chave de API para o modelo e o serviço de pesquisa na web . Claude da Anthropic da SerpAPI : Modifique seu arquivo para carregar as variáveis de ambiente do arquivo usando . Atualize seu da seguinte maneira: Carregar variáveis de ambiente main.py .env python-dotenv main.py import os from flask import Flask from dotenv import load_dotenv load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() arquivo no controle de versão: é importante não compartilhar informações confidenciais como chaves secretas no controle de versão. Se você estiver usando o Git, adicione a seguinte linha ao seu arquivo (crie um caso não o tenha): Ignore o .env .gitignore .env Agora, seu projeto Flask está configurado para usar variáveis de ambiente do arquivo . Você pode adicionar mais variáveis conforme necessário e acessá-las usando . Lembre-se de manter o arquivo privado e nunca submetê-lo ao controle de versão. .env os.environ.get('KEY') .env Construindo o front-end para um aplicativo AI Assistant com Claude e LangChain Este tutorial foi desenvolvido para usuários intermediários que possuem um conhecimento básico de Node.js, npm, React e Typescript. Usaremos uma pilha que inclui essas tecnologias, junto com Tailwind CSS para estilização. Essa pilha foi escolhida por sua robustez, versatilidade e forte suporte da comunidade para essas tecnologias. Além disso, integraremos o modelo Claude da Anthropic e LangChain, duas poderosas tecnologias de IA que permitirão que nosso aplicativo gere respostas de texto precisas e humanas. Instalando Node.js e NPM Baixe o instalador do Node.js para seu sistema operacional no . site oficial Siga os prompts de instalação para instalar o Node.js e o npm. A versão LTS (Long Term Support) é recomendada para a maioria dos usuários. Uma vez instalado, verifique a instalação verificando as versões do Node.js e npm do seu terminal: nó -v npm -v Configurando o ambiente do projeto Instalando Criar Aplicativo React é um utilitário de linha de comando que nos auxilia na criação de um novo aplicativo React.js. Vamos instalá-lo globalmente via npm: Create React App (CRA) npm install -g create-react-app Criando um novo projeto React com Typescript Usaremos o CRA com o modelo Typescript para criar um novo projeto chamado . ai-assistant-claude npx create-react-app ai-assistant-claude --template typescript Este comando cria um novo diretório chamado em nosso diretório atual, abrigando um novo aplicativo React com suporte Typescript. ai-assistant-claude Integrando TailwindCSS Instalando o TailwindCSS As etapas seguidas neste tutorial são baseadas na . Consulte estes documentos para obter instruções mais atualizadas. documentação oficial do Tailwind CSS Começaremos instalando o TailwindCSS e inicializando a biblioteca em nosso projeto: npm install -D tailwindcss npx tailwindcss init Configurando caminhos de modelo Em seguida, configuramos nossos caminhos de modelo adicionando-os ao arquivo . O significa as linhas que você adicionará: tailwind.config.js ++ /** @type {import('tailwindcss').Config} */ module.exports = { -- content: [], ++ content: [ ++ "./src/**/*.{js,jsx,ts,tsx}", ++ ], theme: { extend: {}, }, plugins: [], } Adicionando Diretivas Tailwind Por fim, adicionaremos as diretivas para cada uma das camadas do Tailwind ao nosso arquivo : @tailwind ./src/index.css @tailwind base; @tailwind components; @tailwind utilities; E voilá! Tailwind CSS agora está integrado ao nosso projeto. Instalando as Bibliotecas Necessárias Antes de prosseguirmos para a seção de codificação, vamos finalizar nossos preparativos instalando as bibliotecas necessárias, como , , e . fontawesome react-markdown axios react-hook-form Instalando o FontAwesome para Ícones npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome Instalando o React Markdown para renderizar o conteúdo do Markdown npm install --save react-markdown Com essas etapas concluídas, seu projeto está configurado com todas as ferramentas e bibliotecas necessárias. Em seguida, começaremos a criar o aplicativo assistente de IA que usa a API Claude da Anthropic e o LangChain para gerar respostas de texto precisas e semelhantes às humanas. Solução de problemas Se você tiver algum problema durante a instalação ou configuração, aqui estão algumas soluções comuns: Para problemas relacionados a Node.js ou npm, tente reinstalá-los ou verifique os documentos oficiais e . de Node.js npm Se você tiver problemas com Create React App, consulte a para obter ajuda. documentação do CRA Para problemas do Tailwind CSS, consulte a . documentação do Tailwind CSS Para quaisquer outros problemas, consulte a documentação das respectivas bibliotecas ou poste seus problemas no StackOverflow ou nos repositórios relevantes do GitHub. Escrevendo os arquivos do projeto Nesta seção, voltaremos ao aplicativo Flask que inicializamos anteriormente e adicionaremos novos endpoints, como e . Eles servirão como pontos de extremidade para nossos recursos de bate-papo simples e avançado (o último sendo alimentado pelos resultados de pesquisa do Google). /ask /search Vamos começar importando nossos módulos necessários: from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) A seção acima importa todos os pacotes necessários e inicializa nosso aplicativo Flask. Desenvolvendo o back-end Criando os endpoints básicos Começaremos criando um endpoint básico ( ) para testar se nosso servidor está rodando corretamente: / @app.route('/') def hello_world(): return 'Hello, World!' Ao visitar a URL raiz, devemos receber a resposta "Hello, World!", indicando que nosso servidor está funcionando conforme o esperado. Criando o ponto de extremidade /ask Este terminal processa mensagens para o recurso de bate-papo básico de nosso aplicativo. Ele lê os dados JSON da solicitação, processa as mensagens e gera uma resposta usando o modelo Claude da Anthropic e LangChain. @app.route('/ask', methods=['POST']) def ask_assistant(): # The code for /ask endpoint goes here Extraindo mensagens da solicitação Primeiro, precisamos verificar se algum dado foi fornecido e extrair as mensagens dele. data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") Gerando a resposta O segmento de código a seguir gera a resposta do chat usando o modelo do LangChain e o para estruturar nossa conversa. O histórico da conversa é armazenado usando o . ChatAnthropic() ChatPromptTemplate ConversationBufferMemory llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) Enviando a resposta Depois de gerar a resposta, substituímos as novas linhas no resultado e o retornamos como um objeto JSON. print(result) return jsonify({"status": "success", "message": result}) Criando o ponto de extremidade /search O ponto de extremidade é semelhante a , mas inclui a funcionalidade de pesquisa para fornecer respostas mais detalhadas. Usamos o para adicionar esse recurso. /search /ask SerpAPIWrapper @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) Executando o aplicativo Flask Por fim, adicionamos o clichê padrão para executar nosso aplicativo Flask. if __name__ == '__main__': app.run() Testando o back-end Se tudo correr bem, aqui está nosso código de back-end final. from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' @app.route('/ask', methods=['POST']) def ask_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) print(result) return jsonify({"status": "success", "message": result}) @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) if __name__ == '__main__': app.run() Agora, vamos testar nosso aplicativo. Execute o aplicativo de back-end com este comando, certifique-se também de que nosso ambiente virtual esteja ativado. flask run Saberemos que tudo ficará bem se nosso terminal retornar esta saída. Sem mais delongas, vamos testar nossos dois endpoints, e . Para distinguir entre os dois, vamos enviar a cada um deles uma carga útil semelhante. Abra seu software de documentação e teste de API REST ou apenas use cURL. Mas neste tutorial, usarei . /ask /search Insomnia Vamos primeiro chamar o endpoint com o seguinte payload. Digamos que perguntei sobre a sequência do videogame " ". Que responderá incorretamente. Isso é de se esperar já que o modelo tem corte de treinos a partir do final de 2021, período em que ainda não houve anúncios sobre a sequência. /ask The Legend of Zelda: Breath of the Wild E o ponto de extremidade ? Se você notar nosso código anterior, esse endpoint é tratado com uma cadeia mais sofisticada, que utiliza Agent. /search Ao usar o Agent, podemos dar à IA mais poder na tomada de decisão, fornecendo-lhe mais ferramentas do que apenas o seu próprio modelo, que como já demonstrámos, tem as suas próprias falhas. Para demonstrar como o endpoint funciona, vamos chamá-lo com a mesma carga de antes. /search Desta vez, funcionou bem! Como funciona sob o capô? vamos ver a saída em nosso terminal. Curiosamente, desta vez o modelo de IA não respondeu de imediato, mas pareceu 'ponderar' sobre o que fazer para responder. Ele decidiu responder depois de observar no resultado da pesquisa na web que "Com base na pesquisa de notícias, parece que uma sequência chamada The Legend of Zelda: Tears of the Kingdom foi anunciada". Então, por essa lógica, não deveríamos apenas usar o ponto de extremidade ? pois é mais preciso e, portanto, mais inteligente? Não exatamente. Normalmente, em um aplicativo baseado em chatbot, espera-se que o bot retenha o contexto das conversas anteriores, para que possa fornecer respostas como se 'lembrasse' todo o contexto da conversa. Vamos ver se endpoint pode fazer exatamente isso. /search /search Vamos testar se o endpoint pode lembrar o que acabamos de perguntar. /search Isso aconteceu porque, embora a biblioteca LangChain tenha um recurso de cadeia de memória que pode ser usado para reter conversas anteriores, o servidor da Web e o serviço REST API construído nele são inerentemente sem estado. O que significa que o servidor da Web tratará cada solicitação como uma nova solicitação. Mas não incluímos as conversas anteriores como carga útil? Esta é uma boa pergunta. Acontece que a cadeia de agentes usada no LangChain atualmente não suporta a manipulação de prompts compostos, que consistem em solicitações e respostas do usuário e da IA. Usamos isso principalmente para fornecer conversas de exemplo para o modelo, ajustando ainda mais o modelo para nossa resposta desejada. Já o Agente trabalha recebendo uma única instrução e desenvolve suas cadeias de pensamento em torno dela. É por isso que, por mais longas que sejam nossas conversas, o agente só responderá à última solicitação. Vamos testar nosso endpoint para perceber a diferença. /ask Desta vez, ele respondeu usando nossas conversas anteriores como contexto adicional! Até agora, percebemos que precisamos de ambos os endpoints para criar nosso aplicativo AI Assistant. Mas como podemos incorporar o ponto de extremidade desatualizado, mas sempre lembrar, com o ponto de extremidade esquecido, mas completo e atualizado? Construindo o front-end, é claro! /ask /search Desenvolvendo o Front-end App.tsx Vamos navegar de volta ao diretório do projeto . Neste projeto, começaremos a modificar nossos componentes React, começando com o arquivo de ponto de entrada, . ai-assistant-claude App.tsx import React from 'react'; import logo from './logo.svg'; import './App.css'; import { ChatClient } from './ChatClient'; function App() { return ( ); } export default App; No trecho de código acima, importamos o componente , que será criado em uma etapa posterior. Em seguida, incluímos o componente em um elemento . Isso configura a estrutura para nosso aplicativo assistente de IA usando componentes React. ChatClient ChatClient.tsx import React, { useState } from 'react'; import { ChatInput } from './ChatInput'; import { ChatHistory } from './ChatHistory'; export interface Message { content: string; role: string; } export const ChatClient: React.FC = () => { const [messages, setMessages] = useState >([]); const [isLoading, setIsLoading] = useState(false) const handleSimpleChat = (message: string) => { // Send the message and past chat history to the backend // Update messages state with the new message let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/ask', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } setIsLoading(false) console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; const handleAdvancedChat = (message: string) => { // Trigger AI agent with Google Search functionality // Update messages state with the new message and AI response let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/search', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } console.log('Success:', data); setIsLoading(false) }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; return ( AI Assistant with Claude and LangChain ); }; Este componente serve como interface de usuário principal para nosso assistente de IA. Conforme mostrado, ele incorpora um componente para exibir o histórico da conversa e um componente para inserir texto. ChatHistory ChatInput O componente processa a entrada do componente , envia solicitações para o back-end usando essa entrada e exibe um status de carregamento. Se a solicitação for processada com sucesso, o componente também mostrará a resposta recebida do back-end. ChatInput ChatHistory.tsx import React from 'react'; import { ReactMarkdown } from 'react-markdown/lib/react-markdown'; import { Message } from './ChatClient'; interface ChatHistoryProps { messages: Array ; isLoading: boolean } export const ChatHistory: React.FC = ({ messages, isLoading }) => { return ( {messages.map((message, index) => ( {message.content} ))} {isLoading && ( {/* Put your desired loading content here */} Thinking... )} ); }; Felizmente, o TailwindCSS oferece classes utilitárias integradas para animações simples, como . Essa classe ajuda elegantemente a indicar que uma solicitação está aguardando uma resposta. Neste componente também diferenciamos o posicionamento das mensagens do “usuário” e do “assistente”. animate-pulse ChatInput.tsx import React, { useState } from 'react'; interface ChatInputProps { onSimpleChat: (message: string) => void; onAdvancedChat: (message: string) => void; } export const ChatInput: React.FC = ({ onSimpleChat, onAdvancedChat }) => { const [input, setInput] = useState(''); const handleInputChange = (event: React.ChangeEvent ) => { setInput(event.target.value); }; const handleSubmit = (handler: (message: string) => void) => { handler(input); setInput(''); }; return ( handleSubmit(onSimpleChat)} className="ml-2 px-4 py-2 font-semibold text-gray-600 bg-white dark:text-gray-400 dark:bg-gray-800 border border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" > Ask handleSubmit(onAdvancedChat)} className="ml-2 px-4 py-2 font-semibold text-white bg-blue-500 border border-blue-600 rounded-md hover:bg-blue-400 focus:outline-none" > Ask and Search ); }; Por fim, adicionamos dois botões à nossa entrada de texto. O primeiro botão é usado para enviar a entrada para o endpoint , que processa a entrada usando o modelo AI sem nenhum aprimoramento adicional. /ask Esse endpoint é sensível ao contexto. O segundo botão, apropriadamente denominado "Perguntar e pesquisar", envia a entrada para o terminal . Além de processar a entrada por meio do modelo de IA, esse botão também aciona uma pesquisa na Web orientada por IA, se a situação exigir. /search index.html  -- React App ++ Claude AI Assistant You need to enable JavaScript to run this app. tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> Como toque final, atualizamos o título do nosso aplicativo na página alterando-o de " " para " ". index.html React App Claude AI Assistant pacote.json { "name": "ai-assistant-claude", "version": "0.1.0", "private": true, ++ "proxy": "http://localhost:5000", "dependencies": { Por fim, adicionamos uma configuração de proxy ao arquivo e o definimos como . Isso nos ajuda a contornar as limitações do CORS decorrentes do uso de portas diferentes. package.json http://localhost:5000 Testando o aplicativo AI Assistant Para começar o teste, primeiro verifique se o aplicativo de back-end (claude-langchain) já está em execução. Em seguida, altere o diretório para o aplicativo front-end (ai-assistant-claude) e inicie o aplicativo usando o seguinte comando: npm start O aplicativo pode demorar um pouco para ser criado. Assim que estiver pronto, ele abrirá automaticamente em seu navegador em . localhost:3000 Vamos testar o reconhecimento de contexto e o recurso de pesquisa! Primeiro, vamos perguntar sobre outro videogame cujo lançamento ainda não foi anunciado em 2021 – a sequência do último jogo Yakuza da . Além disso, perguntaremos se este jogo apresenta o amado personagem Kazuma Kiryu dos jogos anteriores. Para fazer isso, clique no botão " ". SEGA Perguntar Dê-lhe alguns segundos para pensar... Surpreendentemente, a IA respondeu incorretamente. Yakuza: Like a Dragon é de fato o último jogo da Yakuza, mas estrelado por um protagonista diferente, Ichiban Kasuga. Vamos reformular a pergunta e usar o botão " " desta vez. Perguntar e pesquisar Agora, a IA demorava mais para decidir se precisava pesquisar na web. Após constatar a necessidade de uma busca na web e encontrar uma resposta satisfatória, devolveu as informações ao cliente/front-end. Desta vez, ele retorna o título "Like a Dragon Gaiden: The Man Who Erased His Name", que de fato apresenta Kazuma Kiryu como protagonista. Fascinante, não é? O agente, alimentado por um Large Language Model, prevê quais ações são necessárias dados os recursos disponíveis (pesquisa) e fornece uma resposta satisfatória. O LangChain torna fácil conectar e "encadear" o modelo, prompts (instruções para o modelo) e outros recursos, como agentes e ferramentas. Conclusão Esperamos que você tenha gostado de criar este aplicativo e aprender sobre essas tecnologias. Para os interessados em se aprofundar, você pode acessar o projeto concluído para o e . front-end back-end E se você quiser construir com as tecnologias mais recentes realizadas por nossos parceiros, junte-se a nós no próximo desafio de IA! *please see lablab.ai for all terms and conditions