Level-Up Mood Board Creation with Miro and Amazon Bedrock – Part 2

This blog is co-written by Sean Winters, Senior Platform Architect, Miro.

Creation of mood boards can feel overly complex or take a lot of time to create and iterate on. We’ll show how you can integrate generative artificial intelligence (AI) capabilities, image generation models, directly in a Miro board using Amazon Bedrock APIs, enabling better iteration and collaboration. We will also provide sample code so you can reproduce it yourself.

A new integration between Miro and Amazon Bedrock addresses key steps in the mood board creation process:

Choose and collect images: Instead of manually searching for images, users can now generate them directly within Miro using simple text prompts.
Arrange and display the board: Miro’s flexible canvas allows for easy arrangement and organization of generated images for seamless showcasing of the final mood board to stakeholders.
Tweak board: The ability to iterate quickly by adjusting prompts and regenerating images in real time accelerates the refinement process.

What are Miro and Amazon Bedrock?

Miro is an Innovation Workspace that enables teams to move faster from idea to outcome, powered by an integrated, intelligent canvas. Over 80 million users worldwide leverage Miro to speed up product and service development with collaborative tools for diagramming and many other use cases. Miro is where teams from anywhere come together to create the next big thing.

To make things easier to get started, at the brainstorming stage of designing new ideas, teams collaborate on mood boards to distill the sense of style or mood of the concept they are developing. Miro provides ready-made brainstorm templates, native image search capabilities, and integrations with over 160 different tools. You can use AI to get your mood board started or paste images from outside sources.

Miro users from different industries (for example, Architecture, Industrial Design and Gaming) use Miro to collaborate internally, or even directly with clients to create or present mood boards. After the brainstorming and ideation stage, Miro can continue to be used at later stages of the product development life cycle, including day-to-day project management.

Amazon Bedrock is a fully managed service, which offers customers a selection of high-performing models, including image generation. Using Amazon Bedrock, you can experiment with and evaluate top foundation models (FMs) for your use case. You can also privately customize them with your data using techniques such as fine-tuning and Retrieval Augmented Generation (RAG), and build agents that execute tasks using your enterprise systems and data sources.

Since Amazon Bedrock is serverless, you don’t have to manage any infrastructure, and you can securely integrate and deploy generative AI capabilities into your applications using the Amazon Web Services (AWS) services you are already familiar with. With Miro’s integration capabilities, we can integrate Amazon Bedrock to generate and refine images directly from the Miro board.

Prerequisites for implementing the solution

We have developed and published a publicly available sample repository that you can deploy yourself to leverage Miro for mood boarding with image generation models. You may check generative-ai-demo-on-miro on GitHub.

First of all, follow the instructions from Level-Up Mood Board Creation with Amazon Bedrock and Miro – Part 1 for setting up Amazon Bedrock. Once you have access to the models in Amazon Bedrock, you may follow the instructions from the repository readme file. It walks you through the process of creating a Miro Developer Team and a new app using the Miro’s Developer Platform. Deploy the backend in your AWS account, and configure the necessary permissions on Miro. You will then be able to create mood boards in Miro with the image generation capabilities of Amazon Bedrock.

Enhancing Miro with Amazon Bedrock

The following is the process of creating a mood board in Miro using our Miro and Amazon Bedrock integration:

Write a description of the desired image in Miro’s sticky note widget to create a prompt.
Within the Amazon Bedrock image generator extension, select the desired model to be used, the orientation of the image (Landscape or Portrait), and resolution for the image.
Click the “Generate” button, at this stage the Miro SDK app gathers the selected sticky note texts and constructs a prompt that is sent to the image generation model through an Amazon Bedrock API. An image is generated by the selected model using the prompt, and returned.
The generated image is displayed on the Miro board. Figure 1 shows the process of generating an image from the board.

Miro board demonstrating Amazon Bedrock integration. A sticky note with the prompt “a dusty dune landscape with a futuristic city rising in the background lit by orange neon holographic signs. biomechanical, concept art from 1970's surrealism films, highly detailed, space opera, cybergoth, dystopian, Unreal engine 5, extremely detailed, 4k, sci-fi” is on the screen, and then the user opens the app menu to tweak the image generator’s options. The generate button is selected and a corresponding image based on the prompt sticky note is displayed on the board.

Figure 1: Simple image generation using Miro and Amazon Bedrock integration.

To iterate on the design, users can split the prompts into multiple sticky notes and update individual notes as needed, as shown in Figure 2.

Miro board showing six sticky notes with different aspects that when strung together form the prompt “A male character with; a heavyweight; blue; futuristic armor; standing on top of a; dusty dune landscape”. User then opens the app menu, selects the generate button and an image of a character using those prompts is now displayed on the board.

Figure 2: Split prompts for image generation.

Users can also write negative prompts (prompts specifying what should not be included in the image) in red sticky notes and generate images accordingly.

