<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Nguyễn Bá Tùng Lâm</title>
    <description>The latest articles on DEV Community by Nguyễn Bá Tùng Lâm (@ngxba).</description>
    <link>https://dev.to/ngxba</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3863053%2Fb2703101-cacf-473d-a7e5-88b62dc52b83.jpg</url>
      <title>DEV Community: Nguyễn Bá Tùng Lâm</title>
      <link>https://dev.to/ngxba</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ngxba"/>
    <language>en</language>
    <item>
      <title>I built a clean Web UI for Claude Code agents because the terminal was killing me rn</title>
      <dc:creator>Nguyễn Bá Tùng Lâm</dc:creator>
      <pubDate>Mon, 06 Apr 2026 03:49:58 +0000</pubDate>
      <link>https://dev.to/ngxba/i-built-a-clean-web-ui-for-claude-code-agents-because-the-terminal-was-killing-me-rn-46fk</link>
      <guid>https://dev.to/ngxba/i-built-a-clean-web-ui-for-claude-code-agents-because-the-terminal-was-killing-me-rn-46fk</guid>
      <description>&lt;p&gt;I’ve been using Anthropic’s Claude Code CLI for most of my dev work lately, I know, the terminal is cool and all, but i needed a better way to manage agent states and actually see what’s happening when scanning massive repos. So it’s help managing scattered markdown files in the .claude directory and manually editing configs to enable/disable specific behaviors became a massive friction point. You can checkout my code in, it’s fully open source: &lt;a href="https://github.com/Ngxba/claude-code-agents-ui" rel="noopener noreferrer"&gt;https://github.com/Ngxba/claude-code-agents-ui&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I built this (Nuxt 3 / VueFlow) to serve as a visual control plane. My main goal was to move away from “blind” terminal execution and into a system where I can actually see and manage agent capabilities.&lt;/p&gt;

&lt;p&gt;Key features I focused on:&lt;/p&gt;

&lt;p&gt;Full ClaudeCode Feature Control board include history control access with ease.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Dynamic Agents, Skills, Command, etc Management: You can import skills directly from GitHub or local repos. More importantly, you can toggle them on/off because it's use symlink instead of actual physical files.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Repo Scanning &amp;amp; Import Management: I added a specialized workflow to scan the codebase and manage imports. It helps ground the agent’s context and prevents it from breaking the build with invalid paths.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Relationship Graphing: Using VueFlow to visualize how agents, commands, and skills connect. It’s much easier to debug a multi-agent system when you can see the dependency tree visually.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Live Token &amp;amp; Cost Tracking: Just added this recently to keep an eye on usage during long refactoring sessions.&lt;/p&gt;

&lt;p&gt;It’s definitely still in the “early access” phase, but it has completely changed how I orchestrate my own AI dev workflows. Curious to hear how others are handling agent skill bloat!&lt;/p&gt;

</description>
      <category>ai</category>
      <category>claudecode</category>
      <category>programming</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
