DEV Community

AWS Community Builders profile image Jérôme GUYON
Jérôme GUYON for AWS Community Builders

Posted on

I built a browser-based chat UI for Kiro CLI and it complete how I use AI agents

#aws #kiro #agents #showdev

I've been living inside Kiro CLI for months now. The ACP integration in my JetBrains IntelliJ IDEA is fantastic for coding sessions : I get the full agentic power of Kiro right where my code lives. And the new Terminal UI with its syntax-highlighted markdown, collapsible tool outputs, and crew monitor is genuinely impressive and I love it.

But here's the thing. Not everything I do with an AI agent is coding. Sometimes I'm researching an architecture pattern. Sometimes I'm exploring a hypothesis about a system design. Sometimes I'm doing deep analysis on a technical decision and I want to see tool calls, and streaming responses in a comfortable visual layout, the kind of experience you get on claude.ai or ChatGPT. A web chat, basically. Except one that talks to Kiro's full agentic capabilities instead of a vanilla LLM.

So I built one with the AI-Driven Development Lifecycle (AI-DLC) methodology and Kiro CLI as my usual coding partner, I created Kiro UI a self-hosted, browser-based chat interface that connects to Kiro CLI via the Agent Client Protocol.

How it works. At its core, the architecture is simple: your browser (React 19 + Vite) connects via WebSocket to an Express server, which spawns and manages kiro-cli acp processes over stdio. Each browser tab gets its own independent agent process with its own context. The communication uses the ACP protocol.

What you get in the browser is a proper agentic chat experience: real-time streaming with markdown rendering and syntax highlighting, side-by-side diffs when the agent modifies files, collapsible tool call blocks with raw I/O inspection, an MCP server panel with live status indicators, permission management with auto-approve policies, slash command autocomplete, image and file attachments, a context usage meter showing how much of the context window you've consumed, ...

Let me show you how to get started.

Step 1: Clone the repository and install dependencies.

git clone https://github.com/guyon-it-consulting/kiro-ui.git
cd kiro-ui
npm install
Enter fullscreen mode Exit fullscreen mode

Step 2: Make sure Kiro CLI is installed and authenticated. You need kiro-cli in your PATH.

# Verify kiro-cli is available
which kiro-cli
# Should output something like: ~/.local/bin/kiro-cli
Enter fullscreen mode Exit fullscreen mode

Step 3: A single command builds the frontend and starts the server:

npm start
# Open http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Et voilà! You have a full-featured chat interface to Kiro's agentic capabilities running locally in your browser.

Step 4 (optional): If you prefer a desktop app experience, Kiro UI packages as an Electron app:

npm run electron:dev              # Dev mode
npm run electron:build:mac        # macOS → DMG + ZIP (universal)
Enter fullscreen mode Exit fullscreen mode

Things to know:

  • Self-hosted and private : Everything runs on localhost. No data leaves your machine.
  • Multi-tab sessions : Each tab spawns its own kiro-cli acp process. They're fully independent : different contexts, different conversations, different working directories.
  • Protocol-first design : Every feature is driven by ACP. The UI adapts to what the agent supports, including Kiro-specific extensions (_kiro.dev/*) for MCP servers, slash commands, and context compaction.
  • Configuration : Settings live in ~/.kiro-ui/ with settings.json for preferences and trust.json for persistent tool permission rules.
  • License : Apache 2.0. Use it, fork it, extend it.

Give it a try: https://github.com/guyon-it-consulting/kiro-ui. I'd love to hear how you use it and what features you'd want next.

— Jérôme

Top comments (0)