Vibe-coding with Q Dev CLI: Bedrock Agent Streaming app
See how a complete end-to-end application with Bedrock Agents, WebSocket API Gateway, Lambda streaming, and React comes together with zero manual coding effort.
Kasi Muthu
Amazon Employee
Published May 21, 2025
Recently, I faced an interesting customer challenge: they needed to build an application that could stream responses from Amazon Bedrock Agents all the way to a React front-end. They wanted the React app to be fronted by an API Gateway / Lambda layer. They tried a few different approaches and none of them seemed to work. They were running against a tight deadline and was asking my help to provide them with a working sample.
Enter Amazon Q Developer. Starting with just a conversational prompt and "vibe coding" through the Q Developer CLI, I was able to create a fully functional end-to-end streaming application with minimal effort. Here's how it happened.
Before I got started on the CLI, I set up two MCP servers which I thought could come handy. One for AWS Documentation so Q CLI can figure out the API constructs and another for Q CLI to create an architecture diagram. Once I got those squared away, I came up with a starter prompt that is descriptive and adequate. This was the prompt.
Create a new folder under Documents to start this project. I want to create an end to end application to demonstrate streaming outputs from Bedrock Agents all the way to a React App that is fronted by an API Gateway. The architecture is this: React APP > API Gateway > Lambda function > Bedrock Agent with streaming. Bedrock Agent could be something very basic - zero action groups. Just call an LLM to provide a summary of an artist that is entered. The lambda function should invoke this agent. The API Gateway should invoke that lambda function. The React front-end app should solicit input for an artist and pass it along to the API Gateway. The sole purpose of this project is to demonstrate end to end streaming so make sure all components stream the output. And keep everything else to a bare minimum. You have access to MCP servers that could help you draw an architecture diagram and get the latest on AWS documentation including APIs. Create a detailed design doc including the architecture diagram and the set of steps you will follow. Once I make any adjustments to the design I will approve you to proceed to create the application code.And voila, Q CLI came up with a detailed design document in under a minute.
I knew that Lambda had added support for streaming quite a while ago and API Gateway could stream bi-directionally thru web sockets but I had never implemented any of those by myself. Q was able to figure that out by a combination of it’s inherent knowledge and by looking up the AWS documentation thru the MCP server.
The architecture diagram was created by Q CLI as well using the AWS Architecture diagram MCP server.
Once I made slight adjustments to the design document, I configured an AWS environment for Q CLI to work with and just watched it create all the components. There was a bit of back and forth and Q had to install a few components for which it asked for my approval. There was a little bit of tweaking needed to get everything in working order. I did not even open any of the code files it generated or look at the components it created on the AWS console. Here’s a peak into what all Q CLI did.
Q Developer correctly implemented a WebSocket API Gateway with the necessary routes:
- `$connect` - For establishing connections- `$disconnect` - For handling disconnections- `ping` - For heartbeat/keep-alive functionality- `getArtistSummary` - For processing artist summary requestsQ Developer implemented the Lambda function with streaming response handling, including proper error handling and heartbeat mechanisms:
The React application included sophisticated WebSocket handling with reconnection logic and real-time display of streaming content:
The final application successfully demonstrated end-to-end streaming from Bedrock Agent to the React frontend. As the agent generated content about an artist, the text appeared in real-time on the screen, providing an engaging user experience.
What's more impressive is that the application included features I hadn't even thought to ask for:
- Detailed trace data visualization for debugging
- Heartbeat mechanisms to maintain WebSocket connections
- Robust reconnection logic
- Comprehensive error handling
- Debug panels for monitoring connection status
And the results..
What would have taken days of research and implementation was accomplished in a fraction of the time through vibe coding with Amazon Q Developer.
This experience demonstrates how AI-assisted development is transforming how we build applications. By focusing on the "what" rather than the "how," developers can create sophisticated solutions more efficiently than ever before.
If you're facing a complex technical challenge, consider giving vibe coding with Amazon Q Developer a try. You might be surprised at how quickly you can go from concept to working code.
---
*Have you used Amazon Q Developer for vibe coding? Share your experiences in the comments below!*
Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.