Build an AI text summarizer app with Amazon Bedrock

1. Log in to App Studio.

2. Navigate to the builder hub and choose + Create app.

3. Choose Start from scratch.

4. In the App name field, provide a name for your app, such as Text Summarizer.

5. If asked to select data sources or a connector, choose Skip for the purposes of this tutorial.

6. Choose Next to proceed.

7. (Optional): Watch the video tutorial for a quick overview of building apps in App Studio.

8. Choose Edit app which will bring you into the application studio.

To create and configure an automation that sends a prompt to Amazon Bedrock and processes and returns a summary

1. Choose the Automations tab at the top of the canvas.

2. Choose + Add automation.

3. In the right-hand panel, choose Properties.

4. Update the automation name by choosing the pencil icon. Enter InvokeBedrock and press enter.

5. Add a JavaScript action by performing the following steps:

   1. In the right-hand panel, choose Actions.

   2. Choose JavaScript to add an action.

6. Configure the action by performing the following steps:

   1. Choose the action from the canvas to open the right-hand Properties menu.

   2. Rename the action to preparePayload by choosing the pencil icon, entering the name, and pressing enter.

   3. In Source code, enter the following JavaScript snippet:

      const messages = [
        {
          role: "user",
          content: `<user_input>${params.input}</user_input>`
        }
      ];
      
      const body = {
        system: "You are a highly efficient text summarizer. Provide a concise summary of the following text, capturing the key points and main ideas: <user_input></user_input>",
        max_tokens: 4096,
        messages: messages,
        temperature: 0,
        anthropic_version: "bedrock-2023-05-31"
      };
      
      return JSON.stringify(body);

7. Add an Invoke Model action by performing the following steps:

   1. In the right-hand panel, choose Actions.

   2. Choose Invoke Model to add an action.

8. Configure the action by performing the following steps:

   1. Choose the action from the canvas to open the right-hand Properties menu.

   2. Rename the action to invokeBedrock by choosing the pencil icon, entering the name, and pressing enter.

   3. In Connector, select the connector that was created in Step 1: Create and configure an IAM role and App Studio connector.

   4. In Configuration, add the following snippet:

      {
          "modelId": "anthropic.claude-3-sonnet-20240229-v1:0",
          "contentType": "application/json",
          "accept": "application/json",
          "body": results.preparePayload
      }

9. Add another JavaScript action by performing the following steps:

   1. In the right-hand panel, choose Actions.

   2. Choose JavaScript to add an action.

10. Configure the action by performing the following steps:

    1. Choose the action from the canvas to open the right-hand Properties menu.

    2. Rename the action to processResults by choosing the pencil icon, entering the name, and pressing enter.

    3. In Source code, enter the following JavaScript snippet:

       function decodeResponseBody(body) {
         if (typeof body === 'string') {
           return body;
         } else if (body instanceof ArrayBuffer || ArrayBuffer.isView(body)) {
           return new TextDecoder().decode(body);
         } else {
           return JSON.stringify(body);
         }
       }
       
       function safeJsonParse(jsonString) {
         try {
           return JSON.parse(jsonString);
         } catch (error) {
           console.error('Error parsing JSON:', error);
           return {};
         }
       }
       
       function extractTextContent(responseBody) {
         return responseBody?.content?.[0]?.text ?? "not found!";
       }
       
       function processClaude3Response(response) {
         let decodedResponseBody = "";
         
         if (response && response.body) {
           try {
             decodedResponseBody = decodeResponseBody(response.body);
             console.log('Decoded response body:', decodedResponseBody);
           } catch (error) {
             console.error('Error decoding response body:', error);
             decodedResponseBody = "{}";
           }
         } else {
           console.warn('Bedrock payload or body is missing');
         }
         
         // For debugging purposes - can be removed
         console.log('decodedResponseBody', decodedResponseBody);
         
         const responseBody = safeJsonParse(decodedResponseBody);
         return extractTextContent(responseBody);
       }
       
       const response = processClaude3Response(results.invokeBedrock);
       
       console.log('Extracted response:', response);
       
       return response;

11. Add a parameter to the automation that will be used to pass the text prompt input from the user into the automation to be used in the request to Amazon Bedrock by performing the following steps:

    1. In the left-hand navigation, choose the InvokeBedrock automation.

    2. In the right-hand Properties menu, in Input, choose + Add.

    3. In Name, enter input.

    4. In Description, enter any description, such as Text to be sent to Amazon Bedrock.

    5. In Type, select String.

    6. Choose Add to create the parameter.

12. The output of this automation will be the summarized text, however, by default automations do not create outputs. Configure the automation to create an automation output by performing the following steps:

    1. In the right-hand Properties menu, in Output, choose + Add.

    2. In Output, enter {{results.processResults}}. This expression returns the contents of the processResults action.

To rename the default page

1. In the top bar navigation menu, choose Pages.

2. In the left-side panel, choose Page1 and choose the Properties panel in the right-side panel.

3. Choose the pencil icon, enter TextSummarizationTool, and press enter.

4. In Navigation label enter TextSummarizationTool.

To add a text input component

1. In the right-hand Components panel, locate the Text input component and drag it onto the canvas.

2. Choose the text input in the canvas to select it.

3. In the right-side Properties panel, update the following settings:

   1. Choose the pencil icon to rename the text input to inputPrompt.

   2. In Label, enter Prompt.

   3. In Placeholder, enter Enter text to be summarized.

To add a button component

1. In the right-hand Components panel, locate the Button component and drag it onto the canvas.

2. Choose the button in the canvas to select it.

3. In the right-side Properties panel, update the following settings:

   1. Choose the pencil icon to rename the button to sendButton.

   2. In Button Label, enter Send.

To add a text area component

1. In the right-hand Components panel, locate the Text area component and drag it onto the canvas.

2. Choose the text area in the canvas to select it.

3. In the right-side Properties panel, update the following settings:

   1. Choose the pencil icon to rename the button to textSummary.

   2. In Label, enter Summary.

To add a trigger that sends the prompt to Amazon Bedrock

1. Choose the button in the canvas to select it.

2. In the right-side Properties panel, in the Triggers section, choose + Add.

3. Choose Invoke Automation.

4. Choose the InvokeAutomation1 trigger that was created to configure it.

5. In Action Name, enter invokeBedrockAutomation.

6. In Invoke Automation, select the InvokeBedrock automation that was created earlier.

7. In the parameters box, in the input parameter that was created earlier, enter {{ui.inputPrompt.value}}, which passes the content in the inputPrompt text input component.

8. Choose the left arrow at the top of the panel to return to the component properties menu.

To add a trigger that displays the Amazon Bedrock results in the text area component

1. In the right-side Properties panel of the button, in the Triggers section, choose + Add.

2. Choose Run component action.

3. Choose the Runcomponentaction1 trigger that was created to configure it.

4. In Action Name, enter setTextSummary.

5. In Component, select the textSummary component.

6. In Action, select Set value.

7. In Set value to, enter {{results.invokeBedrockAutomation}}.

To publish your app to the Testing environment

1. In the top-right corner of the app builder, choose Publish.

2. Add a version description for the Testing environment.

3. Review and select the checkbox regarding the SLA.

4. Choose Start. Publishing may take up to 15 minutes.

5. (Optional) Once ready, you can give others access by choosing Share modal and following the prompts.

   Note

   An admin must have created end-user groups to share apps.