@@ -5,192 +5,69 @@ VS Code support for the [Vivid](https://github.com/seethroughlab/vivid) creative
55## Features
66
77- ** Auto-Download Runtime** : Automatically downloads the Vivid runtime on first use
8- - ** Compile Error Diagnostics** : GCC/Clang errors shown in Problems panel with jump-to-location
9- - ** Operator Tree View** : Browse chain operators in the sidebar
10- - ** Node Inspector** : Edit parameters with live preview
11- - ** Performance Panel** : FPS, frame time, and per-operator timing
12- - ** Inline Decorations** : Live values shown next to code
8+ - ** Operator Library** : Browse available operators in the sidebar with inline documentation
139- ** WGSL Language Support** : Syntax highlighting for shader files
10+ - ** Claude Code Integration** : MCP server for AI-assisted creative coding
1411
1512## Installation
1613
17- ### For Users
14+ ### From VS Code Marketplace (Recommended)
1815
19- ** From VS Code Marketplace** (Recommended):
20161 . Open VS Code
21172 . Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
22183 . Search for "Vivid"
23194 . Click Install
2420
25- ** From VSIX file** :
21+ ### From VSIX file
22+
26231 . Download the ` .vsix ` file from [ Releases] ( https://github.com/seethroughlab/vivid-vscode/releases )
27242 . In VS Code: Extensions → ⋯ → Install from VSIX...
28253 . Select the downloaded file
2926
30- The extension will automatically download the Vivid runtime when you first run it.
31-
32- ### For Developers
33-
34- ``` bash
35- # Clone the repository
36- git clone https://github.com/seethroughlab/vivid-vscode.git
37- cd vivid-vscode
38-
39- # Install dependencies
40- npm install
41-
42- # Compile TypeScript
43- npm run compile
44-
45- # Launch in development mode
46- # Press F5 in VS Code, or:
47- code --extensionDevelopmentPath=$( pwd)
48- ```
49-
50- ** Using a local Vivid build** :
51-
52- If you're developing Vivid itself, set the runtime path in settings:
53- ``` json
54- {
55- "vivid.runtimePath" : " /path/to/vivid/build/bin/vivid"
56- }
57- ```
58-
59- This bypasses the auto-download and uses your local build.
60-
61- ## How It Works
62-
63- ### Runtime Auto-Download
64-
65- When you run "Vivid: Start Runtime" without a custom ` runtimePath ` :
66-
67- 1 . Extension checks ` ~/.vivid/bin/vivid `
68- 2 . If missing, prompts to download from [ GitHub Releases] ( https://github.com/seethroughlab/vivid/releases )
69- 3 . Downloads the correct archive for your platform:
70- - ` vivid-darwin-arm64.tar.gz ` (macOS Apple Silicon)
71- - ` vivid-darwin-x64.tar.gz ` (macOS Intel)
72- - ` vivid-win32-x64.zip ` (Windows)
73- - ` vivid-linux-x64.tar.gz ` (Linux)
74- 4 . Extracts to ` ~/.vivid/ `
75- 5 . Tracks version in ` ~/.vivid/version.json `
76-
77- ### Update Checking
78-
79- - On startup (if ` vivid.checkUpdatesOnStart ` is enabled)
80- - Manually via "Vivid: Check for Updates" command
81- - Compares installed version against latest GitHub release
27+ The extension will automatically download the Vivid runtime when you first use it.
8228
8329## Commands
8430
85- ### Runtime
8631| Command | Description |
8732| ---------| -------------|
88- | ` Vivid: Start Runtime ` | Launch Vivid (downloads if needed) |
89- | ` Vivid: Stop Runtime ` | Stop runtime and disconnect |
90- | ` Vivid: Force Reload ` | Trigger hot-reload |
33+ | ` Vivid: Create New Project ` | Create a new Vivid project with templates |
34+ | ` Vivid: Run Project ` | Run the current Vivid project |
35+ | ` Vivid: Bundle Project ` | Package project as standalone app |
9136| ` Vivid: Check for Updates ` | Check for new Vivid releases |
37+ | ` Vivid: Download Runtime ` | Download the Vivid runtime |
9238| ` Vivid: Reinstall Runtime ` | Force re-download of runtime |
93-
94- ### Project
95- | Command | Description |
96- | ---------| -------------|
97- | ` Vivid: Create New Project ` | Create a new Vivid project with templates and addon selection |
98- | ` Vivid: Bundle as App ` | Package project as standalone macOS app |
99- | ` Vivid: Create Operator Template ` | Generate a custom operator template file |
100-
101- ### Operators
102- | Command | Shortcut | Description |
103- | ---------| ----------| -------------|
104- | ` Vivid: Add Operator ` | ` Cmd+Shift+A ` | Insert operator from catalog at cursor |
105- | ` Vivid: Solo Operator ` | | Preview single operator output |
106- | ` Vivid: Exit Solo Mode ` | | Return to normal view |
107-
108- ### Editor
109- | Command | Description |
110- | ---------| -------------|
111- | ` Vivid: Toggle Inline Decorations ` | Show/hide inline value previews |
112- | ` Vivid: Go to Operator ` | Jump to operator definition in chain.cpp |
113-
114- ### Integration
115- | Command | Description |
116- | ---------| -------------|
117- | ` Vivid: Configure MCP Server ` | Set up Claude Code MCP integration |
118- | ` Vivid: Manage Addons ` | Install/remove Vivid addons |
39+ | ` Vivid: Configure Claude Code Integration ` | Set up MCP server for Claude Code |
40+ | ` Vivid: Refresh Operator Library ` | Refresh the operator library view |
41+ | ` Vivid: Show Output ` | Show the Vivid output channel |
11942
12043## Configuration
12144
12245| Setting | Default | Description |
12346| ---------| ---------| -------------|
124- | ` vivid.runtimePath ` | ` "" ` | Custom path to vivid executable (empty = use auto-downloaded) |
125- | ` vivid.websocketPort ` | ` 9876 ` | WebSocket port for runtime communication |
126- | ` vivid.showInlineDecorations ` | ` true ` | Show inline value previews in editor |
127- | ` vivid.previewSize ` | ` 48 ` | Thumbnail size in pixels |
128- | ` vivid.autoConnect ` | ` true ` | Auto-connect when opening a Vivid project |
47+ | ` vivid.vividRoot ` | ` "" ` | Path to vivid source root (for development builds). Leave empty to use auto-downloaded runtime. |
12948| ` vivid.checkUpdatesOnStart ` | ` true ` | Check for runtime updates on activation |
13049
13150## Views
13251
13352The extension adds a ** Vivid** panel to the Activity Bar with:
13453
135- - ** Operators** : Tree view of all operators in your chain
136- - ** Inspector** : Parameter editor for selected operator
137- - ** Performance** : Real-time FPS and timing metrics
138-
139- ## Creating Custom Operators
140-
141- Use ` Vivid: Create Operator Template ` to generate a starting point for your own operators:
142-
143- 1 . Run the command from the Command Palette (` Cmd+Shift+P ` )
144- 2 . Enter a name (e.g., ` ColorShift ` , ` WaveDistort ` )
145- 3 . Select the operator type:
146-
147- | Type | Use Case |
148- | ------| ----------|
149- | ** Shader Effect** | Process input textures with WGSL shaders (most common) |
150- | ** Shader Generator** | Generate textures from scratch (noise, gradients, shapes) |
151- | ** Value/Modulator** | Output scalar values for animation/modulation |
152- | ** Audio Synth** | Generate or process audio (requires vivid-audio) |
153- | ** Audio Analyzer** | Extract values from audio (RMS, spectrum, beats) |
154-
155- The template is created in ` operators/yourOperator.h ` . To use it:
156-
157- ``` cpp
158- // In chain.cpp
159- #include " operators/colorShift.h"
160-
161- void setup (Context& ctx) {
162- auto& chain = ctx.chain();
163- chain.add<ColorShift >("shift");
164- }
165- ```
166-
167- ## Troubleshooting
168-
169- **"Cannot connect to runtime"**
170- - Ensure the runtime is started (Vivid: Start Runtime)
171- - Check that port 9876 is not in use
172- - Look for errors in Output → Vivid
173-
174- **"No releases found"**
175- - The Vivid runtime may not have releases yet
176- - Set `vivid.runtimePath` to a local build
177-
178- **Runtime crashes on start**
179- - Check Output → Vivid for error messages
180- - Try reinstalling: "Vivid: Reinstall Runtime"
181- - Report issues at [vivid/issues](https://github.com/seethroughlab/vivid/issues)
54+ - ** Operators** : Browse available operators with documentation
18255
18356## Development
18457
18558``` bash
186- # Watch mode (auto-recompile on changes)
187- npm run watch
59+ # Clone the repository
60+ git clone https://github.com/seethroughlab/vivid-vscode.git
61+ cd vivid-vscode
18862
189- # Lint
190- npm run lint
63+ # Install dependencies
64+ npm install
65+
66+ # Compile TypeScript
67+ npm run compile
19168
192- # Package as VSIX
193- npm run package
69+ # Launch in development mode
70+ # Press F5 in VS Code
19471```
19572
19673## License
0 commit comments