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

> Source: <https://dev.to/aws-builders/i-built-a-browser-based-chat-ui-for-kiro-cli-and-it-complete-how-i-use-ai-agents-509>
> Published: 2026-05-21 08:54:20+00:00

I've been living inside [Kiro CLI](https://kiro.dev/cli/) for months now. The [ACP integration](https://kiro.dev/docs/cli/acp/) 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](https://kiro.dev/docs/cli/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)](https://aws.amazon.com/vi/blogs/devops/ai-driven-development-life-cycle/) methodology and Kiro CLI as my usual coding partner, I created [Kiro UI](https://github.com/guyon-it-consulting/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
```

**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
```

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

```
npm start
# Open http://localhost:3000
```

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)
```

**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](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