DEV Community

lennardv2
lennardv2

Posted on • Edited on

Claude Code Web UI

#ai #vibecoding #webdev #nuxt

Screenshot of claude code web ui

Building Claude Code UI

https://github.com/sunpix/claude-code-web

As someone who spends a lot of time coding with Claude, I found myself wanting to use it beyond just my desktop setup. The terminal interface is great, but what about when I'm on
my phone or tablet and want to quickly iterate on code? That's what led me to build Claude Code Web UI.

What is it?

Claude Code Web UI is a web-based interface for Claude Code CLI built with Nuxt 4. Instead of being limited to terminal interactions, you get:

  • Real-time chat interface with Claude
  • Project management capabilities
  • Mobile-first Progressive Web App design
  • Session persistence and history

Why I built it

The main driver was mobile development. I wanted to be able to work with Claude on code projects while on the go - whether I'm commuting, traveling, or just away from my main
development machine. The responsive design and PWA capabilities mean it works surprisingly well on phones and tablets.

Technical details

The project is built with:

  • Frontend: Nuxt 4 with Vue.js and Tailwind CSS
  • Backend: Nitro server with WebSocket support
  • Real-time communication: WebSocket + polling fallback
  • State management: Pinia stores
  • UI components: ShadCN Vue components

The architecture spawns Claude Code CLI processes and provides a web interface to interact with them, complete with project management and session handling.

Current limitations

Since it's still in alpha, there are some important caveats:

  • No built-in authentication - you'll need to handle this via reverse proxy if exposing beyond localhost
  • Requires Node.js 18+ and Claude Code CLI pre-installed
  • Direct access to your system through Claude CLI. I would advice a sandbox.

Installation

Make sure claude code is installed. And you've logged in.

  npm -g install @sunpix/claude-code-web
Enter fullscreen mode Exit fullscreen mode 
   claude-code-web
Enter fullscreen mode Exit fullscreen mode

Then visit http://localhost:3000

What's next?

I'm actively working on improvements and would love feedback from the community:

  • Is mobile AI-assisted development something you'd find useful?
  • What features would make this more valuable for your workflow?
  • Any security considerations I should prioritize?

The mobile experience has been surprisingly good for quick code reviews, debugging sessions, and iterative development. Being able to pull out my phone and continue a coding
conversation with Claude has changed how I approach development on the go.

Try it out

Check out the project on https://github.com/sunpix/claude-code-web and let me know what you think! I'm particularly interested in hearing from other developers who do mobile
coding or have tried similar approaches.

Remember to only run this on trusted networks and consider adding authentication if you plan to expose it beyond localhost.

Top comments (0)