building reactjs gen ai apps with amazon bedrock javascript sdk
1.0.0
Dieser Artikel wurde in Colaboration Enrique Rodriguez geschrieben
Machen Sie sich bereit, auf eine aufregende Reise zu beginnen, während wir die Kraft von Amazon -Grundgestein, ReactJs und des AWS JavaScript SDK kombinieren, um eine generative KI -Anwendung mit minimalem Integrationscode zu erstellen.
Die Integration generativer KI in bestehende Anwendungen stellt Herausforderungen dar. Viele Entwickler haben nur begrenzte Erfahrung in den Schulungsstiftungsmodellen, aber Ziel ist es, generative KI -Funktionen mit minimalen Codeänderungen zu integrieren.
Um dies zu lösen, haben wir eine Anwendung erstellt, die die Leistung der generativen KI mit einem Aufruf der Amazon Bedrock -API von einer Webanwendung integriert, ein solches Spa, das mit JavaScript und React Framework erstellt wurde. Ohne Middleware, die die Barriere für die Einbeziehung der KI -Erzeugung durch minimale Codeintegration senkt.
In diesem Tutorial lernen Sie, wie Sie Amazon Cognito -Anmeldeinformationen und IAM -Rollen verwenden, um sicher auf die Amazon -Grundgestein -API in Ihrer ReactJS -Anwendung zuzugreifen, die mit dem Cloudscape -Designsystem erstellt wurde. Wir werden Sie durch den Prozess der Bereitstellung aller erforderlichen Ressourcen und des Hostens der App mithilfe von AWS -Verstärkung, um den Einrichtungs- und Bereitstellungsprozess zu hosten.
Um die Flexibilität und Anpassung des Foundation -Modells (FM) zu verbessern, werden wir demonstrieren, wie unterschiedliche Rollen mithilfe der Systemaufforderung zugewiesen werden. Durch das Erstellen einer Amazon DynamoDB -Tabelle können Sie verschiedene Rollen speichern und abrufen, sodass Sie verschiedene Systemaufforderungen verwalten und zugreifen können, die jeder Rolle zugeordnet sind, die Sie der FM zuweisen möchten. Dieser zentralisierte Repository -Ansatz ermöglicht eine dynamische Rollenzuweisung und maßgeschneiderte KI -Antworten auf der Grundlage der ausgewählten Rolle.
Im Repository dieser Anwendung finden Sie den Code bereit, das Backend und Frontend bereitzustellen.
✅ Backend: Ein Amazon Cognito -Benutzerpool und Identitätspool mit einer AWS -Identitäts- und Zugriffs -Managemen -Rolle (IAM -Rolle), die die Richtlinie mit den Berechtigungen enthält, Amazon -Grundgestein aufzurufen.
{ policyName: "amplify-permissions-custom-resources",
policyDocument: {
Version: "2012-10-17",
Statement: [
{
Resource: "*",
Action: ["bedrock:InvokeModel*", "bedrock:List*", "bedrock:Retrieve*"],
Effect: "Allow",
}
]
}
}
Überprüfen Sie die Authentifizierung und Autorisierung von Amazon Cognito mit Web- und Mobile -Apps ", um AWS -API -Operationen durch Benutzer aufzurufen, die mit Amazon Cognito authentifiziert wurden.
Diese Berechtigungen können hier angepasst werden: IAM Rollencode
✅ Frontend: Ein ReactJS -Einzelseiten -Anwendung (SPA), das mit Cloudscape -Designsystem erstellt wurde.
Diese Anwendung umfasst 4 Demos:
Alle Demos haben gemeinsam die Verwendung des Bedrockruntimeclient oder des BemodrockagentruntimeClient gemeinsam, um das Grundgestein oder das Grundgestein für eine Konversationsinteraktion aufzurufen. Der Bedrog -Crockentclient wird auch verwendet, um aktuelle Grundgestein -Wissensbasen aufzulisten, die im selben Konto eingesetzt werden.
import { BedrockAgentClient } from "@aws-sdk/client-bedrock-agent"
import { BedrockAgentRuntimeClient } from "@aws-sdk/client-bedrock-agent-runtime"Amazon Bedrock ist ein vollständig verwalteter Service, der eine Auswahl an leistungsstarken Fundamentmodellen (FMS) sowie eine breite Anzahl von Funktionen bietet, die Sie zum Erstellen und Skalieren von generativen AI-Anwendungen benötigen.
Um ein FM aufzurufen, müssen Sie die Region, Streaming -Antworten und API -Anmeldeinformationen aus der Benutzerpool -Authentifizierung angeben. Für Modellargumente geben Sie das Modell an, um bis zu 1000 Token getModel probieren und kreativere und generelle Freiheitsfreiheit zu verwenden.
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 ;
} ; So wählen Sie die Modelid -Modelle aus, die Sie zuerst Amazon Bedrock Foundation -Modelle unter Verwendung von ListFoundationModels auf der getFMs -Funktion (LLMLIB.JS) auflisten. Jedes FM hat seine eigene Art, das Modell aufzurufen, und dieser Blog konzentriert sich nur auf die multimodalen Modelle von Anthropic.
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
}Mit diesem Code können Sie zwischen vorbemerktem Claude 3 -Sonett oder Haiku wählen.
Wir werden Sie durch jede Demo -Gruppe führen, um ihre Unterschiede hervorzuheben.
InvoKemodelWitResponStream wird verwendet, um das Amazon -Grundgesteinsmodell aufzurufen, um die Inferenz mithilfe der in der Anforderungskörper bereitgestellten Eingabeaufforderung- und Inferenzparameter auszuführen.
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 ) Im vorherigen Blog haben wir zwei Ansätze zum Aufrufen des Modells verwiesen - eines konzentrierte sich darauf, einfach Fragen zu stellen und Antworten zu erhalten, und ein anderer, um vollständige Gespräche mit dem Modell zu führen. Mit anthropischen Claude 3 wird die Konversation von den Messages -API: messages=[{"role": "user", "content": content}] behandelt.
Jede Eingabenachricht muss ein Objekt mit einer role (Benutzer oder Assistent) und Inhalt sein. Der content kann entweder in einer einzelnen Zeichenfolge oder in einem Array von Inhaltsblöcken sein, wobei jeder Block einen eigenen festgelegten type (Text oder Bild) mit eigenem Typ sein kann.
type den gleichen text ein: {"role": "user", "content": [{"type": "text", "text": "Hello, Claude"}]}
type das gleiche image ein: {"role": "user", "content": [
{
"type": "image",
"source": {
"type": "base64",
"media_type": "image/jpeg",
"data": "/9j/4AAQSkZJRg...",
}
},
{"type": "text", "text": "What is in this image?"}
]}
Dies ist ein Beispiel für einen Körper:
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}
? ️ Anthropic unterstützen derzeit den Basis64 -Quelltyp für Bilder sowie die Medientypen von Image/JPEG, Image/PNG, Image/GIF und Image/WebP. Sie können die Konvertierung von Bildern in Base64 für diese App in
buildContent-Funktion von messageHelpers.js sehen. Weitere Eingabebeispiele finden Sie in Eingangsbeispielen.
Mit der API von Meldungen können wir über eine Systemaufforderung (System) Kontext oder Anweisungen zum Modell hinzufügen.
Durch die Verwendung der Systemaufforderung können wir der FM eine bestimmte Rolle zuweisen oder sie vor dem Fütterung der Eingabe frühere Anweisungen geben. Damit der FM mehrere Rollen übernimmt, haben wir eine React -Komponente erstellt, mit der Sie eine Systemaufforderung erstellen, sie in einer Amazon -DynamoDB -Tabelle speichern und diese dann auswählen möchten, wenn Sie diese bestimmte Rolle dem FM zuweisen möchten.
Alle API -Vorgänge für die Verwaltung von Eingabeaufforderungen werden von einem AWS AppSync GraphQL API -Endpunkt behandelt. Mit AWS AppSync können Sie GraphQL -APIs erstellen und verwalten, die eine flexible und effiziente Möglichkeit bieten, Daten über einen einzelnen Endpunkt aus mehreren Quellen zu holen und zu manipulieren. (AWS AppSync Tutorial: DynamoDB -Resolver)
Lassen Sie uns ein Beispiel für eine Eingabeaufforderung überprüfen, in der wir der FM sagen, dass er ein Experte für JavaScript ist:
Im folgenden GIF liefert das Modell Code und detaillierte Erklärungen wie ein Experte.
In dieser Demo werden Sie an die Wissensbasis für Amazon -Bedrock Fragen stellen, die die Abruf Augmented Generation (RAG) ausnutzen. Sie müssen mindestens eine Wissensbasis erstellen lassen, indem Sie einen Wissensbasishandbuch erstellen.
Fragen zu den Wissensbasis für Amazon -Grundgestein werden auf zwei Arten gestellt:
- Amazon -Grundgestein Retrieve => LLM:
Listen Sie die Wissensbasis mit ListknowledgeBaseScommand wie folgt auf:
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
}Die Amazon KnowledgeBaserErtriever Langchain -Klasse erstellt einen Retriever, ein Objekt, das in der Lage ist, Dokumente ähnlich einer Abfrage aus einer Wissensbasis abzurufen (in diesem Fall ist eine Wissensbasis vom Grundgestein)
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
}Der ConversationalRevalqachain wird mit dem Retriever und dem Gedächtnis instanziiert. Es kümmert sich um den Speicher, fragt den Retriever ab und formuliert die Antwort (mit den Dokumenten) mit der LLM -Instanz.
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
} 
Code Bedrockkbretieve.jsx
- Amazon -Grundgestein Abrufen und generieren:
Hier verwenden Sie einen kompletten AWS -verwalteten Rag -Service. Es besteht keine Notwendigkeit für zusätzliche Pakete (Langchain) oder eine erhöhte Komplexität bei Eingabeaufforderungen. Sie werden nur einen API -Anruf zum BedrockagentRuntimeClient verwenden. Auch der Speicher wird vom Dienst mithilfe einer SitzungsID verwaltet.
Das Bedrock wird mit dem BedrockagentRuntimeClient initialisiert, und mit Abruf und AbrufnegerateCommand erzeugt ein Fundamentmodell Reaktionen, die auf den abgerufenen Ergebnissen basieren. In dieser Demo ist Langchain nicht benötigt.
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
} 
Code BedrockkBandGenerate.jsx
Ein Amazon-Bedrock-Agent ist eine Softwarekomponente, die die KI-Modelle verwendet, die vom Amazon-Bedrock-Dienst bereitgestellt werden, um benutzerbezogene Funktionen wie Chatbots, virtuelle Assistenten oder Tools für Textgenerierung zu liefern. Diese Agenten können angepasst und an die spezifischen Anforderungen jeder Anwendung angepasst werden, wodurch Endbenutzer eine Benutzeroberfläche bereitstellen, um mit den zugrunde liegenden KI-Funktionen zu interagieren. Bedrock -Agenten verarbeiten die Integration in die Sprachmodelle, die Verarbeitung von Benutzereingaben, generieren Antworten und möglicherweise andere Aktionen, die auf der Ausgabe der KI -Modelle basieren.
Um Amazon -Grundgestein -Agenten in diese Anwendung zu integrieren, müssen Sie eine erstellen. Befolgen
In Amazon Bedrock können Sie eine neue Version Ihres Agenten erstellen, indem Sie einen Alias erstellen, der standardmäßig auf die neue Version hinweist. Aliase sind mit ListAGentalIasSecommand (LLMLIB.JS) aufgeführt:
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
}Sendet eine Aufforderung an, dass der Agent die Verwendung von InvokeAgentCommand verarbeitet und reagiert
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
}Erstellen Sie im Agenten dieses ersten GIF ein Ticket für den technischen Support:
Im zweiten GIF fragt der Benutzer den Agenten nach dem Status des Tickets:
Die Anwendung ist mit AWS -Verstärkung erstellt. Um es in Ihrem Konto bereitzustellen:
https://github.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/forks
Erstellen Sie eine neue Niederlassung: dev-branch .
Befolgen Sie dann die Schritte, um mit dem vorhandenen Codehandbuch zu beginnen.
Wählen Sie in Schritt 1 einen Repository -Zweig hinzu , wählen Sie den Hauptzweig und verbinden Sie einen Monorepo? Wählen Sie einen Ordner aus und geben Sie reactjs-gen-ai-apps als Stammverzeichnis ein.
dev Sie für den nächsten Schritt Einstellungen auf , wählen Sie building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app) als App-Name, in Enviroment Wählen 
Wenn keine Rolle vorhanden ist, erstellen Sie eine neue, um zu steigern.
Stellen Sie Ihre App bereit.
Sobald die Anwendung bereitgestellt wurde, gehen Sie zum Link in der Anwendung, die sich unter der weißen Box befindet.
Wenn Sie den Link eingeben, wird das Singen im Fenster angezeigt, sodass Sie einen Amazon Cognito -Benutzerpool -Benutzer erstellen müssen.
Gehen Sie in der App zu Backend -Umgebungen und klicken Sie auf Authentifizierung.
Klicken Sie dann unter Authentifizierung in Cognito auf die Anzeige an:
Klicken Sie im Benutzerpool auf den Namen Ihres Benutzerpools und erstellen Sie Benutzer .
Erstellen Sie Ihren Benutzer und singen Sie dann ein.
HINWEIS: Sie können den Benutzer direkt aus der Anwendung erstellen, indem Sie false
hideSignUp: falsein app.jsx ändern. Dies kann jedoch einen Sicherheitsfehler einführen, indem Sie jedem Zugriff darauf geben.
Bevor Sie ein Foundation -Modell im Amazon -Grundgestein verwenden können, müssen Sie den Zugriff darauf anfordern. Folgen Sie dem Schritt in den Hinzufügen von Modellzugriffshandbuch.
Gehen Sie zum Anwendungslink und melden Sie sich mit dem von Ihnen erstellten Benutzer an.
In diesem Beitrag haben wir gezeigt, wie Sie eine React -Webanwendung erstellen können, die mithilfe von Amazon Cognito direkt auf die Amazon -Grundgestein -API zugreift, um eine sichere Authentifizierung zu erhalten. Durch die Nutzung von AWS -verwalteten Diensten wie Cognito und IAM können Sie leistungsstarke generative KI -Funktionen nahtlos in Ihre JavaScript -Anwendungen integrieren, ohne dass Backend -Code erforderlich ist.
Dieser Ansatz ermöglicht es Entwicklern, sich darauf zu konzentrieren, ansprechende Konversationserlebnisse zu schaffen und gleichzeitig den Managed Knowledge Service von Amazon Bedrock zu nutzen. Die Streaming -Antworten verbessern die Benutzererfahrung, indem die Wartezeiten verkürzt und mehr natürliche Interaktionen mit der Konversations -KI ermöglicht werden.
Darüber hinaus haben wir gezeigt, wie Sie dem Foundation -Modell mithilfe von Systemaufforderungen, die in einer Amazon -Dynamodb -Tabelle gespeichert sind, mehrere Rollen zuweisen können. Dieses zentralisierte Repository bietet Flexibilität und Vielseitigkeit, mit der Sie dem Modell basierend auf Ihrem spezifischen Anwendungsfall effizient abrufen und zuweisen können.
Wenn Sie die in diesem Beitrag beschriebenen Schritte befolgen, können Sie das Potenzial der generativen KI in Ihren React -Anwendungen freischalten. Egal, ob Sie eine neue App von Grund auf neu erstellen oder eine vorhandene verbessern, das Amazon-Grundgestein und das AWS JavaScript SDK erleichtern es, modernste KI-Funktionen zu integrieren.
Wir empfehlen Ihnen, die Code -Beispiele und -Ressourcen zu erkunden, um Ihre eigenen generativen AI -Anwendungen zu erstellen. Wenn Sie Fragen oder Feedback haben, hinterlassen Sie unten einen Kommentar. Happy Coding!
Weitere Informationen finden Sie unter Beitrag.
Diese Bibliothek ist im Rahmen der MIT-0-Lizenz lizenziert. Siehe die Lizenzdatei.
