AWS Logo
Menu
Step by Step guide to AWS Bedrock with Angular using AWS-SDK

Step by Step guide to AWS Bedrock with Angular using AWS-SDK

In this comprehensive guide, you’ll learn how to integrate Amazon Bedrock, AWS’s powerful generative AI service, with your Angular applications using the AWS-SDK. Discover how to set up and configure AWS credentials, manage environment variables, and implement Bedrock’s AI capabilities seamlessly into your frontend code. Whether you’re creating AI-powered text generation or other innovative applications, this guide will walk you through every essential step, from initializing the SDK to invoking Bedrock

Published Dec 16, 2024

Overview — Bedrock:

AWS Bedrock is a fully managed service that makes it easy to build and deploy foundation models into your applications. It provides a simple API and managed infrastructure, allowing developers to focus on creating innovative applications without the need for deep machine learning expertise.
AI Models
Available Models

Key Features

  • Diverse Model Library: Bedrock offers a wide range of foundation models, including text generation, code generation, and image generation models. This enables developers to choose the best model for their specific use case.
  • Customizable Models: You can fine-tune existing models or train your own models on Bedrock to tailor them to your specific needs. This allows for greater flexibility and control over the model’s behavior.
  • Easy Integration: Bedrock integrates seamlessly with other AWS services, such as Amazon SageMaker and Amazon Lambda, making it easy to incorporate foundation models into your existing applications.
  • Managed Infrastructure: AWS handles the underlying infrastructure, including hardware, software, and scaling, so you can focus on building your applications.
  • Security and Compliance: Bedrock is built with security and compliance best practices in mind, ensuring that your data is protected and that you meet regulatory requirements.

Requesting Model Access in AWS Bedrock

AWS Bedrock offers a wide range of foundation models, each with its own capabilities and access requirements. To use a specific model in your applications, you’ll typically need to request access to it.
Request Model Access

How to Request Model Access

  1. Identify the Model: Determine which Bedrock model you want to use based on your specific needs and requirements.
  2. Check Availability: Verify if the model is publicly available or requires special permission. Some models might be limited to certain regions or require specific use cases.
  3. Submit a Request: If the model requires special permission, follow the instructions provided by AWS to submit a request. This might involve filling out a form, providing additional information, or contacting AWS support directly.
  4. Await Approval: Once you submit your request, AWS will review it to ensure you meet the necessary criteria. The approval process may take some time.
  5. Start Using the Model: Once your request is approved, you’ll be granted access to the model and can start using it in your applications.

Create IAM User:

In the context of Bedrock, creating IAM users is essential for managing access to the foundation models and other resources within the Bedrock service. By assigning appropriate permissions to your users, you can ensure that only authorized individuals can interact with and use these resources.
IAM User
Create IAM User
When you create an IAM user, you can assign specific permissions to that user, allowing them to perform certain actions within your AWS environment. This helps to protect your AWS resources and prevent unauthorised access.

Adding User Permissions in Bedrock

When working with AWS Bedrock, user permissions determine which actions a user can perform within the service. This includes accessing models, creating and managing jobs, and interacting with other Bedrock resources using AmazonBedrockReadOnly permission policy.
Adding User Permissions in Bedrock
Key Permissions
Here are some common permissions you might consider assigning to users in Bedrock:
  • bedrock:ListModels: Allows users to list available Bedrock models.
  • bedrock:InvokeModel: Grants users permission to invoke a specific Bedrock model.
  • bedrock:CreateJob: Enables users to create new jobs for model inference.
  • bedrock:ListJobs: Allows users to list existing jobs.
  • bedrock:GetJob: Grants users permission to retrieve information about a specific job.
  • bedrock:StopJob: Enables users to cancel a running job.

Adding Access Keys for Bedrock Resources

