building reactjs gen ai apps with amazon bedrock javascript sdk
1.0.0
Este artigo foi escrito na colaboração Enrique Rodriguez
Prepare -se para embarcar em uma jornada emocionante enquanto combinamos o poder da Amazon Bedrock, ReactJs e o AWS JavaScript SDK para criar um aplicativo generativo de IA com código de integração mínimo.
A integração da IA generativa nos aplicativos existentes apresenta desafios. Muitos desenvolvedores têm experiência limitada em modelos de treinamento de fundações, mas o objetivo é integrar recursos generativos de IA com alterações mínimas de código.
Para resolver isso, criamos um aplicativo que integra o poder da IA generativa com uma chamada para a API da Amazon Bedrock a partir de um aplicativo da Web, esse spa construído com a estrutura JavaScript e React. Sem middleware, diminuindo a barreira para incorporar a geração de IA através da integração mínima de código.
Ao longo deste tutorial, você aprenderá como utilizar as credenciais e funções de IAM da Amazon Cognito para acessar com segurança a API da Amazon Bedrock no seu aplicativo Reactjs criado com o sistema de design de cloudscape. Vamos guiá -lo através do processo de implantação de todos os recursos necessários e hospedar o aplicativo usando o AWS Amplify, simplificando o processo de configuração e implantação.
Para aprimorar a flexibilidade e a personalização do Modelo de Fundação (FM), demonstraremos como atribuir diferentes funções usando o prompt do sistema. Ao criar uma tabela do Amazon DynamoDB, você pode armazenar e recuperar várias funções, permitindo gerenciar e acessar prompts de sistema distintos associados a cada função que você deseja atribuir à FM. Essa abordagem do repositório centralizado permite a atribuição dinâmica de função e as respostas de IA adaptadas com base na função selecionada.
No repositório deste aplicativo, você encontrará o código pronto para implantar o back -end e o front -end.
✅ Back -end: um pool de usuários e um pool de identidade da Amazon Cognito, com uma função de identidade e gerenciamento de acesso da AWS (função do IAM) que contém a política com as permissões para invocar a Amazon Bedrock.
{ policyName: "amplify-permissions-custom-resources",
policyDocument: {
Version: "2012-10-17",
Statement: [
{
Resource: "*",
Action: ["bedrock:InvokeModel*", "bedrock:List*", "bedrock:Retrieve*"],
Effect: "Allow",
}
]
}
}
Verifique o guia Amazon Cognito Authentication and Authentication com aplicativos da Web e móveis "para invocar as operações da API da AWS por usuários autenticados com o Amazon Cognito.
Essas permissões podem ser personalizadas aqui: código de função do IAM
✅ Frontend: um aplicativo de página única ReactJS (SPA) criada com o sistema de design de cloudscape.
Este aplicativo compreende 4 demos:
Todas as demos têm em comum o uso do BedrockRuntimeclient ou BedrockagentRuntimeclient para invocar a rocha ou serviço de rochagente para uma interação conversacional. O BedrockAgentClient também é usado para listar as bases de conhecimento atuais do Bedrock implantadas na mesma conta.
import { BedrockAgentClient } from "@aws-sdk/client-bedrock-agent"
import { BedrockAgentRuntimeClient } from "@aws-sdk/client-bedrock-agent-runtime"A Amazon Bedrock é um serviço totalmente gerenciado que oferece uma opção de modelos de fundação de alto desempenho (FMS), juntamente com um amplo conjunto de recursos necessários para criar e escalar aplicativos generativos de IA.
Para invocar um FM, você precisa especificar a região, transmitir respostas e credenciais da API da autenticação do pool de usuários. Para argumentos modelo, você especifica o modelo para provar até 1000 tokens e, para mais criativo e liberdade de geração, use uma temperatura de 1. Fazemos isso com a função getModel de llmlib.js
export const getModel = async ( modelId = "anthropic.claude-instant-v1" ) => {
const session = await fetchAuthSession ( ) ; //Amplify helper to fetch current logged in user
let region = session . identityId . split ( ":" ) [ 0 ] //
const model = new Bedrock ( {
model : modelId , // model-id you can try others if you want
region : region , // app region
streaming : true , // this enables to get the response in streaming manner
credentials : session . credentials , // the user credentials that allows to invoke bedrock service
// try to limit to 1000 tokens for generation
// temperature = 1 means more creative and freedom
modelKwargs : { max_tokens_to_sample : 1000 , temperature : 1 } ,
} ) ;
return model ;
} ; Para selecionar o ModelID primeiro, você liste os modelos de fundação da Amazon Bedrock usando o ListFoundationModels na função getFMs (llmlib.js). Cada FM tem sua própria maneira de invocar o modelo, e este blog está se concentrando apenas nos modelos multimodais de antropia.
export const getFMs = async ( ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockClient ( { region : region , credentials : session . credentials } )
const input = { byProvider : "Anthropic" , byOutputModality : "TEXT" , byInferenceType : "ON_DEMAND" }
const command = new ListFoundationModelsCommand ( input )
const response = await client . send ( command )
return response . modelSummaries
}Este código permite que você escolha entre Claude Antópico 3 sonetos ou Haiku.
Vamos orientá -lo em cada grupo de demonstração para destacar suas diferenças.
InvokemodelWithResponsEstream é usado para invocar o modelo Amazon Bedrock para executar a inferência usando os parâmetros de prompt e inferência fornecidos no corpo da solicitação.
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockRuntimeClient ( { region : region , credentials : session . credentials } )
const input = {
body : JSON . stringify ( body ) ,
contentType : "application/json" ,
accept : "application/json" ,
modelId : modelId
}
const command = new InvokeModelWithResponseStreamCommand ( input )
const response = await client . send ( command ) No blog anterior, referenciamos duas abordagens para invocar o modelo - uma focada em simplesmente fazer perguntas e receber respostas e outra por participar de conversas completas com o modelo. Com Claude Antrópico 3, a conversa é tratada pela API das mensagens: messages=[{"role": "user", "content": content}] .
Cada mensagem de entrada deve ser um objeto com uma role (usuário ou assistente) e conteúdo. O content pode estar em uma única sequência ou em uma matriz de blocos de conteúdo, cada bloco com seu próprio type designado (texto ou imagem).
type text igual: {"role": "user", "content": [{"type": "text", "text": "Hello, Claude"}]}
type image igual: {"role": "user", "content": [
{
"type": "image",
"source": {
"type": "base64",
"media_type": "image/jpeg",
"data": "/9j/4AAQSkZJRg...",
}
},
{"type": "text", "text": "What is in this image?"}
]}
Este é um exemplo de corpo:
content = [
{"type": "image", "source": {"type": "base64",
"media_type": "image/jpeg", "data": content_image}},
{"type":"text","text":text}
]
body = {
"system": "You are an AI Assistant, always reply in the original user text language.",
"messages":content,"anthropic_version": anthropic_version,"max_tokens":max_tokens}
Atualmente, o Antrópico suporta o tipo de origem Base64 para imagens e os tipos de mídia de imagem/jpeg, imagem/png, imagem/gif e imagem/webp. Você pode ver a conversão de imagens em base64 para este aplicativo na função
buildContentde MessageHelpers.js. Veja mais exemplos de entrada.
A API de mensagens nos permite adicionar contexto ou instruções ao modelo através de um prompt do sistema (sistema).
Ao utilizar o prompt do sistema, podemos atribuir à FM uma função específica ou fornecer instruções anteriores antes de alimentá -lo a entrada. Para permitir que o FM assuma várias funções, criamos um componente React que permite gerar um prompt do sistema, armazená -lo em uma tabela Amazon DynamoDB e, em seguida, selecione -a quando deseja atribuir essa função específica à FM.
Todas as operações da API para gerenciamento de instruções são tratadas por um ponto de extremidade da API APPSYNC APPSYNC APPSYNC. O AWS AppSync permite criar e gerenciar APIs GraphQL, que fornecem uma maneira flexível e eficiente de buscar e manipular dados de várias fontes através de um único terminal. (AWS AppSync Tutorial: DynamoDB Resolvers)
Vamos revisar um exemplo de um aviso em que dizemos à FM que ele é um especialista em JavaScript:
No GIF a seguir, o modelo fornece código e explicação detalhada, como um especialista.
Nesta demonstração, você fará perguntas às bases de conhecimento para a Amazon Bedrock aproveitando a geração aumentada de recuperação (RAG). Você deve ter pelo menos uma base de conhecimento criada, faça -o seguindo um guia da base de conhecimento.
Perguntas para as bases de conhecimento para a Amazon Bedrock serão feitas de duas maneiras:
- Amazon Bedrock Retrie => LLM:
Liste as bases de conhecimento com ListknowledgeBasesceMmand da seguinte maneira:
import { ListKnowledgeBasesCommand } from "@aws-sdk/client-bedrock-agent"
export const getBedrockKnowledgeBases = async ( ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockAgentClient ( { region : region , credentials : session . credentials } )
const command = new ListKnowledgeBasesCommand ( { } )
const response = await client . send ( command )
return response . knowledgeBaseSummaries
}A classe AmazonKnowledgeBaseRetriever Langchain cria um retriever, um objeto capaz de recuperar documentos semelhantes a uma consulta de uma base de conhecimento (neste caso, é uma base de conhecimento da Bedrock)
import { AmazonKnowledgeBaseRetriever } from "@langchain/community/retrievers/amazon_knowledge_base" ;
export const getBedrockKnowledgeBaseRetriever = async ( knowledgeBaseId ) => {
const session = await fetchAuthSession ( ) ;
let region = session . identityId . split ( ":" ) [ 0 ]
const retriever = new AmazonKnowledgeBaseRetriever ( {
topK : 10 , // return top 10 documents
knowledgeBaseId : knowledgeBaseId ,
region : region ,
clientOptions : { credentials : session . credentials }
} )
return retriever
}O conversacional -retrievalqachain é instanciado com o retriever e a memória. Ele cuida da memória, consulte o retriever e formule a resposta (com os documentos) usando a instância LLM.
import { ConversationalRetrievalQAChain } from "langchain/chains" ;
export const getConversationalRetrievalQAChain = async ( llm , retriever , memory ) => {
const chain = ConversationalRetrievalQAChain . fromLLM (
llm , retriever = retriever )
chain . memory = memory
//Here you modify the default prompt to add the Human prefix and Assistant suffix needed by Claude.
//otherwise you get an exception
//this is the prompt that uses chat history and last question to formulate a complete standalone question
chain . questionGeneratorChain . prompt . template = "Human: " + chain . questionGeneratorChain . prompt . template + "nAssistant:"
// Here you finally answer the question using the retrieved documents.
chain . combineDocumentsChain . llmChain . prompt . template = `Human: Use the following pieces of context to answer the question at the end. If you don't know the answer, just say that you don't know, don't try to make up an answer.
{context}
Question: {question}
Helpful Answer:
Assistant:`
return chain
} 
Código BedrockkBrerieve.jsx
- Amazon Bedrock Retrie & Gereate:
Aqui você usará um serviço completo de RAG gerenciado da AWS. Não há necessidade de pacotes extras (Langchain) ou aumento da complexidade com os avisos. Você usará apenas uma chamada de API para BedrockagentRuntImeclient . Além disso, a memória é gerenciada pelo serviço usando um SessionID .
O Bedrock é inicializado com o BedrockagentRuntImeclient e com o RectueAndEArDGeneratCommand consulta uma base de conhecimento e um modelo de fundação gera respostas com base nos resultados recuperados. Nesta demonstração, Langchain não é necessário.
import { BedrockAgentRuntimeClient , RetrieveAndGenerateCommand } from "@aws-sdk/client-bedrock-agent-runtime"
export const ragBedrockKnowledgeBase = async ( sessionId , knowledgeBaseId , query , modelId = "anthropic.claude-instant-v1" ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockAgentRuntimeClient ( { region : region , credentials : session . credentials } ) ;
const input = {
input : { text : query } , // user question
retrieveAndGenerateConfiguration : {
type : "KNOWLEDGE_BASE" ,
knowledgeBaseConfiguration : {
knowledgeBaseId : knowledgeBaseId ,
//your existing KnowledgeBase in the same region/ account
// Arn of a Bedrock model, in this case we jump to claude 2.1, the latest. Feel free to use another
modelArn : `arn:aws:bedrock: ${ region } ::foundation-model/ ${ modelId } ` , // Arn of a Bedrock model
} ,
}
}
if ( sessionId ) {
// you can pass the sessionId to continue a dialog.
input . sessionId = sessionId
}
const command = new RetrieveAndGenerateCommand ( input ) ;
const response = await client . send ( command )
return response
} 
Código BedrockkbandGeReRe.jsx
Um agente da Amazon Bedrock é um componente de software que utiliza os modelos de IA fornecidos pelo Amazon Bedrock Service para fornecer funcionalidades voltadas para o usuário, como chatbots, assistentes virtuais ou ferramentas de geração de texto. Esses agentes podem ser personalizados e adaptados às necessidades específicas de cada aplicativo, fornecendo uma interface de usuário para os usuários finais interagirem com os recursos de IA subjacentes. Os agentes do Bedrock lidam com a integração com os modelos de idiomas, processando entradas do usuário, gerando respostas e potencialmente outras ações com base na saída dos modelos de IA.
Para integrar os agentes da Amazon Bedrock neste aplicativo, você deve criar um, siga as etapas, crie um agente na Amazon Bedrock
Na Amazon Bedrock, você pode criar uma nova versão do seu agente, criando um pseudônimo que aponta para a nova versão por padrão, os aliases são listados com listagentaliasescmand (llmlib.js):
import { BedrockAgentClient , ListAgentAliasesCommand } from "@aws-sdk/client-bedrock-agent" ;
const client = new BedrockAgentRuntimeClient ( { region : region , credentials : session . credentials } )
export const getBedrockAgentAliases = async ( client , agent ) => {
const agentCommand = new ListAgentAliasesCommand ( { agentId : agent . agentId } )
const response = await client . send ( agentCommand )
return response . agentAliasSummaries
}Para enviar um prompt para o agente processar e responder, use InvokeAgentCommand
import { BedrockAgentRuntimeClient , InvokeAgentCommand } from "@aws-sdk/client-bedrock-agent-runtime" ;
export const invokeBedrockAgent = async ( sessionId , agentId , agentAlias , query ) => {
const session = await fetchAuthSession ( )
let region = session . identityId . split ( ":" ) [ 0 ]
const client = new BedrockAgentRuntimeClient ( { region : region , credentials : session . credentials } )
const input = {
sessionId : sessionId ,
agentId : agentId ,
agentAliasId : agentAlias ,
inputText : query
}
console . log ( input )
const command = new InvokeAgentCommand ( input )
const response = await client . send ( command , )
console . log ( "response:" , response )
let completion = ""
let decoder = new TextDecoder ( "utf-8" )
for await ( const chunk of response . completion ) {
console . log ( "chunk:" , chunk )
const text = decoder . decode ( chunk . chunk . bytes )
completion += text
console . log ( text )
}
return completion
}No agente deste primeiro GIF, crie um ingresso para suporte técnico:
No segundo GIF, o usuário pergunta ao agente sobre o status do ticket:
O aplicativo é criado com o AWS amplify. Para implantá -lo em sua conta:
https://github.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/forks
Crie um novo ramo: dev-branch .
Em seguida, siga as etapas para começar o guia de código existente.
Na etapa 1 Adicionar ramificação do repositório , selecione ramificação principal e conectar um monorepo? Escolha uma pasta e insira reactjs-gen-ai-apps como um diretório raiz.
building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app) como nome do aplicativo, no Enviroment Select Create A Now Envitoment e Write dev 
Se não houver função existente, crie um novo para atender amplificar.
Implante seu aplicativo.
Depois que o aplicativo for implantado, vá para o link no aplicativo, localizado sob a caixa branca.
Quando você insere o link, o canto na janela aparecerá, então você deve criar um usuário do Amazon Cognito User Pool.
No aplicativo, vá para ambientes de back -end e clique em autenticação.
Em seguida, sob autenticação, clique em Visualizar no Cognito :
No pool de usuários , clique no nome do seu pool de usuários e crie o usuário .
Crie seu usuário e depois cante.
NOTA: Você pode criar o usuário diretamente a partir do aplicativo alterando o False
hideSignUp: falseno app.jsx, mas isso pode introduzir uma falha de segurança, dando a qualquer pessoa acesso a ele.
Antes de usar um modelo de fundação no Amazon Bedrock, você deve solicitar acesso a ele. Siga a etapa em Adicionar Guia de Acesso ao Modelo.
Vá para o link do aplicativo e faça login com o usuário que você criou.
Nesta postagem, demonstramos como você pode criar um aplicativo da Web React que acessa diretamente a API da Amazon Bedrock usando o Amazon Cognito para obter autenticação segura. Ao alavancar serviços gerenciados da AWS como Cognito e IAM, você pode integrar perfeitamente os poderosos recursos generativos de IA em seus aplicativos JavaScript sem a necessidade de código de back -end.
Essa abordagem permite que os desenvolvedores se concentrem na criação de experiências de conversação envolventes e aproveitem o serviço de conhecimento gerenciado da Amazon Bedrock. As respostas de streaming aprimoram a experiência do usuário, reduzindo os tempos de espera e permitindo mais interações naturais com a IA conversacional.
Além disso, mostramos como você pode atribuir várias funções ao modelo de fundação usando os prompts do sistema armazenados em uma tabela Amazon DynamoDB. Este repositório centralizado fornece flexibilidade e versatilidade, permitindo que você recupere e atribua e com eficiência funções distintas ao modelo com base no seu caso de uso específico.
Seguindo as etapas descritas nesta postagem, você pode desbloquear o potencial de IA generativa em seus aplicativos React. Esteja você construindo um novo aplicativo a partir do zero ou aprimorando um existente, o Amazon Bedrock e o AWS JavaScript SDK facilitam o que nunca incorporar os recursos de IA de ponta.
Incentivamos você a explorar as amostras de código e os recursos fornecidos para começar a criar seus próprios aplicativos de IA generativos. Se você tiver alguma dúvida ou feedback, deixe um comentário abaixo. Codificação feliz!
Consulte contribuindo para mais informações.
Esta biblioteca está licenciada sob a licença MIT-0. Veja o arquivo de licença.
