DEV Community: KAZI MUSHARRAF

VIBE CLI & VIBE CODE

KAZI MUSHARRAF — Thu, 20 Nov 2025 17:22:03 +0000

How I Built Vibe: A Free, Privacy-First AI Coding Suite to Ditch Paid Tools Forever
Vibe Terminal Demo
(Attach your terminal GIF here – vibe agent command running)
Hey devs! 👋 I'm Musharraf Khan, a solo indie hacker from India grinding on side projects between my day job. If you're like me – tired of shelling out $20/month for Copilot or Cursor, frustrated with API rate limits on free tiers, or just paranoid about code leaking to big tech – then buckle up. Today, I'm sharing the story behind Vibe, my open-source AI coding suite that's 100% free, privacy-obsessed, and packs more punch than most paid alternatives.
Launched just yesterday (November 20, 2025), Vibe has already hit 800+ installs across npm and VS Code Marketplace. No marketing budget, just pure grind and a Twitter thread. In this post, I'll walk you through:

Why I built it (spoiler: free tools for Indian devs like us)
The tech stack and key decisions
Core features with code snippets
How to install and try it yourself
Lessons learned (and what's next)

Let's dive in!
The "Why" – From Frustration to Free Forever
Picture this: Late 2024, I'm knee-deep in a freelance React gig. Copilot suggests code, but every third prompt hits a paywall. Claude's free tier? Token limits after 5 chats. And don't get me started on privacy – do I really want OpenAI slurping my proprietary code?
As an Indian dev (shoutout to Bangalore's startup scene), I know the pain: Premium tools eat into our already tight budgets. We need speed without subscriptions. Inspired by tools like Continue.dev, Cline, and Cursor's CLI vibes, I decided to build something better: Vibe – a dual-threat suite (CLI + VS Code extension) powered by OpenRouter's free tier, with easy upgrades to pro models via Mega LLM.
Goal? Ship fast, stay private, cost zero. Built solo over 4 months, 200+ hours, fueled by chai and Grok chats. Result: v2.1.5 live, MIT-licensed, and already getting love like this testimonial:
"I ship PRs faster without leaving my shell. Vibe changed my workflow!" – Lena Ortiz, Staff Engineer
Tech Stack: Simple, Scalable, Secret Sauce
Vibe is lightweight and extensible – no bloat, just results. Here's the breakdown:

CLI (Node.js/TypeScript): Core engine using OpenRouter SDK for API calls. Added Mega LLM as a secondary provider for flexibility.
VS Code Extension (TypeScript): Leverages VS Code's Webview API for a clean sidebar UI, with dropdown mode selector.
Providers:
Primary: OpenRouter (free models like glm-4.5-air, DeepSeek-Coder-V2 – no signup, anonymous keys).
Secondary: Mega LLM (plug in your API for Claude-3.5-Sonnet, GPT-4o, Gemini-1.5 – seamless toggle).

Other Libs: Chalk for colored output, Commander.js for CLI parsing, Zod for schema validation.
Deployment: npm for CLI, VS Code Marketplace for extension. Website on Vercel for docs.

No databases, no auth servers – everything local. Total bundle size? CLI: 5MB, Extension: 2MB. Runs on anything with Node 18+.
Key decision: Dual-provider abstraction. Users start free, upgrade without rewriting code. Here's a peek at the config logic (simplified from src/providers/index.ts):
TypeScript// providers/index.ts
import { OpenRouter } from './openrouter';
import { MegaLLM } from './megallm';

export type Provider = 'openrouter' | 'megallm';

export class ProviderManager {
private current: Provider = 'openrouter';
private openRouter = new OpenRouter(process.env.OPENROUTER_KEY || '');
private megaLLM = new MegaLLM(process.env.MEGA_KEY || '');

async generate(prompt: string, options: GenerateOptions) {
if (this.current === 'megallm' && this.megaLLM.hasKey()) {
return this.megaLLM.generate(prompt, options);
}
return this.openRouter.generate(prompt, options);
}

switchTo(provider: Provider) {
this.current = provider;
}
}
This lets you do vibe config --provider megallm --key YOUR_KEY and boom – pro models unlocked!
Core Features: CLI and Extension Breakdown
Vibe isn't just another autocomplete – it's agentic. Think: Tell it a goal, get a workflow.
Vibe CLI: Terminal Beast Mode
Your shell's new best friend. Install once, command away.
Key commands:

vibe agent : Full agentic flow – plans, codes, iterates.
vibe debug : Analyzes bugs, suggests fixes.
vibe refactor : Cleans and optimizes code.
vibe git : Automates commits, PRs.
vibe chat : Casual Q&A.

Example: Building a todo app:
Bash# Install
npm i -g vibe-ai-cli

Run agent

vibe agent "Create a React todo app with localStorage, styled in Tailwind"
Output (excerpt – it scaffolds files!):
text[Agent Planning] Goal: React Todo with localStorage & Tailwind.
Step 1: Init project structure.
Step 2: Core components: TodoList, TodoItem.
Step 3: Storage hook.
Step 4: Styling.

Generating src/App.tsx...
import React, { useState, useEffect } from 'react';
import { useLocalStorage } from './hooks/useLocalStorage'; // Auto-generated hook

function App() {
const [todos, setTodos] = useLocalStorage('todos', []);
// ... full component code here
}

export default App;
It even runs npm init under the hood if needed. Free tier handles 80% cases; Mega LLM crushes complex ones.
Vibe Code: VS Code Sidebar Magic
No more tab-switching. Install the extension, sidebar pops up with a dropdown for 6 modes:

ModeWhat It DoesUse CaseArchitectPlans project structure"Outline a full-stack MERN app"CodeGenerates/edits codeInline suggestions like CopilotDebugFinds & fixes errors"Why is this async loop hanging?"AskQuick queries/explainers"Refactor this to hooks"OrchestratorChains tasks (e.g., code + test + deploy)Multi-step workflowsProject-ResearchAnalyzes repos/docs"Summarize this codebase"
UI is Kilo Code-inspired: Minimal, dark-mode native. Memory persists across sessions (local storage only – privacy win).
Snippet from extension's activation (extension.ts):
TypeScriptimport * as vscode from 'vscode';
import { SidebarProvider } from './SidebarProvider';

export function activate(context: vscode.ExtensionContext) {
const sidebarProvider = new SidebarProvider(context.extensionUri);
context.subscriptions.push(
vscode.window.registerWebviewViewProvider('vibe-sidebar', sidebarProvider)
);

// Mode dropdown handler
sidebarProvider.onDidReceiveMessage((message) => {
if (message.command === 'switchMode') {
// Call ProviderManager.switchTo(message.mode)
sidebarProvider.updateWebview(message.mode);
}
});
}
Installation: 30 Seconds to Magic
CLI:
Bashnpm i -g vibe-ai-cli
vibe --help # Test it!
VS Code:

Open Extensions (Ctrl+Shift+X).
Search "Vibe VS Code".
Install → Reload → Sidebar appears (View > Vibe).

Config for Mega LLM (optional):
Bashvibe config --provider megallm --key sk-your-mega-key
Full docs: vibe-cli.vercel.app
Lessons Learned: Grinding Solo Ain't Easy

MVP First: Shipped v1 with just CLI basics. Iterated based on test runs (thanks, Grok for debugging chats!).
Free Tier Traps: OpenRouter's limits? Handled with fallbacks to lighter models.
Privacy Paranoia: Audited every API call – no logs, no phoning home.
Launch Hype: Twitter thread + Product Hunt = 800 installs Day 1. Reddit's r/vscode was gold for feedback.
Burnout Hack: 1-hour daily sprints. Tools like this? They're my therapy.

Challenges ahead: Scaling to mobile? Voice mode? Hit 10K users by year-end?
Try Vibe Today – And Tell Me What You Think
Vibe isn't perfect (yet), but it's yours. Free forever, open-source, and built for us bootstrappers.

CLI Repo: github.com/mk-knight23/vibe-cli ⭐
Extension Repo: github.com/mk-knight23/vibe-vscode ⭐
npm: vibe-ai-cli
Marketplace: Vibe VS Code

Installed it? Reply below with your first "vibe agent" story. Bug? Feature request? DM on X (@mk_knight23). Let's make coding fun again – no strings attached.
Cheers to shipping! 🚀
Musharraf Khan | Building free tools for devs | Follow for more launches

Food Recipe WEbsite

KAZI MUSHARRAF — Thu, 27 May 2021 07:19:25 +0000

Content Here

Snake Game in 4 languages

KAZI MUSHARRAF — Sun, 31 Jan 2021 09:20:16 +0000

Snake game in 4 major Languages

Code is on My github repo...Enjoy

New Project

KAZI MUSHARRAF — Sun, 24 Jan 2021 06:38:25 +0000

Back After a long time ...
have a lot of things in mind
Will Proceed as Things work out...

I Got 8 Week Badge

KAZI MUSHARRAF — Wed, 23 Dec 2020 09:04:31 +0000

I have been using Dev for 2 month now..
its been an amazing experince .
I am just a begginer in Coding...WIth much more to explore

Thanksss...

WEBSITE BUILDER

KAZI MUSHARRAF — Sun, 20 Dec 2020 15:47:40 +0000

How to Create a Free Website
Sign up for a free website builder. Choose what kind of website you want to create.
Customize a template or get a website made for you. Choose your starting point.
Drag and drop 100s of design features. ...
Get ready for business. ...
Publish your website and go live. ...
Drive traffic to your site.

Top 3 JAVASCRIPT FRAMEWORKS

KAZI MUSHARRAF — Sun, 20 Dec 2020 14:38:08 +0000

React Created by Facebook, the React framework has earned popularity within a short period. It is used to develop and operate the dynamic User Interface of the web pages with high incoming traffic. It makes the use of a virtual DOM, and hence, the integration of the same with any application is more straightforward.

Features
Declarative: Creates interactive and dynamic UI for websites and mobile applications. React updates efficiently and render the right components when data changes. Declarative views make the code readable and easy to debug.
Virtual DOM: For every DOM object, there is a corresponding "virtual DOM object." It creates a virtual copy of the original DOM and is a representation of a DOM object,
Event handling: React has its fully compatible W3C object model event system created. It also provides a cross-browser interface to a native event, meaning no need to worry about incompatible event names and fields. React reduces memory head by as event system is implemented through event delegation and has a pool of event objects.
JSX: JSX is a markup syntax that closely resembles HTML. JSX makes writing React components easier by making the syntax almost identical to the HTML injected into the web page.
Performance: React uses one-way data binding with an application architecture called Flux controls. ReactJS helps update the View for the user and, Flux controls the application workflow. Virtual DOM adds advantages as it compares the new data with original DOM and updates the View automatically.
React Native: React Native is a custom renderer for React; it uses native components instead of web components like React as building blocks. It also serves access to these platforms' features, apart from transforming React code to work on iOS and Android.
Component-Based: In React, everything is a component of the web page divided into small components to create a view(or UIs). Every part of the application visuals would be wrapped inside a self-contained module known as a component. Components in ReactJS use to define the visuals

Angular Angular - JavaScript Framework One of the most powerful, efficient, and open-source JavaScript frameworks is Angular. Google operates this framework and is implemented to use for developing a Single Page Application (SPA). It extends the HTML into the application and interprets the attributes to perform data binding.

Features
Cross-Platform

Progressive Web Apps: Modern web platform capabilities to deliver app-like experiences that are high performance, offline, and zero-step installation.
Native: Strategies from Cordova, Ionic, or NativeScript are used to build the native app.
Desktop: Desktop-installed apps across Mac, Windows, and Linux can be created using the same Angular methods like the web plus the ability to access native OS APIs.
Speed and Performance

Code Generation: Angular turns templates into code that's highly optimized for JavaScript virtual machines, giving hand-written code benefits.
Universal: Serve the first view of Node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS.
Code Splitting: With the new Component Router, angular apps load quickly, delivering automatic code-splitting. So users load the code required to render the view they request.
Productivity

Templates: Create UI views with simple and powerful template syntax.
Angular CLI: Command line tools: start building fast, add components and tests, then instantly deploy.
IDEs: Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.
Full Development Story

Testing: Protractor makes your scenario tests run faster and in a stable manner.
Animation: Create high-performance, complex choreographies, and animation timelines with very little code through Angular's intuitive API.
Accessibility: Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.

Vue.js Vue - JavaScript Framework Though developed in the year 2016, this JavaScript framework has already made its way into the market and has proven its worth by offering various features. Its dual integration mode is one of the most attractive features for creating high-end SPA or Single Page Application. It is a much reliable platform for developing cross-platform.

Features
Virtual DOM: Vue.js utilizes virtual DOM. Virtual DOM is a clone of the principal DOM element. The virtual DOM absorbs every change intended for the DOM presents in the form of JavaScript data structures, which are compared with the original data structure.
The viewers view final changes that reflect in the real DOM. The method is creative and cost-effective; also, the changes are done quickly.
Data Binding: This feature facilitates to manipulate or assign values to HTML attributes., change the style, assign classes with v-bind available, which is a binding directive.
CSS Transitions and Animations: This feature provides several methods to apply a transition to HTML elements when added, updated, or removed from the DOM. Its features consist of a built-in component that wraps the element responsible for returning the transition effect.
Template: It provides HTML-based templates that bind the DOM with the Vue.js instance data. The templates are compiled into Virtual DOM Render functions. A developer can use the render functions template and can replace the template with the render function.
Methods: We use methods when an event occurs that isn’t necessarily related to the instance data being mutated or want to change a component’s state. Methods do not keep records of any dependencies but can take arguments.
Complexity: Vue.js is simpler in terms of API and design. A web developer builds simple applications in a single day.

Dark GIT

KAZI MUSHARRAF — Thu, 10 Dec 2020 14:28:16 +0000

Github WIth A New Dark Look...🔥🔥🔥

100DaysOfCode #GitHubUniverse #programinglovers

Best Github Profile

KAZI MUSHARRAF — Fri, 04 Dec 2020 08:39:47 +0000

Hey Guys...

I have Been Working On Github for last 2 Months .
Its Been an amazing journey , where i have been Growing My Programming skills.

For every Developer ...A Github Profile is most Imp For others to See their Work .

So I Would Suggest to Check My Github Profile To see...And make sure You Give A Star ...

TOP 7 Pro Tips For Web DEvelopers !!!

KAZI MUSHARRAF — Tue, 01 Dec 2020 11:43:27 +0000

I Have Been Creating Many Repos ...

Every Web Developer must have a basic understanding of HTML, CSS, and JavaScript.

Responsive Web Design is used in all types of modern web development.

1:
Pick a Text Editor
VS Code is the is the top choice for web developers, which makes it a great place to start — it’s personally what I use. It is free and open source, with tons of plugins to make you more productive. However, there are many excellent options available such as Atom, WebStorm, or Vim (for the hardcore).

2:
Only focus on a few skills: Ex. JavaScript, React, Node. Don’t try to learn everything — React, Vue, Angular, jQuery, Backbone, etc. Get as good as you can learning the minimal required languages/libraries. Go deep, not wide.

3:
Build a portfolio website and use the portfolio API to power the data. The ability to show you can build applications is essential to hiring managers.

4:
Apply to as many jobs as you can as long as they fit your skillset. Don’t give up! You will eventually find your role if you keep working. It’s a long and hard road, but well worth the effort if you are passionate about the field.

5:
Practice for the interview. Use “Cracking the Coding Interview” and websites to become comfortable with answering interview questions.

6:
Read the “You Don’t Know JavaScript” series. This will ensure you know the language inside and out.

7:
Keep building projects — projects are the best way to learn and show that you understand how to build apps for the real world.

Keep GOING Guys!!!

Git Update

KAZI MUSHARRAF — Mon, 23 Nov 2020 16:22:36 +0000

300 Commits ...35 Repos FireFireFire
More to GO

I Got 4 Week Badge

KAZI MUSHARRAF — Sun, 22 Nov 2020 16:06:57 +0000

I have been using Dev for a month now..
its been an amazing experince .
I am just a begginer in Coding...WIth much more to explore

Thanksss...