PorterCode for Visual Studio Code
AI-powered coding assistant that brings PorterCode's capabilities directly into VSCode.
Features
Chat Interface
- Multi-tab conversations: Open multiple chat sessions as tabs
- Real-time streaming: See AI responses as they're generated
- Tool execution: Watch tools being called with live status updates
- Reasoning display: View the AI's thinking process in collapsible sections
Code Integration
- Send selection: Send highlighted code to PorterCode with
Cmd+Shift+L
- Apply edits: One-click apply for suggested code changes
- Diff preview: Visual comparison of proposed changes
- Open in editor: Jump to referenced files directly
Session Management
- Session history: Browse and resume previous conversations
- Session persistence: Sessions sync with PorterCode CLI
- Quick switch: Switch between sessions from the sidebar
Permission System
- Smart prompts: Clear permission dialogs for tool execution
- Pattern matching: "Don't ask again" for similar operations
- Risk indicators: Visual cues for operation risk levels
Requirements
- PorterCode CLI: Must be installed and running with
--gateway flag
- VSCode: Version 1.85.0 or higher
Getting Started
Install the extension (VSIX file or marketplace)
Start PorterCode CLI with Gateway:
cd your-project
porter --gateway
Open PorterCode panel from the Activity Bar (left sidebar)
Start chatting!
Keyboard Shortcuts
| Shortcut |
Action |
Cmd+Shift+N |
New chat session |
Cmd+Shift+L |
Send selection to chat |
Escape |
Cancel generation |
Extension Settings
| Setting |
Description |
Default |
portercode.autoConnect |
Auto-connect to CLI on startup |
true |
portercode.showStatusBar |
Show status in status bar |
true |
portercode.cliPath |
Custom path to CLI (auto-detect if empty) |
"" |
Architecture
┌─────────────────────────────────────────────────────┐
│ VSCode Extension │
├─────────────────┬───────────────────────────────────┤
│ Extension Host │ WebView (React) │
│ (Node.js) │ │
│ │ ┌─────────────────────────────┐ │
│ PorterChannel ◄──►│ ChatPanel + MessageList │ │
│ (WebSocket) │ │ InputArea + Dialogs │ │
│ │ └─────────────────────────────┘ │
└────────┬────────┴───────────────────────────────────┘
│ WebSocket (PWP Protocol)
▼
┌─────────────────────────────────────────────────────┐
│ PorterCode CLI (Gateway) │
│ Sessions, LLM, Tools, Permissions │
└─────────────────────────────────────────────────────┘
Development
Build from source
cd portercode-vscextension
npm install
npm run build
npm run package
Watch mode
npm run watch
Project structure
src/
├── extension/ # Extension host (Node.js)
│ ├── extension.ts # Entry point
│ ├── bridge/ # WebSocket communication
│ ├── commands/ # VSCode commands
│ ├── providers/ # WebView & TreeView providers
│ └── sessions/ # Session management
│
├── webview/ # React WebView
│ ├── App.tsx # Root component
│ ├── components/ # UI components
│ ├── hooks/ # React hooks
│ └── state/ # Zustand store
│
└── shared/ # Shared types
Troubleshooting
Extension not connecting
- Ensure PorterCode CLI is running with
--gateway flag
- Check that
~/.local/share/porter/gateway.json exists
- Reload VSCode window
Messages not appearing
- Check the Output panel for errors (View → Output → PorterCode)
- Verify WebSocket connection in Developer Tools
License
MIT - See LICENSE for details.
| |
