KINTO Tech Blog
Generative AI

How an Infra Engineer Built a Full-Stack App with an AI Agent

Cover Image for How an Infra Engineer Built a Full-Stack App with an AI Agent

Self-introduction

Nice to meet you! I'm Tsuji, a manager in the Cloud Infrastructure Group at KINTO Technologies.

I joined the company back in May 2020, so I've been around for a while. Since graduating, I've been working as an infrastructure engineer, handling both on-prem and cloud systems.

Overview

GitHub Copilot Agent Mode for VSCode officially launched recently (as of April 16, 2025), I'll refer to it as "Agent" from here. Seems like the perfect excuse to try building something useful with it.

Premise

  • I'm an infra engineer through and through.
    • Frontend? Backend? Not really my thing.
  • But when it comes to infra—especially AWS—I can hold my own.
  • This article won't dive deep into technical stuff.

What I Want to Do

  • See how far infra-only engineers can go using Agents.
  • Develop a practical system we can actually use in our daily work, as an MVP (Minimum Viable Product).
  • Absolutely no writing code by hand.

So... What Should We Build?

Basically, all of KINTO Technologies' infrastructure is created and managed with IaC (Terraform).
If you have used Terraform before, you know the plan output can be hard to read unless you're used to it, right? So this time I'm aiming to create something that makes it easier to view Terraform plans.

What I Want to Make

  • Make Terraform plans easier to read:
    • I might as well throw in some generative AI for summaries.
    • Since the Agent's building it, why not have it create a slick frontend too?

Development Environment

*Here's the development environment used this time just for reference:

Items What I used
OS Linux(WSL2)
IDE VSCode(1.99.3)
Agent GitHub Copilot Agent
Generative AI Model Claude 3.7 Sonnet
Infra AWS

Let's Give It a Go

First things first: we need a prompt. Yep, that's where it all starts. This time, I gave the Agent a super rough idea of what I wanted using the following prompt:

I'd like to implement a mechanism to view the result of Terraform plan in the browser.

AWS configuration: CloudFront + S3 + Lambda + Bedrock
Planned workflow:
1. Run Terraform plan -out foo.plan locally and output the plan contents to a file
2. Upload foo.plan to S3.
3. A lambda is triggered, runs Terraform show foo.plan, converts it into a human-readable format, and stores it to S3
4. Bedrock analyzes the result of Terraform show and generates a summary of the plan
5. Users can view both the summary and full plan content via a browser.

I'm planning to proceed with this approach.
If you have a better suggestion, I'm happy to hear it. If not, please help me build the above.
If any code needs to be generated, please create a directory under /home/mizuki/ and save the files there.

Got a better prompt in mind? No need to get too deep into the details. I'm just an infra engineer here.

But then the brilliant Agent took my idea, leveled it up by 300% and made it happen.

You're looking to implement a system to view the result of a Terraform plan in a browser. The proposed idea is feasible and well thought out. First, I will evaluate the plan, suggest a few improvements, and then help with the implementation.

# Evaluation of the current plan

1. Run Terraform plan -out foo.plan locally and save the output to a file
2. Upload foo.plan to S3
3. An S3 event triggers a Lambda function, which runs Terraform show foo.plan and outputs the result in a human-readable version to S3.
4. Bedrock analyzes the result of Terraform show and generates a summary of the plan
5. Users access the summary and full plan details via a browser

# Possible improvements

1. **Security enhancement**: Restrict access to S3 and configure IAM permissions appropriately
2. **Visual representation of differences**: Visualize the plan result using graphs or colored text
3. **History management**: Save and compare past plan results
4. **Notifications**: Notify via Slack or email when important changes are detected
5. **Interactive UI**: Expand/collapse resource sections for easier browsing.

Let’s move forward with these points in mind. First, the directory structure will be created.  Next, we'll implement each component of this project.

After creating a Terraform configuration file and define the necessary AWS resources. The directory structure has been created. Now, let's start implementing each component.

Then, create `main.tf` to define the infrastructure using Terraform. This file will define the required resources such as the S3 bucket, CloudFront, Lambda, and IAM roles.
:
:
(omitted)

... Wow, you're killing it.

The Agent's killer feature is its ability to work locally. It even sets up a working directory and fills it with the Terraform files. Input Prompt

After that, the Agent explains its actions and checks in with "Is it okay if I do this?" at each step. Input Prompt

I have zero clue about Python, so I just kept mashing the "Accept" button every time it asked.

In the end, it didn't just generate JavaScript, CSS, Python, and Terraform files, but also gave me a shell for building the Lambda. And on top of that? It included usage instructions, deployment steps, and suggestions for improvements. Input Prompt

