AWS Bedrock - Requirement to Code with Anthropci Claude Sonnet 3.5 and Bolt.new

Bolt.new, developed by StackBlitz, is revolutionizing the way we create web applications by leveraging AI to streamline the entire development process. This innovative platform allows us to build, run, edit, and deploy full-stack applications directly from their web browsers, eliminating the need for complex local setups.

One of the standout features of Bolt.new is its ability to generate functional application code from simple text prompts. This capability not only accelerates development but also reduces the potential for errors, as the AI can verify and correct issues in real-time. By supporting popular frameworks like React, Vue, and Next.js, Bolt.new provides developers with a versatile toolkit for creating modern applications.

Amazon Web Services (AWS) has integrated Anthropic's?Claude 3.5 Sonnet?model into its Bedrock platform, marking a significant advancement in generative AI capabilities. Its multimodal capabilities allow it to process images effectively and generate quality code at the same time.

?

We will be showing a demo by using the Open-source edition of this by running the same on our laptop/desktop and integrating the same with AWS Bedrock Anthropic Claude sonnet 3.5 model as (LLM) to generate a UI application from a Wireframe diagram without writing a single line of code.

I would like to thank Cole Medin for anchoring the Open-source development for this tool.

Prerequisites

• AWS Bedrock Model Access
• AWS Credentials with Bedrock Role Associated
• Bolt.new local setup

?Walkthrough

Let us first create a IAM user, give permission to access bedrock models and generate Keys to be used.

For the user we created Please associate the following policy "AmazonBedrock full Access"

Next, we will generate the Keys

Press “Create Access Key” and save it securely. This should not be shared.

Press “Next”.

Press “Create Access Key”.

Press Download .csv file.

?In the Bedrock console, request and get access for Bedrock model (Anthropic Claude sonnet 3.5).

In AWS Bedrock -> Model Access.

?Next, In our bolt local setup we have to configure the settings

In the file “.env.local” make the entries with the keys we generated for the user which had Bedrock full access permission.

I am using us-east-1 as my default region, we can change it as per our setup.

?We need to install all dependencies. The libraries required for Bedrock has been added to Package.json file.

We need to install the packages run the command.

Run the below command to install pnpm

Then run the below command to install required dependencies.

>> pnpm install

?We have hardcoded the Model entry for Bedrock. We will be modifying this later to automatically configure.

Next, we will start the Bolt application and Generate code for our requirement.

Run the command

>> pnpm run dev.

We can now open https://localhost:5173 from our browser. We will use the below wireframe diagram and generate a react application for the same.

?

The Application up and running

Let us switch to “Bedrock” Provider.

We upload the image and prompt it to create the application

?Prompt

Bolt has started analysing our requirement and started generating required prompts and the code .

Let us wait for the npm packages to be installed and application to be started to preview it.

It has completed and started to run the application. Click on preview

?We can either download the code locally as zip or sync-up continuously to a local folder.

The same can be used for developing a ReactJS, Angular or Vue.js app. We can use Bolt to generate code for Rest API endpoints or Graph QL endpoints which we can manually deploy it.

?Cleaning Up

Delete the Access Keys and disable access to models in AWS Bedrock console.

Conclusion

In this Blog, we learned how to do Generate code from requirement by integrating Bolt with AWS Bedrock Anthropic Claude Sonnet 3.5 model.