building reactjs gen ai apps with amazon bedrock javascript sdk
1.0.0
이 기사는 공동 작업 Enrique Rodriguez로 작성되었습니다
Amazon Bedrock, Reactjs 및 AWS JavaScript SDK의 힘을 결합하여 최소한의 통합 코드를 사용하여 생성 AI 응용 프로그램을 생성하면서 흥미 진진한 여행을 시작하십시오.
생성 AI를 기존 응용 프로그램에 통합하면 문제가 발생합니다. 많은 개발자들은 교육 기초 모델에서 경험이 제한되어 있지만 목표는 생성 AI 기능을 최소한의 코드 변경으로 통합하는 것입니다.
이를 해결하기 위해 생성 AI의 전력을 JavaScript 및 React Framework로 구축 한 웹 애플리케이션에서 Amazon Bedrock API를 호출하는 응용 프로그램을 만들었습니다. 미들웨어가 없으면 최소한의 코드 통합을 통해 AI 생성을 통합하기위한 장벽을 낮추십시오.
이 튜토리얼 전체에서 Cloudscape 설계 시스템으로 구축 된 Reactjs 응용 프로그램 내에서 Amazon Cognito 자격 증명 및 IAM 역할을 활용하는 방법을 배우십시오. 필요한 모든 리소스를 배포하고 AWS Amplify를 사용하여 앱을 호스팅하여 설정 및 배포 프로세스를 간소화하는 프로세스를 안내합니다.
FM (Foundation Model)의 유연성과 사용자 정의를 향상시키기 위해 시스템 프롬프트를 사용하여 다른 역할을 할당하는 방법을 보여줍니다. Amazon DynamoDB 테이블을 만들면 다양한 역할을 저장하고 검색하여 FM에 할당하려는 각 역할과 관련된 고유 한 시스템 프롬프트를 관리하고 액세스 할 수 있습니다. 이 중앙 집중식 리포지토리 접근법은 선택된 역할에 기초하여 동적 역할 할당 및 맞춤형 AI 응답을 허용합니다.
이 응용 프로그램의 저장소에서 코드는 백엔드 및 프론트 엔드를 배포 할 준비가되어 있습니다.
backend : Amazon Bedrock을 호출 할 권한이있는 AWS ID 및 Access Managemen 역할 (IAM Role)이 포함 된 Amazon Cognito 사용자 풀 및 Identity Pool.
{ policyName: "amplify-permissions-custom-resources",
policyDocument: {
Version: "2012-10-17",
Statement: [
{
Resource: "*",
Action: ["bedrock:InvokeModel*", "bedrock:List*", "bedrock:Retrieve*"],
Effect: "Allow",
}
]
}
}
Amazon Cognito를 인증 한 사용자가 AWS API 작업을 호출하기위한 "웹 및 모바일 앱과 Amazon Cognito 인증 및 권한 부여 통합"가이드를 확인하십시오.
이 권한은 여기에서 사용자 정의 할 수 있습니다 : iam 역할 코드
Prontend : Cloudscape 디자인 시스템으로 구축 된 Reactjs 단일 페이지 응용 프로그램 (SPA).
이 응용 프로그램은 4 개의 데모로 구성됩니다.
모든 데모는 공통적으로 Bedrockruntimeclient 또는 BedrockagentRuntimeclient의 사용을 사용하여 대화 상호 작용을 위해 기반암 또는 Bedrockagent 서비스를 호출합니다. BedrockagentClient는 또한 동일한 계정에 배포 된 현재 기반암 지식베이스를 나열하는 데 사용됩니다.
import { BedrockAgentClient } from "@aws-sdk/client-bedrock-agent"
import { BedrockAgentRuntimeClient } from "@aws-sdk/client-bedrock-agent-runtime"Amazon Bedrock은 생성 AI 애플리케이션을 구축하고 스케일링하는 데 필요한 광범위한 기능 세트와 함께 고성능 파운데이션 모델 (FMS)을 선택하는 완전 관리 서비스입니다.
FM을 호출하려면 사용자 풀 인증에서 영역, 스트리밍 응답 및 API 자격 증명을 지정해야합니다. 모델 인수의 경우 최대 1000 개의 토큰을 샘플링하고 더 창의적이고 자유의 자유를 위해 1의 온도를 사용하도록 모델을 지정합니다. 우리는 llmlib.js의 getModel 기능으로 수행합니다.
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 ;
} ; 먼저 modelid를 선택하려면 getFMs 함수 (llmlib.js)에서 ListFoundationModels를 사용하여 Amazon Bedrock Foundation 모델을 나열하십시오. 각 FM에는 고유 한 모델을 호출하는 방법이 있으며이 블로그에는 인류의 멀티 모드 모델에만 초점을 맞추고 있습니다.
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
}이 코드를 사용하면 Antropic Claude 3 Sonnet 또는 Haiku 중에서 선택할 수 있습니다.
우리는 그들의 차이점을 강조하기 위해 각 데모 그룹을 안내합니다.
invokemodelwithResponsEStream은 Amazon Bedrock 모델을 호출하여 요청 본문에 제공된 프롬프트 및 추론 매개 변수를 사용하여 추론을 실행하는 데 사용됩니다.
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 ) 이전 블로그에서 우리는 모델을 호출하기위한 두 가지 접근법을 참조했습니다. 하나는 단순히 질문을하고 답변을받는 데 중점을 두었고, 다른 하나는 모델과의 전체 대화에 참여하는 데 중점을 두었습니다. Anthropic Claude 3을 사용하면 대화는 메시지 API에 의해 처리됩니다 : messages=[{"role": "user", "content": content}] .
각 입력 메시지는 role (사용자 또는 비서) 및 내용을 가진 객체 여야합니다. content 단일 문자열 또는 컨텐츠 블록 배열 일 수 있으며 각 블록은 자체 지정 type (텍스트 또는 이미지)을 갖습니다.
text type : {"role": "user", "content": [{"type": "text", "text": "Hello, Claude"}]}
image type : {"role": "user", "content": [
{
"type": "image",
"source": {
"type": "base64",
"media_type": "image/jpeg",
"data": "/9j/4AAQSkZJRg...",
}
},
{"type": "text", "text": "What is in this image?"}
]}
이것은 신체의 예입니다.
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은 현재 이미지의 Base64 소스 유형과 이미지/jpeg, Image/PNG, Image/GIF 및 Image/Webp Media 유형을 지원합니다. MessageHelpers.js의
buildContent기능 에서이 앱에 대해 이미지를 Base64로 변환하는 것을 볼 수 있습니다. 더 많은 입력 예를 참조하십시오.
API 메시지를 사용하면 시스템 프롬프트 (시스템)를 통해 모델에 컨텍스트 또는 지침을 추가 할 수 있습니다.
시스템 프롬프트를 사용하여 FM에 특정 역할을 할당하거나 입력을 공급하기 전에 사전 지침을 제공 할 수 있습니다. FM이 여러 역할을 수행 할 수 있도록 시스템 프롬프트를 생성하고 Amazon DynamoDB 테이블에 저장 한 다음 특정 역할을 FM에 할당하려면 선택할 수있는 React 구성 요소를 만들었습니다.
프롬프트 관리를위한 모든 API 작업은 AWS AppSync GraphQL API 엔드 포인트로 처리됩니다. AWS AppSync를 사용하면 GraphQL API를 만들고 관리 할 수 있으며, 이는 단일 엔드 포인트를 통해 여러 소스에서 데이터를 가져오고 조작하는 유연하고 효율적인 방법을 제공합니다. (AWS AppSync 자습서 : DynamoDB Resolvers)
FM에 JavaScript 전문가임을 알려주는 프롬프트의 예를 검토합시다.
다음 GIF 에서이 모델은 전문가와 같은 코드와 자세한 설명을 제공합니다.
이 데모에서는 Amazon Bedrock의 지식 기반에 대한 질문을하여 검색 증강 생성 (RAG)을 활용합니다. 지식 기반을 작성하여 지식 기반을 작성하여 하나 이상의 지식 기반을 만들어야합니다.
Amazon Bedrock의 지식 기반에 대한 질문은 두 가지 방법으로 요청됩니다.
-Amazon 기반암 검색 => llm :
ListKnowledgebaseScommand가있는 지식 기반을 다음과 같이 나열하십시오.
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
}AmazonKnowledgebaseretriever Langchain 클래스는 지식 기반에서 쿼리와 유사한 문서를 검색 할 수있는 객체 인 리트리버를 만듭니다 (이 경우 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
}대화식 레리 레비 알키 카인은 리트리버와 메모리와 인스턴스화됩니다. 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
} 
Code BedrockkBretrieve.jsx
- 아마존 기반암 검색 및 생성 :
여기에서는 완전한 AWS 관리 래그 서비스를 사용합니다. 추가 패키지 (Langchain) 또는 프롬프트와의 복잡성 증가가 필요하지 않습니다. BedrockagentRuntimeclient 에 하나의 API 호출 만 사용합니다. 또한 메모리는 SessionID를 사용하여 서비스에 의해 관리됩니다.
Bedrock은 BedrockagentRuntimeclient로 초기화되며 RetrieveandgenerateCommand Queries 지식 기반을 쿼리하고 기초 모델은 검색된 결과를 기반으로 응답을 생성합니다. 이 데모에서 Langchain은 필요하지 않습니다.
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
Amazon Bedrock 에이전트는 Amazon Bedrock 서비스에서 제공하는 AI 모델을 사용하여 챗봇, 가상 어시스턴트 또는 텍스트 생성 도구와 같은 사용자 직면 기능을 제공하는 소프트웨어 구성 요소입니다. 이러한 에이전트는 각 애플리케이션의 특정 요구에 맞게 사용자 정의되고 조정되어 최종 사용자가 기본 AI 기능과 상호 작용할 수있는 사용자 인터페이스를 제공 할 수 있습니다. Bedrock 에이전트는 언어 모델과의 통합, 사용자 입력 처리, 응답 생성 및 AI 모델의 출력을 기반으로 잠재적으로 다른 작업을 처리합니다.
Amazon Bedrock 에이전트를이 애플리케이션에 통합하려면 하나를 작성하고 Amazon Bedrock에서 에이전트 작성 단계를 따라야합니다.
Amazon Bedrock에서는 기본적으로 새 버전을 가리키는 별칭을 만들어 새 버전의 에이전트를 만들 수 있습니다. 별명은 listagentalIasescommand (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
}에이전트가 처리하고 응답 할 프롬프트를 보냅니다.
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
}이 첫 번째 GIF의 에이전트에서 기술 지원 티켓을 만듭니다.
두 번째 GIF에서 사용자는 에이전트에게 티켓 상태에 대해 묻습니다.
응용 프로그램은 AWS Amplify로 구축됩니다. 계정에 배치하려면 :
https://github.com/build-on-aws/building-reactjs-gen-ai-apps-with-amazon-bedrock-javascript-sdk/forks
새 지점을 만듭니다 : dev-branch .
그런 다음 기존 코드 안내서를 시작하는 단계를 따르십시오.
단계 1에서 저장소 분기를 추가하고 메인 브랜치를 선택하고 Monorepo를 연결 하시겠습니까? 폴더를 선택 하고 루트 디렉토리로 reactjs-gen-ai-apps 입력하십시오.
building-a-gen-ai-gen-ai-personal-assistant-reactjs-apps(this app) dev 하십시오. 
기존의 역할이 없으면 서비스를 제공 할 새로운 역할을 작성하십시오.
앱을 배포하십시오.
응용 프로그램이 배포되면 화이트 박스 아래에있는 응용 프로그램의 링크로 이동하십시오.
링크를 입력하면 노래의 노래가 나타나므로 Amazon Cognito 사용자 풀 사용자를 만들어야합니다.
앱에서 백엔드 환경 으로 이동하여 인증을 클릭하십시오.
그런 다음 인증에서 Cognito에서보기를 클릭하십시오.
사용자 풀 에서 사용자 풀의 이름을 클릭하고 사용자를 만듭니다 .
사용자를 만들고 노래하십시오.
참고 : App.jsx에서 False
hideSignUp: false변경하여 응용 프로그램에서 직접 사용자를 생성 할 수 있지만, 누구나 액세스 할 수있게하여 보안 결함이 발생할 수 있습니다.
Amazon Bedrock에서 기초 모델을 사용하기 전에 액세스 권한을 요청해야합니다. 추가 모델 액세스 가이드의 단계를 따르십시오.
응용 프로그램 링크로 이동하여 생성 한 사용자와 로그인하십시오.
이 게시물에서는 보안 인증을 위해 Amazon Cognito를 사용하여 Amazon Bedrock API에 직접 액세스하는 React 웹 응용 프로그램을 구축하는 방법을 보여주었습니다. Cognito 및 IAM과 같은 AWS 관리 서비스를 활용하면 백엔드 코드가 필요하지 않고 강력한 생성 AI 기능을 JavaScript 응용 프로그램에 원활하게 통합 할 수 있습니다.
이 접근 방식을 통해 개발자는 Amazon Bedrock의 관리 지식 서비스를 활용하면서 매력적인 대화 경험을 창출하는 데 집중할 수 있습니다. 스트리밍 응답은 대기 시간을 줄이고 대화식 AI와보다 자연스러운 상호 작용을 가능하게하여 사용자 경험을 향상시킵니다.
또한 Amazon DynamoDB 테이블에 저장된 시스템 프롬프트를 사용하여 기초 모델에 여러 역할을 할당하는 방법을 보여주었습니다. 이 중앙 저장소는 유연성과 다양성을 제공하여 특정 사용 사례를 기반으로 모델에 효율적으로 다른 역할을 검색하고 할당 할 수 있습니다.
이 게시물에 요약 된 단계를 따르면 React 응용 프로그램에서 생성 AI의 잠재력을 잠금 해제 할 수 있습니다. 처음부터 새로운 앱을 구축하든 기존 앱을 향상 시키든 Amazon Bedrock 및 AWS JavaScript SDK를 사용하면 최첨단 AI 기능을 쉽게 통합 할 수 있습니다.
자체 생성 AI 응용 프로그램을 구축하기 위해 제공된 코드 샘플 및 리소스를 탐색하는 것이 좋습니다. 질문이나 피드백이 있으시면 아래에 의견을 남겨주세요. 행복한 코딩!
자세한 내용은 기여를 참조하십시오.
이 라이브러리는 MIT-0 라이센스에 따라 라이센스가 부여됩니다. 라이센스 파일을 참조하십시오.
