How to call AWS beckrock with @aws-sdk/client-bedrock-runtime in react application

Question

I am trying to explore the possibility of creating an independent generative ai chat environment using AWS bedrock Claude v2. my initial thought was to create a react single page application as POC and just use tanstack query to call the bedrock api. However, as i am researching, i run into a brick wall where there are not a lot of resources available online about how to interact with AWS bedrock runtime using JavaScript, and the few that uses JavaScript are using node.js runtime instead of on a browser. the component is not finished but should compile, upon research it is suggested to add a global plugin to vite.config.js, but that did not solve my issue. I need help to adapt below JavaScript code into react component. also i would love to use webscoket and stream the response from bedrock but have not figureout how to implement that, please share any insight thanks!

react component called message(this component is not finished but should compile):

import React from "react";
import { Input } from "@chakra-ui/react";
import { useState, useEffect } from "react";
import { BedrockRuntimeClient, InvokeModelCommand } from "aws-sdk";

export default function Message() {
  const [input, setInput] = useState("");
  const [maxtoken, setMaxToken] = useState(300);
  const [temperature, setTemperature] = useState(1);
  const [topK, setTopK] = useState(250);
  const [topP, setTopP] = useState(0.999);

  // Create an AWS service client
  const client = BedrockRuntimeClient({
    region: "us-east-1",
    credentials: {
      accessKeyId: process.env.AWS_ACCESS_KEY_ID ?? "",
      secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY ?? "",
    },
  });

  async function makeBedRockCall() {
    const request = {
      prompt: `\n\nHuman:${input}\n\nAssistant:`,
      max_tokens_to_sample: maxtoken,
      temperature: temperature,
      top_k: topK,
      top_p: topP,
    };
    const input = {
      body: JSON.stringify(request),
      contentType: "application/json",
      accept: "application/json",
      modelId: "anthropic.claude-v2",
    };

    try {
      const bedRockCommand = new InvokeModelCommand(input);
      const response = await client.send(bedRockCommand);
      const completion = JSON.parse(
        Buffer.from(response.body).toString("utf-8")
      );
      return completion;
    } catch (error) {
      console.log(error);
    }
  }

  return (
    <div className="pt-5">
      <Input placeholder="Input Questions" />
    </div>
  );
}

error in the browser before modifying vite.config.js

Uncaught ReferenceError: global is not defined
    at node_modules/buffer/index.js (index.js:43:30)
    at __require (chunk-TITDT5VP.js?v=7c381102:11:50)
    at node_modules/aws-sdk/lib/browserHashUtils.js (browserHashUtils.js:1:14)
    at __require (chunk-TITDT5VP.js?v=7c381102:11:50)
    at node_modules/aws-sdk/lib/browserHmac.js (browserHmac.js:1:17)
    at __require (chunk-TITDT5VP.js?v=7c381102:11:50)
    at node_modules/aws-sdk/lib/browserCryptoLib.js (browserCryptoLib.js:1:12)
    at __require (chunk-TITDT5VP.js?v=7c381102:11:50)
    at node_modules/aws-sdk/lib/browser_loader.js (browser_loader.js:4:19)
    at __require (chunk-TITDT5VP.js?v=7c381102:11:50)

error in browser after modifying the vite.config.js to add global

Uncaught TypeError: BedrockRuntimeClient is not a function
    at Message (Message.jsx:14:18)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)

The above error occurred in the <Message> component:

    at Message (http://localhost:5173/src/components/Message.jsx?t=1698945371615:24:29)
    at App
    at EnvironmentProvider 
    at ColorModeProvider 
    at ThemeProvider2 
    at ThemeProvider3 
    at ChakraProvider 
    at ChakraProvider22 
    at QueryClientProvider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  define: {
    global: {},
    'process.env': {},
  }
})

I have tried searching on stackoverflow and AWS documentation: here are we i found. below post indicate my javascript lib used should be functional How to generate an image with @aws-sdk/client-bedrock-runtime link to aws documentation https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/BedrockRuntime.html#invokeModel-property i followed below thread to try fix the global issue Vite 'global is not defined'

Answer 1

The way I approached this is by deploying a few Lambda functions along with my REACT front end application, and just have my frond-end call the Lambda Functions via the API Gateway.

It is not perfect, but it gives me a way to control any processing I need to do with my Amazon Bedrock responses.

You can check out my application here: https://github.com/darko-mesaros/yabadabado

(the Lambda functions and the REACT code are under the resources directory)