Alura > Cursos de Inteligência Artificial > Cursos de IA para Programação > Conteúdos de IA para Programação > Primeiras aulas do curso Claude e Python: desenvolva seu Chatbot Inteligente com a IA da Anthropic

Claude e Python: desenvolva seu Chatbot Inteligente com a IA da Anthropic

Integrando a API com o Front-End - Apresentação

Olá, meu nome é Laís Urano, sou instrutora na Alura e irei acompanhar vocês neste curso de Python com API da Anthropic.

Audiodescrição: Laís se identifica como uma mulher parda. Possui olhos castanhos claros e cabelos cacheados, longos e volumosos, da mesma cor. À sua frente, do lado esquerdo, há um microfone redondo branco, apoiado em um suporte. Ao fundo, há a parede lisa de um quarto, iluminada em tons de roxo e azul.

Para quem é o curso?

Esse conteúdo é destinado a quem deseja criar um chatbot utilizando a API da Anthropic com Python.

Pré-requisitos

Este curso é a continuação do anterior, portanto, é necessário que atender a alguns requisitos para cursá-lo, como:

O que aprenderemos?

Neste curso, aprenderemos a utilizar a API da Anthropic para construir um chatbot de atendimento para um aplicativo de entregas para restaurantes. Vamos integrar nossa aplicação em um front-end e desenvolver assistentes nesse chatbot, para:

Esses elementos melhorarão a experiência da pessoa usuária.

Aproveite os recursos da plataforma! Além dos vídeos, temos atividades no curso, além dois canais de apoio no fórum e na comunidade do Discord da Alura.

Vamos começar?

Integrando a API com o Front-End - Integrando o chatbot com o Front-End

No curso anterior, aprendemos a integrar a API da Antropic Claude em nossos projetos Python e desenvolver alguns assistentes voltados para o contexto de um aplicativo de entrega para restaurantes.

Vamos aproveitar esse mesmo contexto para desenvolver um assistente chatbot agora.

Conhecendo a API do Claude

Acessaremos a página da Claude AI pelo navegador. A ideia é ter uma interface na qual enviamos uma mensagem para o chatbot e ele responde com uma assistência à pessoa cliente, de acordo com os dados do aplicativo Sabor Express.

Na seção principal da página do Claude, após realizar o login, temos uma mensagem de boas-vindas e um campo de texto, no qual enviaremos a mensagem abaixo:

Olá, me ajude com a entrega.

Com isso, O Claude retornará uma mensagem específica:

Olá! Eu ficarei feliz em ajudar com a sua entrega. Para que eu possa auxiliá-lo melhor, poderia fornecer mais detalhes sobre que tipo de ajuda você precisa com a entrega? Por exemplo, você está buscando informações sobre rastreamento, prazos, opções de envio ou algo mais específico?

Precisamos desenvolver esse ponto no projeto: fornecer detalhes sobre os dados de cada cliente, além de comportamento e informações gerais do aplicativo.

Acessaremos o VS Code para trabalhar nisso.

Conhecendo o projeto

Ao abrir o projeto no VS Code, já temos alguns dados, como arquivos e pastas, que podem ser consultadas no explorador do VS Code, na aba lateral esquerda.

Por exemplo, temos um arquivo base.py, verificado no curso anterior, que contém a estrutura base do projeto, mostrando como selecionar qual modelo usar, criar a pessoa cliente, obter a chave dentro do .env e todos os dados para capturar uma mensagem e fazer esse assistente funcionar.

Além disso, já temos um .env armazenado com a chave da API.

Também temos o arquivo helpers, conhecido por conter funções de carregar e salvar arquivos. Por exemplo, a função carrega() recebe o nome de um arquivo, carrega os dados e os retorna, enquanto a função salva() cria o arquivo, recebendo seu nome e seu conteúdo.

Também temos o arquivo main.py, que contém nossas views. No topo dele, temos um import, onde utilizamos o framework Flask para importar a classe Flask e os métodos render_template, request e response.

Logo abaixo, criamos o aplicativo em Flask, assim como a chave secreta desse aplicativo, que nomeamos como 'alura', mas pode ser alterada por você.