Time to Deploy

It's awesome that the Agent made it for me—but… does it actually work??? No idea, but I'll go ahead and follow the deployment steps exactly as provided.

  1. Apply Terraform and create S3, CloudFront, etc. on AWS.
  2. Build it and create a zip for Lambda.
  3. Deploy the Lambda.
  4. Upload the JS and CSS files to S3.

The deployment was completed without any errors. Input Prompt

As Expected… Error.

When I accessed the environment the Agent set up, got hit with a Lambda error. Not surprising, to be honest. I don't know anything about Python, there's no way to debug it myself. So... I'll just hand the Lambda logs over to the Agent and let it figure things out.

Input Prompt

Yes—just as I thought. It analyzed the logs, found the problem, and even fixed it. Input Prompt

I redeployed the updated files, and this time, it actually worked.

What Kind of System Did We End Up With?

Here's what the final system architecture looks like! Input Prompt

Here's how the whole thing works:

  1. The user sends Terraform plan results to S3.
  2. That triggers a Lambda function via an event.
  3. Lambda sends the plan results to Bedrock for analysis and summarization.
  4. Place the generated plan summary and the summary page's HTML file to S3.
  5. Step Functions deletes CloudFront cache.

The user just drops the plan file into S3, and everything else happens automatically.

Let's Try Accessing It

Input Prompt

Looks super cool! But hey, did it actually summarize the Terraform plan results like we originally set out to do?

Input Prompt Input Prompt

Perfect... The indentation's a little wonky here and there, but, let's not get hung up on the details.

What's Good About It?

  • The number of created, updated, and deleted resources is clearly displayed at the top for easy viewing.
  • It explains the specific changes being made to each resource.
  • A risk summary is provided to help you grasp what could go wrong with this plan.
  • It even points out things you might want to improve going forward.

This is exactly what I was hoping for.

Add Detailed Requirements

After that, I had the Agent make a few minor tweaks here and there:

  • Timestamps are in UTC, change to JST.
  • Fix indentations that are off.
    • Attach a screenshot.
  • Once the plan is generated, clear the CloudFront cache.

Stuff like that.

Even with all those detailed requests, the Agent handled everything without breaking a sweat.

My Impressions After Trying It

Building this system was way easier than I expected. I put it together in a single day, and honestly, most of that time was just waiting for the Agent to do its thing. The actual hands-on time was just about an hour. Even someone like me, who's only ever touched infrastructure, managed to build out both the frontend and backend solo.

Now, to be fair—when I looked at the Python code, even I could tell there were some parts that didn't need to be there. Definitely room for improvement. But for something at the Minimum Viable Product (MVP) stage, this is more than good enough. From here, it'll be easy to optimize the code or expand the features as needed. The important thing is that we were able to create a functioning system in a short period of time. This allows us to quickly shape our ideas and find areas for improvement through actual operation.

The key point is this: I was able to build a working system by myself in a short amount of time.

I think Agent is the best tool for building an MVP (Minimum Viable Product)

Summary

It might still take some time before we can build full-scale enterprise systems using only the Agent, but even as a beginner in writing prompts, I was able to develop a working system with ease.
What surprised me the most was how smoothly the Agent handled everything. All I had to do was keep clicking the "accept" button, and it built the system for me. Up until now, I was used to copying and pasting suggestions from generative AI and running commands manually. But this time, I barely touched the terminal. I just kept pressing "accept." I was able to create a system that can reduce workloads and prevent mistakes just by pressing a button. Also, the system I built is already in use, and I plan to fully integrate it into our operational workflow.

Finally

The Cloud Infrastructure Group I belong to is looking for people to join us. Whether you're confident in your cloud skills or just getting started and eager to learn, we'd love to hear from you. Please feel free to contact us.

For more details, please check here and here (in Japanese).

We’ve also posted a group introduction on Wantedly! You can read more about the Cloud Infrastructure Group here! (in Japanese)

Facebook

関連記事 | Related Posts

We are hiring!

【クラウドエンジニア】Cloud Infrastructure G/東京・大阪・福岡

KINTO Tech BlogWantedlyストーリーCloud InfrastructureグループについてAWSを主としたクラウドインフラの設計、構築、運用を主に担当しています。

生成AIエンジニア/AIファーストG/東京・名古屋・大阪・福岡

AIファーストGについて生成AIの活用を通じて、KINTO及びKINTOテクノロジーズへ事業貢献することをミッションに2024年1月に新設されたプロジェクトチームです。生成AI技術は生まれて日が浅く、その技術を業務活用する仕事には定説がありません。

イベント情報