Forem: lennardv2

Claude Code Web UI

lennardv2 — Tue, 29 Jul 2025 20:55:15 +0000

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

   claude-code-web

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.

🌈 Change window color in vscode / Visual Studio Code

lennardv2 — Mon, 13 Jan 2025 08:45:24 +0000

If you’ve ever found yourself lost in a sea of open VS Code windows, each looking exactly the same, you’re not alone. Switching between multiple projects—whether it’s client work, personal projects, or something you’re just experimenting with—can quickly get overwhelming. That’s where Project Colors comes in.

This VS Code extension tackles a real problem: workspace recognition and organization. By letting you assign unique colors and names to your projects, Project Colors helps you immediately know where you are and what you’re working on.

With Project Colors, you can:

Assign Colors to Your Projects

Customize the colors of key UI elements like the activity bar, title bar, and status bar. You can even tweak the appearance of active items like buttons or tabs. This simple change can make a huge difference in how quickly you recognize a workspace.

Display a Project Name

Ever hovered over a VS Code window trying to remember which project it belongs to? Project Colors lets you display the project’s name directly in the status bar or set it as the window title. A small addition, but one that saves a lot of frustration.

Configure Everything in One Place

An interactive configuration panel makes it easy to adjust colors and settings without diving into JSON. You can pick your colors, set the project name, and toggle specific features—all in a few clicks.

Install
https://marketplace.visualstudio.com/items?itemName=lennardv.set-window-color-name

README & Contribute
https://github.com/lennardv2/vscode-window-colors-name

Reddit
https://www.reddit.com/r/vscode/comments/1hzxbi3/project_colors_extension_for_vscode/

Using OpenAI in your Laravel project (Laravel Synth)

lennardv2 — Tue, 20 Jun 2023 14:13:36 +0000

https://github.com/blinq-dev/laravel-synth

We are living in an era of AI-driven software, and Laravel, one of the most popular PHP frameworks, is no exception. This post introduces Laravel Synth, a Laravel package that brings the power of OpenAI's ChatGPT language model to Laravel development, offering a range of automated features to improve productivity and overall development experience.

What is Laravel Synth?

Laravel Synth is a package that generates code and performs a variety of tasks in your Laravel application. It uses the power of OpenAI's GPT language model to provide an interactive and intelligent development experience.

Key Features of Laravel Synth

Laravel Synth offers numerous features, such as:

Architecture design: It can brainstorm and generate new application architectures.
File attachment: It provides a module to attach files to the conversation with the GPT model.
Code generation: It can generate migrations, models, and other necessary files for your application.
Conversations: It allows you to chat with the GPT model to get responses and perform actions.
Module Extensions: You can create custom modules to extend the functionality of Synth.

How to Install Laravel Synth?

Installing Laravel Synth is as simple as:

In your laravel app, run:

composer require blinq/synth
Publish the Synth configuration file using php artisan:
vendor:publish --tag=synth-config

Finally, set your OpenAI API key in the .env file: OPENAI_KEY=YOUR_API_KEY.

How to Use Laravel Synth?

Once installed, Laravel Synth can be accessed via the command
php artisan synth

This opens the Synth CLI, where you can interact with the GPT model and perform a variety of tasks.

Extend Laravel Synth with Custom Modules

One of the powerful features of Laravel Synth is the ability to extend its functionality with custom modules. A module is a class that defines specific actions and how to handle them. Here's a sample custom module implementation:

use Blinq\Synth\Modules\Module;

class MyModule extends Module
{
    public function name(): string
    {
        return 'MyModule';
    }

    public function register(): array
    {
        return [
            'action1' => 'Perform Action 1',
            'action2' => 'Perform Action 2',
        ];
    }

    public function onSelect(?string $key = null)
    {
        $this->cmd->info("You selected: {$key}");
        // Rest of the module's code...
    }
}

And here is how you can register your custom module with Laravel Synth:

use Blinq\Synth\Modules;

Modules::register(MyModule::class);

Wrapping Up

The integration of OpenAI's gpt model with Laravel via the Synth package opens up a new world of possibilities for Laravel developers. It offers a way to automate repetitive tasks, boost productivity, and ultimately improve the quality of the software being developed.

Give Laravel Synth a try in your next project, and experience a new level of Laravel development!

Just ask the commandline: "hey can you convert all the files in downloads/images to jpg" 😎

lennardv2 — Mon, 13 Mar 2023 17:20:31 +0000

Hey! Yeah another GPT util ;) I hope i did well on the execution part. This will help you with running commands in the command line, including the ones with difficult to remember arguments like ffmpeg.

Features 🚀

❓ Question to command
🎬 Response streaming
🔄 Lets you run multiple commands (always asks before and shows you the command)
📤 Optionally send output of command back to chatgpt for explanation
⚠ Tags it as dangerous if needed
⬆️ Lets you go arrow up for command history
🔍 Cmd+r to search through command history
💬 Chat mode, just acts more like a normal chat gpt session
🌈 Syntax highlighting of code

https://github.com/lennardv2/hey-chatgpt-cli

Colorgradient.dev

lennardv2 — Wed, 26 May 2021 22:06:53 +0000

I created this CSS Gradient Editor, you can check it out here Color Gradient

What do you think?