Em seguida, criamos a primeira rota, a rota inicial "/", com uma função home() que renderiza o template index.html. Logo depois, executamos o aplicativo.

Para entender o que o index.html faz, acessaremos a pasta "templates" e acessaremos o arquivo index.html que contém a estrutura base do front-end, o qual transmite as informações visuais necessárias.

Fechando esse arquivo e acessando novamente o main.py, podemos executá-lo. Pressionando "Ctrl + J", abriremos o terminal na parte inferior da IDE.

Com o ambiente virtual ativo, executaremos o comando abaixo para rodar o projeto.

python main.py

O servidor começará a rodar, indicando que há um servidor Flask rodando no main e que podemos acessá-lo através do link fornecido, na porta 5000.

Clicaremos nesse link com "Ctrl" pressionado e haverá um redirecionamento para a página do chatbot, no navegador.

Em seu interior, no topo, temos a logo do chatbot no canto esquerdo e a opção "Limpar conversa" no canto direito. Na parte central, há uma mensagem do chatbot se apresentando e na parte inferior, um campo de texto com a opção de enviar mensagem, que possui um botão para adicionar arquivos à esquerda e um botão para enviar mensagens à direita.

Se enviarmos uma mensagem no campo de mensagem, como "Olá", pressionando "Enter", ele informa que nenhuma informação foi encontrada.

Olá

Not Found

The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

Isso ocorre porque não há conexão direta entre o funcionamento do front-end e o back-end. Configuraremos essa conexão a seguir.

Entendendo a tarefa

Voltando ao VS Code, acessaremos o caminho de pastas "static > js", dentro do qual acessaremos o arquivo index.js, que contém as funções do aplicativo em execução.

Com "Ctrl + J", fecharemos o terminal e voltaremos ao arquivo para verificar todos os dados do front-end. No momento, precisamos focar na função assíncrona enviarMensagem(), por volta da linha 5.

Essa função verifica se há algum valor inserido no momento e, se não houver, retorna o valor nulo. Se houver um valor, ela o salva na variável mensagem e apaga o valor de input.value para não ficar carregado.

Em seguida, a função cria uma bolha da pessoa usuária e adiciona a mensagem enviada. Depois, cria uma nova bolha com a mensagem "Analisando" do assistente no chatbot.

Precisamos focar a partir da constante resposta, que envia uma requisição para a rota /chat na porta 5000, usando o método POST, passando um JSON com a mensagem, nomeada como msg. Após enviar a mensagem, aguarda a resposta, armazena o texto da resposta e o envia para a bolha, para visualização no front-end.

Precisamos desenvolver a resposta msg dentro da rota /chat, que criaremos no main.py.

Criando a rota /chat

Fecharemos o arquivo index.js e acessaremos o main.py novamente, na pasta raiz. Em seu interior, criaremos uma nova rota.

Dentro da função home, acima do if, adicionamos um @app.route() para criar uma nova rota, informando entre parênteses que a rota é "/chat", entre aspas duplas.

Como a rota padrão já direciona para a porta 5000, não precisamos incluir essa informação, apenas o endpoint "/chat".

Também precisamos especificar os methods (métodos) permitidos. Conforme verificamos, esses métodos serão uma lista contendo "POST".

main.py:

@app.route("/chat",methods = ['POST'])

Cada view precisa de uma função. Portando, logo abaixo, criaremos a função, que, por padrão, tende a ter o mesmo nome do endpoint da rota — ou seja, chat.

@app.route("/chat",methods = ['POST'])
def chat():
    

No interior dessa função, receberemos a informação, que será o prompt da pessoa usuária, nomeado como prompt. Este será um request do tipo json para a mensagem msg, conforme verificamos anteriormente.

De acordo com o que aprendemos, após armazenar o prompt, precisamos informá-lo para que um bot ou assistente interprete e nos forneça uma resposta. Portanto, na próxima linha, teremos uma resposta armazenada por um bot(), que passará a informação do prompt. Depois, retornaremos essa resposta.

