{"slug": "i-built-a-browser-based-chat-ui-for-kiro-cli-and-it-complete-how-i-use-ai-agents", "title": "I built a browser-based chat UI for Kiro CLI and it complete how I use AI agents", "summary": "Creation of Kiro UI, a self-hosted, browser-based chat interface that connects to Kiro CLI via the Agent Client Protocol (ACP). Built using React 19, Vite, and an Express server with WebSocket communication, it provides a full agentic chat experience with features like real-time streaming, markdown rendering, side-by-side diffs, and MCP server management. The project is open-source and available on GitHub, offering both a web and optional Electron desktop app.", "body_md": "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.\n\nBut 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.\n\nSo 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.\n\n**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`\n\nprocesses over stdio. Each browser tab gets its own independent agent process with its own context. The communication uses the ACP protocol.\n\nWhat 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, ...\n\n**Let me show you how to get started.**\n\n**Step 1:** Clone the repository and install dependencies.\n\n```\ngit clone https://github.com/guyon-it-consulting/kiro-ui.git\ncd kiro-ui\nnpm install\n```\n\n**Step 2:** Make sure Kiro CLI is installed and authenticated. You need `kiro-cli`\n\nin your PATH.\n\n```\n# Verify kiro-cli is available\nwhich kiro-cli\n# Should output something like: ~/.local/bin/kiro-cli\n```\n\n**Step 3:** A single command builds the frontend and starts the server:\n\n```\nnpm start\n# Open http://localhost:3000\n```\n\nEt voilà! You have a full-featured chat interface to Kiro's agentic capabilities running locally in your browser.\n\n**Step 4 (optional):** If you prefer a desktop app experience, Kiro UI packages as an Electron app:\n\n```\nnpm run electron:dev              # Dev mode\nnpm run electron:build:mac        # macOS → DMG + ZIP (universal)\n```\n\n**Things to know:**\n\n-\n**Self-hosted and private**: Everything runs on localhost. No data leaves your machine. -\n**Multi-tab sessions**: Each tab spawns its own`kiro-cli acp`\n\nprocess. They're fully independent : different contexts, different conversations, different working directories. -\n**Protocol-first design**: Every feature is driven by ACP. The UI adapts to what the agent supports, including Kiro-specific extensions (`_kiro.dev/*`\n\n) for MCP servers, slash commands, and context compaction. -\n**Configuration**: Settings live in`~/.kiro-ui/`\n\nwith`settings.json`\n\nfor preferences and`trust.json`\n\nfor persistent tool permission rules. -\n**License**: Apache 2.0. Use it, fork it, extend it.\n\nGive 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.\n\n— Jérôme", "url": "https://wpnews.pro/news/i-built-a-browser-based-chat-ui-for-kiro-cli-and-it-complete-how-i-use-ai-agents", "canonical_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_at": "2026-05-21 08:54:20+00:00", "updated_at": "2026-05-21 09:04:12.079726+00:00", "lang": "en", "topics": ["developer-tools", "artificial-intelligence", "large-language-models", "open-source", "products"], "entities": ["Kiro CLI", "JetBrains IntelliJ IDEA", "Claude.ai", "ChatGPT", "Agent Client Protocol", "React", "Vite", "Express"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-browser-based-chat-ui-for-kiro-cli-and-it-complete-how-i-use-ai-agents", "markdown": "https://wpnews.pro/news/i-built-a-browser-based-chat-ui-for-kiro-cli-and-it-complete-how-i-use-ai-agents.md", "text": "https://wpnews.pro/news/i-built-a-browser-based-chat-ui-for-kiro-cli-and-it-complete-how-i-use-ai-agents.txt", "jsonld": "https://wpnews.pro/news/i-built-a-browser-based-chat-ui-for-kiro-cli-and-it-complete-how-i-use-ai-agents.jsonld"}}