DEV Community

Jean
Jean

Posted on • Edited on

Building Keep-It-Moving: My First VS Code Extension

#vscode #developertools #buildinpublic #kiro

VS Code extensions aren't supposed to run servers. I tried it anyway.

Check out the full repo at https://github.com/jmoncayo-pursuit/keep-it-moving.

KIM Demo - Complete workflow from VS Code extension to mobile prompting

Demo showing the complete KIM workflow: VS Code extension → QR code pairing → mobile prompting → Copilot integration

I built Keep-It-Moving (KIM) to solve a simple problem: sending GitHub Copilot prompts from my phone. What started as "wouldn't it be nice if..." became an exploration of what's possible when you embed a WebSocket server inside a VS Code extension.

The Development Journey

This was my first VS Code extension, built with intentional AI collaboration. The initial idea was straightforward - remote Copilot prompting. The implementation revealed layers I hadn't expected.

What I Actually Built:

  • Embedded WebSocket server running inside VS Code extension
  • Self-hosted Progressive Web App served directly from the extension
  • QR code pairing system with UUID authentication
  • Real-time prompt relay to GitHub Copilot chat
  • Dynamic port discovery with intelligent fallback

What I Discovered I Couldn't Build (Yet):

  • File context reading from VS Code workspace
  • A full GitHub Copilot alternative (shelved after realizing the scope)

Technical Innovation and Happy Accidents

The core breakthrough wasn't planned - it emerged from constraints. VS Code extensions typically can't run servers, but Node.js modules work fine in the extension context. So I embedded a full WebSocket server using the ws library directly in the extension.

// This shouldn't work, but it does
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: availablePort });
Enter fullscreen mode Exit fullscreen mode

KIM Control Panel showing server status and pairing management

The VS Code control panel showing server status, pairing code, and management controls

The PWA self-hosting was born from necessity. External hosting would break the local-first promise, so the extension serves its own web interface. QR codes point to http://localhost:8080 - your extension becomes your server.

The Multi-Device Surprise:
One of the most impressive features happened by accident. The architecture naturally supported multiple devices because WebSocket connections are stateless. What looked like intentional design was actually emergent behavior from good architectural decisions.

AI Collaboration Lessons

Working with AI on this project taught me to be vigilant about feature creep and exaggerated claims. Early iterations included grandiose descriptions of capabilities I hadn't actually built. I learned to:

  • Validate every AI-suggested feature against actual implementation
  • Remove marketing language that overstated capabilities
  • Focus documentation on what actually works, not what sounds impressive
  • Test claims before committing them to the repository

The AI wanted to describe KIM as "revolutionary" and "first-of-its-kind." I kept pulling it back to factual descriptions of what I actually built.

Joyful Design Constraints

The project emphasized joyful user experience throughout:

  • Emoji-driven feedback (🚀📱🎉)
  • Playful error messages like "Your coding session took a coffee break! ☕"
  • Seamless QR code pairing that "just works"
  • Delightful micro-interactions

These constraints made development more enjoyable and the codebase something to look forward to reading.

Architecture That Emerged 

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Mobile PWA    │    │  VS Code Ext    │    │ GitHub Copilot  │
│                 │    │                  │    │                 │
│ ┌─────────────┐ │    │ ┌──────────────┐ │    │ ┌─────────────┐ │
│ │ Prompt Input│ │───▶│ │ WebSocket    │ │───▶│ │ Chat API    │ │
│ └─────────────┘ │    │ │ Server       │ │    │ └─────────────┘ │
│                 │    │ └──────────────┘ │    │                 │
│ ┌─────────────┐ │    │ ┌──────────────┐ │    │                 │
│ │ QR Scanner  │ │◀───│ │ PWA Server   │ │    │                 │
│ └─────────────┘ │    │ └──────────────┘ │    │                 │
└─────────────────┘    └──────────────────┘    └─────────────────┘
Enter fullscreen mode Exit fullscreen mode

Three components, local network only, zero cloud dependencies.

Real Learning Outcomes

  • VS Code Extension APIs: First extension taught me the extension lifecycle and webview patterns
  • WebSocket Architecture: Learned to handle connection state, authentication, and message routing
  • Progressive Web Apps: Built responsive mobile interface with offline capabilities
  • Local-First Development: Solved networking without external dependencies

What's Next

KIM works, but it's not marketplace-ready. The next phase involves:

  • User testing with real developers
  • File context integration (reading current VS Code workspace)
  • Performance optimization for larger teams
  • Marketplace submission process

I submitted this to GitHub's "For the Love of Code" hackathon - wish me luck!

This was my first VS Code extension, built in collaboration with AI. It does something that shouldn't be possible and works reliably. Sometimes the best engineering happens when you ignore conventional wisdom and just try anyway.

Top comments (0)