@app.route("/chat",methods = ['POST'])
def chat():
    prompt = request.json['msg']
    resposta = bot(prompt)
    return resposta

Assim, toda vez que o front-end enviar uma mensagem, o aplicativo fará uma requisição para a rota /chat.

Mantendo o código organizado

É importante lembrar de manter a organização no código. Todos os pontos importantes estão separados de acordo com suas funções. Temos um arquivo helpers com funções de salvar e carregar arquivos, uma base, pastas separadas para "static" e "template" do front-end, e assim por diante. Manter essa organização é essencial.

Próximos passos

A seguir, precisamos desenvolver o bot.

Integrando a API com o Front-End - Criando o bot

Realizamos a integração do front-end com o back-end, desenvolvendo a rota de \chat e a função equivalente que capturará o prompt e o passará para o bot.

Neste vídeo, precisamos desenvolver o bot assistente.

Criando o bot assistente

Voltando ao VS Code, criaremos um arquivo chamado bot.py na pasta raiz, mantendo esse padrão.

Acessando o arquivo base.py, aproveitaremos seu conteúdo — selecionaremos todo o código em seu interior, utilizando "Ctrl + A" para copiá-lo. Voltando ao arquivo bot.py, pressionaremos "Ctrl + C" para colar esses dados.

No topo desse código, temos os imports da anthropic, do dotenv, do os e dos helpers, para acessar os ajudantes.

bot.py:

import anthropic
import dotenv
import os
from helpers import *

Em seguida, criamos a entidade cliente com a chave da Anthropic e selecionamos o modelo 3.5 Sonnet, o mais avançado disponível pela Anthropic até o momento da gravação deste curso.

dotenv.load_dotenv()
cliente = anthropic.Anthropic(
    api_key=os.environ.get("ANTHROPIC_API_KEY"),
)
modelo = "claude-3-5-sonnet-20240620"

Além disso, temos a definição da função, cujo nome substituiremos po bot. Essa função receberá um prompt entre parênteses.

def bot(prompt):
    # Código omitido

Em seu interior, o prompt_do_sistema será utilizado para passar as informações de como o sistema deve operar. Já temos o prompt pronto, que será copiado e colado entre as aspas da f-string, com "Ctrl + C" e "Ctrl + V".

Por fim, aplicamos um "Alt + Z" para quebrar as linhas.

def bot(prompt):
    prompt_do_sistema = f"""
    Você é um chatbot de atendimento a clientes de um aplicativo de entrega para restaurantes, padarias, mercados e farmácias.
    Você não pode e nem deve responder perguntas que não sejam dados do aplicativo informado!
    """
    
    #Código omitido

O prompt informa ao bot seu papel, definindo que ele não pode responder perguntas não relacionadas aos dados do aplicativo informado.

Em seguida, temos o prompt_do_usuario, que será o prompt com a mensagem recebida, que deve ser retornada pelo assistente.

def bot(prompt):
    prompt_do_sistema = f"""
    Você é um chatbot de atendimento a clientes de um aplicativo de entrega para restaurantes, padarias, mercados e farmácias.
    Você não pode e nem deve responder perguntas que não sejam dados do aplicativo informado!
    """
    
    prompt_do_usuario = prompt
    
    #Código omitido

Após isso, temos um try com a tentativa de criar a mensagem e exceções para possíveis erros. Nessa criação, que geralmente é bem-sucedida, utilizamos o modelo 3.5 Sonnet, com um número máximo de tokens de 4 mil e temperatura zero, indicando que a resposta não precisa ser complexa ou diferente. Também informamos o prompt_do_sistema, passado como parâmetro.

No bloco messages, a mensagem é criada com o papel de pessoa usuária (role de user), contendo o texto do prompt_do_usuario.

Após essa mensagem, filtramos a resposta na variável resposta, e extraímos o texto da mensagem, retornando a resposta para o main.