Miro board showing six sticky notes with different aspects that form the prompt “Blue; whale shaped giant spaceship; with lot of details; and a fleet of small spaceships; flying above; a dusty dune landscape” with an additional red sticky note containing the negative prompt “low-res, blurry, pixelated, distorted”. User then opens the app menu, selects the generate button and an image of a blue whale with spaceships appears on the board.

Figure 3: Generate image with negative prompts.

As you proceed, you will be able to generate variations, and arrange the layout to finalize your mood board, as in Figure 4 for example.

Complete Miro board with proper layout and image variations with sticky notes for all image generated. The board represent two variations of prompts and images. There are two wide landscape options at the top, and on the bottom are displayed two different male, female and whale with ships options. The bottom options are paired with the corresponding top image landscape.

Figure 4: Example of mood board created with Miro and Amazon Bedrock.

Now let’s deep dive on the technical architecture used to expose Amazon Bedrock image generation with a REST API.

Architecture overview

One of the features of Miro is that it has a developer platform, which can be used to extend Miro functionality. You can embed Miro boards in other tools, and use the SDK to create app experiences within Miro or even use the REST APIs to create and edit Miro boards.

To integrate Amazon Bedrock with Miro we leverage the Miro SDK and other AWS services within the architecture, as shown in Figure 5.

Architecture diagram showing the flow from Miro through AWS services including Amazon CloudFront, Amazon API Gateway, AWS Lambda, AWS Secrets Manager, and Amazon Bedrock for image generation.

Figure 5: Architecture of the Miro and Amazon Bedrock integration.

From Miro, users access the custom Miro SDK app, which is hosted as a static website in Amazon Simple Storage Service (Amazon S3) and delivered through Amazon CloudFront.
When users interact with the Miro SDK app (for example, by clicking the “Generate” button), the application makes API calls through Amazon CloudFront to Amazon API Gateway.
Before processing any request, API Gateway triggers an AWS Lambda authorizer function that validates the access token from the Miro SDK app. The Lambda authorizer works with AWS Secrets Manager, which securely stores and manages the authentication credentials needed for validation.
Once authenticated, API Gateway forwards the request to an AWS Lambda function using a proxy integration. This Lambda function contains the logic for processing the image generation request and communicating with Amazon Bedrock. The function formats the user’s input (including prompts and parameters) into the required structure for the Amazon Bedrock API.
The Lambda function calls Amazon Bedrock using the AWS SDK, which then processes the request using image generation. Amazon Bedrock generates the image based on the provided positive and negative prompts, and returns the results.

Creating and hosting the Miro SDK app

Miro apps are custom applications that enhance Miro’s native capabilities by integrating directly within the Miro board interface. Using the Miro Web SDK, developers can create powerful applications that interact with board items, respond to user actions, and integrate external services. These extensions can be built using standard web technologies like HTML, CSS, and JavaScript, making them accessible to a wide range of developers. The Miro Developer Platform provides comprehensive tools and APIs for creating both board apps (which run directly within Miro boards) and web plugins (which can be accessed from the Miro toolbar).

For hosting the Miro SDK app, we leverage Amazon S3 and Amazon CloudFront in a serverless architecture. The application files are stored in an S3 bucket configured for static website hosting, while CloudFront serves as a content delivery network (CDN) that distributes the content globally. CloudFront provides a secured, low-latency and global access while an S3 bucket offers reliable and scalable storage for our application.

Interacting with Amazon Bedrock

The backend architecture of our solution combines several AWS services to create a secure, scalable, and efficient system for handling image generation requests from the Miro SDK app.

When users interact with the Miro SDK app, the requests go through Amazon CloudFront that acts as our content delivery network (CDN), routing requests to Amazon API Gateway. This setup not only provides low-latency access globally but also includes built-in DDoS protection for enhanced security.

Amazon API Gateway serves as our primary API management layer, handling all incoming requests from the Miro SDK app. We use an API Gateway proxy integration with AWS Lambda, which streamlines request handling by automatically mapping HTTP requests to Lambda and the other way around. This integration pattern streamlines our development process while maintaining the flexibility to handle complex requests.

For the core image generation functionality, we leverage Amazon Bedrock through its InvokeModel API operation. This operation enables synchronous invocation of image generation models. Using the Amazon Bedrock Runtime, we send JSON-formatted requests containing prompts and model configurations to Amazon Bedrock, which returns the generated images as base64-encoded strings.

Conclusion

We explored how integrating the image generation capabilities of Amazon Bedrock with Miro’s collaborative platform can revolutionize the mood board creation process. By leveraging the power of generative AI through Amazon Bedrock, combined with Miro’s intuitive interface, teams can now streamline their creative workflow and enhance collaboration.

We encourage you to follow the steps from the provided in the sample repository to set up this integration in your own environment.

Contact an AWS Representative to know how we can help accelerate your business.

AWS for Games Blog