Access keys are a set of credentials (access key ID and secret access key) that allow your applications and services to interact with AWS services, including Bedrock. They provide a way for your code to authenticate and authorize requests to AWS.
Adding Access Keys
provide a way for your code to authenticate and authorize requests to AWS
authenticate and authorize requests
Adding Access Keys
  1. Create an IAM User: If you haven’t already, create an IAM user in your AWS account. This user will be associated with the access keys.
  2. Assign Permissions: Attach the necessary IAM policies to the user to grant them the required permissions to access and use Bedrock resources.
  3. Create Access Keys:
  • Log in to the AWS Management Console as the IAM user.
  • Navigate to the IAM console and select “Users”.
  • Choose the user you created.
  • In the “Security credentials” tab, click “Create access keys”.
  • A dialog box will appear asking you to confirm the creation of access keys. Click “Create access keys”.
  • The access key ID and secret access key will be displayed. Immediately download or copy these credentials and store them securely. Once you close the dialog, you won’t be able to view the secret access key again.

Creating an IAM Policy for InvokeModel in Bedrock

The bedrock:InvokeModel action allows users to invoke a specified Bedrock model. This is typically used to generate text, translate languages, or perform other tasks based on the model's capabilities.
Creating the IAM Policy
Here’s a basic IAM policy that grants a user permission to invoke a specific Bedrock model:
We will be using InvokeModelCommand**** which will not work if this permission is not allowed in policies.
Here’s a basic IAM policy
Creating an IAM Policy for InvokeModel in Bedrock
InvokeModel in Bedrock

Attaching the Policy to IAM

Once you’ve created the policy, you can attach it to an IAM user or role. This will grant the user or role the specified permissions.
By following these steps and considering the additional factors, you can effectively create and manage InvokeModel permissions for your Bedrock users and ensure that they have the appropriate access to the models they need.
Attaching the Permission we Just Created

Angular Integration with Bedrock using AWS-SDK

In this section, we’ll integrate AWS Bedrock into an Angular application (version 18.2) using the AWS-SDK. This will enable you to leverage generative AI models within your Angular app, providing seamless interaction with AWS Bedrock’s powerful AI capabilities.
Here’s the Angular integration part:
1. Install the AWS-SDK in Your Angular App: First, navigate to your Angular project directory and install the AWS SDK package:
2. Set Up AWS Credentials: Ensure your AWS credentials are set up correctly. You can use AWS IAM roles, AWS CLI, or environment variables. For development, you can configure AWS credentials using the AWS CLI:
3. Create an AWS Bedrock Service: Create a new Angular service that will handle the interaction with AWS Bedrock.
This Angular service, named AwsBedrockService, facilitates interaction with AWS Bedrock, a service that enables developers to use foundation models for various tasks such as text generation, translation, and summarization.
Key Components and Functionality:
  1. Imports & 3rd Parties from (aws-sdk):
  • Injectable: Decorator from Angular that injects the service into other components or services.
  • BedrockRuntimeClient, InvokeModelCommand: Classes from the @aws-sdk/client-bedrock-runtime library, providing the necessary methods for interacting with Bedrock.
  • environment: Imports the environment configuration file, typically used to store sensitive credentials like access keys.
2. Model ID and Configuration:
  • modelId: Specifies the ID of the Bedrock model you want to use. In this case, it's set to "ai21.jamba-1-5-large-v1:0".
  • config: Contains the configuration settings for the Bedrock client, including the region and credentials.
3. Bedrock Client:
  • client: Creates an instance of the BedrockRuntimeClient class, which is used to interact with the Bedrock service.
Overall Functionality:
When you call the syncBedRock method from another component or service, it sends the provided prompt to the specified Bedrock model. The model processes the prompt and generates a response, which is then logged to the console. You can modify the maxTokens and temperature parameters to control the output of the generated text.
4. Integration with Angular Components:
To use this service in your Angular components, inject it and call the syncBedRock method with the desired prompt. For example:
This code will call the syncBedRock method when a button is clicked or another event triggers it, and the generated text will be displayed in the component's template.

Conclusion:

In this guide, we successfully integrated Amazon Bedrock into an Angular v18.2 application using AWS-SDK. We walked through the process of setting up AWS credentials, installing the necessary SDK, and creating an Angular service to interact with Bedrock’s AI models. By following these steps, your Angular app is now equipped to harness the power of generative AI, providing dynamic content generation and other AI-driven functionalities.
This integration opens up a world of possibilities for building smarter, AI-enhanced applications. You can further explore how to fine-tune the models, enhance performance, and expand the AI capabilities to suit your specific project needs. With AWS Bedrock and Angular working seamlessly together, you’re well-positioned to innovate and deliver more engaging user experiences.
Happy coding!

Comments