def bot(prompt):
    prompt_do_sistema = f"""
    Você é um chatbot de atendimento a clientes de um aplicativo de entrega para restaurantes, padarias, mercados e farmácias.
    Você não pode e nem deve responder perguntas que não sejam dados do aplicativo informado!
    """
    
    prompt_do_usuario = prompt
    
    try:
        mensagem = cliente.messages.create(
            model=modelo,
            max_tokens=4000,
            temperature=0,
            system=prompt_do_sistema,
            messages=[
                {
                    "role": "user",
                    "content": [
                        {
                            "type": "text",
                            "text": prompt_do_usuario
                        }
                    ]
                }
            ]
        )
        resposta = mensagem.content[0].text
        return resposta
    except anthropic.APIConnectionError as e:
        print("O servidor não pode ser acessado! Erro:", e.__cause__)
    except anthropic.RateLimitError as e:
        print("Um status code 429 foi recebido! Limite de acesso atingido.")
    except anthropic.APIStatusError as e:
        print(f"Um erro {e.status_code} foi recebido. Mais informações: {e.response}")
    except Exception as e:
        print(f"Ocorreu um erro inesperado: {e}")

Importando o bot

Podemos voltar ao arquivo main e importar o bot. No topo do arquivo, abaixo da importação do flask, utilizaremos from bot import bot. Percebemos que os dois bot são destacados em cores diferentes para indicar que são duas coisas distintas: o módulo bot e a função bot importada.

main.py:

from flask import Flask,render_template, request, Response
from bot import bot

Dentro da função chat(), na linha resposta = bot(prompt), ele passará a identificar a resposta do bot. Portanto, podemos executar o projeto, abrindo o terminal com "Ctrl + J" e executando o seguinte comando novamente:

python main.py

Após carregar, voltaremos à aplicação do bot aberta no navegador, reiniciaremos a página e enviaremos uma mensagem de "olá".

Olá

O bot responderá da seguinte forma, identificando o prompt do seu sistema:

Olá! Bem-vindo ao atendimento do nosso aplicativo de entrega. Como posso ajudar você hoje? Estou aqui para responder suas dúvidas sobre pedidos, restaurantes, mercados, padarias ou farmácias disponíveis em nosso app. Em que posso ser útil?

Podemos perguntar, por exemplo:

Me indique um restaurante de comida baiana.

O bot analisará e responderá o seguinte:

Claro, posso ajudar você a encontrar um restaurante de comida baiana no nosso aplicativo. Para fazer isso, você pode seguir estes passos:

  1. Abra o aplicativo de entrega

  2. Na página inicial, selecione a categoria "Restaurantes"

  3. Use a barra de pesquisa e digite "comida baiana" ou "restaurante baiano"

  4. Você verá uma lista de opções de restaurantes que servem comida baiana na sua região

Lembre-se que a disponibilidade de restaurantes pode variar dependendo da sua localização. Se você quiser uma recomendação mais específica, por favor, forneça sua cidade ou bairro, e ficarei feliz em verificar as opções disponíveis para você no aplicativo.

No entanto, essa informação não está completamente correta, pois ele não está acessando dados específicos do aplicativo Sabor Express.

Precisamos voltar ao VS Code.

Fechando o terminal com "Ctrl + J" e acessando o bot no arquivo bot.py, devemos lembrar que o prompt_do_sistema deve ser apropriado e adequado. Precisamos refiná-lo e passar o contexto correto, especificando as informações que o bot pode ou não responder.

Próximos passos

Atualmente, não estamos fornecendo os dados reais do restaurante. Ao verificar o interior a pasta "dados" pelo explorador lateral, encontramos o arquivo SaborExpress.txt, que contém várias informações sobre o Sabor Express, totalizando mais de 200 linhas.

A seguir, refinaremos o prompt, informando esse contexto com os dados do Sabor Express.

Sobre o curso Claude e Python: desenvolva seu Chatbot Inteligente com a IA da Anthropic

O curso Claude e Python: desenvolva seu Chatbot Inteligente com a IA da Anthropic possui 122 minutos de vídeos, em um total de 50 atividades. Gostou? Conheça nossos outros cursos de IA para Programação em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda IA para Programação acessando integralmente esse e outros cursos, comece hoje!

Conheça os Planos para Empresas