This article is a machine translation of the contents of the following URL, which I wrote in Japanese:
https://qiita.com/Nana_777/items/c02aa5032aafd918d0a6
Introduction
In this article, we tested the integration of Kiro with the MCP tool.
MCP utilizes the MCP tool of the project management tool "Backlog." Our goal is to have Kiro read issues created on Backlog and modify the system.
Project to be Modified
We will be modifying the calculator app created in the previous article.
The arithmetic operation buttons and the equals button on the right side of this calculator are orange.
To make the equals button more noticeable, create an issue in Backlog that changes the color of the equals button to green and then modify it.
Preparation
Setting up the Backlog MCP tool locally
This time we will set up and use the MCP tool in a local environment.
GitClone the MCP tool from the following GitHub URL and run "npm install" and "npm run build."
https://github.com/nulab/backlog-mcp-server?tab=readme-ov-file
Setting up the Backlog MCP tool to be available from Kiro
.kiro > settings > mcp.json Add the following settings to enable the local Backlog MCP tool.
{
"mcpServers": {
"backlog": {
"command": "node",
"args": ["C:...backlog-mcp-server\\build\\index.js"],
"env": {
"BACKLOG_DOMAIN": "YourBacklogUrl.backlog.com",
"BACKLOG_API_KEY": "APIKEY"
},
"disabled": false,
"autoApprove": []
}
}
}
`
Steps
1. Create an issue in the backlog
I simply described my goal in the issue title and description.
This roughly translates to "Change the color of the equals button so it stands out."
2. Requesting Kiro to make improvements based on backlog issues
Opening a new chat with Kiro and selecting Spec, I sent a natural language request: "Please review the details of the backlog issue and improve the existing app."
3. Run the MCP Tool
After requesting via chat, Kiro confirmed that he would like to use the MCP tool, so I'll grant him permission.
4. SPEC Edit
Kiro edited the SPEC file.
Changes to Requirements (requirements.md)
Check the changes to the requirements (requirements.md).
This was added as the last requirement, likely due to modifications to an already completed system.
Changes to Design (design.md)
Design Check the changes in (design.md)
The equals button color specification has been added to the design document.
Edit the Implementation Plan (tasks.md)
Check the changes in the implementation plan (tasks.md).
A task has been added to the end of the implementation plan, likely due to a system upgrade that has already been completed.
5. After editing the SPEC, check before execution.
Now that the SPEC changes have been confirmed, we'll ask Kiro to implement them.
Execute Finalize Task List.
6. Check the Modification Results
Finally, run the app to confirm that the modifications requested in the Backlog issue have been implemented.
As expected, the Equals button is green!
Conclusion
Spec-driven development using Kiro's SPEC requires humans to communicate requirements to Kiro in natural language.
However, this doesn't mean you have to write them in the chat box every time.
Simply manage your requirements as issues in your project management tool, such as Backlog or Jira.
Kiro can review those issues via MCP, convert them into SPECs, and then begin development and implementation.
Kiro has a variety of interesting features, and integrating with MCP further expands its range of use.
Top comments (0)