1: Magnet:

• A lightweight, high-performance local AI extension for VS Code designed to accelerate your development workflow, assist in communication, and debug code right inside your editor.

2: Features:

• Local AI Inference: Powered by Ollama and Qwen3 for zero API cost and complete code privacy;
• Inline Debugging && Chat: Context-aware code explanations, refactoring, and bug fixing directly in your workspace;
• System Hardware Awareness: Uses systeminformation to monitor resource utilization during model execution;
• Custom UI && Script Injection: Easily Personalize Styles Via CSS Variables Or Extend Webview Behavior.

3: Prerequisites:

• Before running Magnet, ensure you have the required runtime dependencies installed on your system.

3.a: Node.js && npm:

• Install via nvm (Node Version Manager)

  Install 'nvm':

  • Run: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.6/install.sh | bash
  • Run: \. "$HOME/.nvm/nvm.sh"

  Install 'Node.js':

  • Run: nvm install 24

  Verify versions:

  • Run: node -v (Expected output: 'v24.19.0')
  • Run: npm -v (Expected output: '11.17.0')

4: Install ollama for your operating system:

• macOS: curl -fsSL https://ollama.com/install.sh | sh

• Linux: curl -fsSL https://ollama.com/install.sh | sh

• Windows: irm https://ollama.com/install.ps1 | iex

  4.a: Quick Start

  • Install extension dependencies: npm install systeminformation --save
  • Pull default model: ollama pull qwen3:4b
  • Verify model execution: ollama run qwen3:4b

  4.b: Configure VS Code Settings:

  • Ensure CodeLens is enabled in your settings.json or (Preferences: Open User Settings (JSON), make sure: "editor.codeLens": true)

  4.c: Model Management:

  • You can switch the underlying Qwen3 model variant based on your hardware capabilities.

    4.c.1: How to Switch Models:

    • Remove current model: ollama rm qwen3:4b
    • Pull new model size: ollama pull qwen3:1.7b

    4.c.2: Update Modelfile:

    • Navigate to your project's Modelfile and replace the base image line: FROM qwen3:1.7b with correct model
    • Rebuild model configuration: ollama create qwen3-gpu -f Modelfile

  4.d: Recommended Model Tiers

  • Small: 0.6b, 1.7b, 3b, 3.2b, 3.8b, 4b
  • Medium: 7b, 7.25b, 8b, 9b, 12b, 14b
  • Large: 21b, 22b, 27b, 30b, 31b, 35b, 37b, 40b, 70b
  • Massive: 105b, 123b, 176b, 205b, 405b, 671b

6: Local UI Customization Guide:

• You can customize the styling and behavior of Magnet's webview panel on your local machine.

  6.a: Create Custom Style And Script Files:

  • Create a folder (Ex: ~/magnet-customization/)

  • Create a css file named custom.css to override styling:

  • Example for css modify:

    :root { // Switch Background To Dark Blue Theme --lay-cont-bg-clr: #0f111a; --msg-cont-bg-clr: #0f111a;

      // Change User Message Bubble Color
      --user-msg-bub-bg-clr: #2b2d42;
      --user-msg-bub-txt-clr: #edf2f4;
    
      // Change Input Container Styling
      --user-input-bg-clr: #1a1c23;
      --user-input-txt-clr: #ffffff;
      --user-input-cont-top-bord-clr: #3d405b;
    
      // Change Send Button Accent Color
      --send-msg-btn-bg-clr: #7209b7;
      --send-msg-btn-hover-bg-clr: #560bad;
      --send-msg-btn-txt-clr: #ffffff;
    
      // Change Font
      --font-family: 'Fira Code', monospace;
      --font-size: 14px;
    

    }

    // Target Specific Elements Directly With !important For Bigger Layout Tweaks .msg-bub.user { border: 1px solid #7209b7 !important; border-radius: 12px !important; }

    #send-btn { border-radius: 6px !important; }

  • Create a js file named custom.js

  • Example for js modify:

    (function () { console.log('Magnet Custom Script Created Successfully')

      // Listen For Backend Events Sent To The Webview
      window.addEventListener('message', (event) => {
      	const msg = event.data
    
      	// Example: Intercept AI stream chunks or status updates
      	if (msg.type === 'aiStreamChunk') {
      		// Custom Logic On Receiving Stream Chunks
      	} else if (msg.type === 'memStats') {
      		// Custom Logic On Hardware Stats Update
      	}
      })
    
      // Interact With DOM Elements Safely After Load
      document.addEventListener('DOMContentLoaded', () => {
      	const layoutContainer = document.getElementById('lay-cont')
    
      	if (layoutContainer) {
      		// Ex: Event Delegation To Capture User Interactions
      		layoutContainer.addEventListener('click', (e) => {
      			if (e.target && e.target.id === 'send-btn') {
      				console.log("User clicked send button")
      			}
      		})
      	}
      })
    

    })()

  CAUTION:

  • Do not call acquireVsCodeApi(): The global vsc api instance is initialized by webScript.js. Use window.addEventListener('message') to listen for incoming data;
  • Avoid direct instantiation overwrites: ChatPanelContainer and wrapper control the main state. Extend ui functionality by appending sub elements or listening to events rather than replacing core classes.

  6.b: Get The Absolute Paths:

  • Copy the full absolute system path to your custom files:

  • macOS / Linux:

    • CSS: /Users/username/magnet-customization/custom.css
    • JS: /Users/username/magnet-customization/custom.js

  • Windows:

    • CSS: C:\Users\username\magnet-customization\custom.css
    • JS: C:\Users\username\magnet-customization\custom.js

  6.c: Configure VSC Settings:

  • Open vsc settings: Ctrl + , or Cmd + ,

  • Search for Magnet

  • Paste your absolute paths into the respective fields:

    • Magnet: Custom Css Path
    • Magnet: Custom Js Path

  • Or edit your global settings.json directly: (Ctrl + Shift + P -> Preferences: Open User Settings (JSON)):

      JSON:
      {
      	"magnet.customCssPath": "/Users/username/magnet-customization/custom.css",
      	"magnet.customJsPath": "/Users/username/magnet-customization/custom.js"
      }
    

  6.d: Apply Changes:

  • Open the command pallete: Ctrl + Shift + P or Cmd + Shift + P
  • Select Developer: Reload Window
  • Open the Magnet Panel to see your local customizations live

7: Known Issues:

• Do not drag or resize the AI extension panel while a streaming response is generating, as this may interrupt response generation progress.

8: Future Features:

• Support for switching Ollama models will be added soon

9: License:

• Distributed under the MIT License.