AI Coding Assistant
The AI assistant reads your entire open file and can make the edit for you directly — you describe the change in plain English, and it updates the file automatically. This is a bring-your-own-key (BYOK) feature: you connect it to an AI provider using your own API key. It is exclusive to the VS Code extension.
Setting up a provider
- Open Settings from the sidebar (or search reactJsxVisualizer in VS Code's own Settings).
- Choose an AI Provider from the dropdown.
- Enter your Active Model (the exact model name, e.g.,
claude-sonnet-4-5,gpt-4o,gemini-2.5-pro). - Add your API key under the Env setting, using the key name that matches your provider (see table below).
| Provider | Where to get a key | Env key to use |
|---|---|---|
| Anthropic | console.anthropic.com | ANTHROPIC_API_KEY |
| OpenAI | platform.openai.com | OPENAI_API_KEY |
| Google Gemini | aistudio.google.com | GEMINI_API_KEY |
| OpenRouter | openrouter.ai (access to nearly any model) | OPENROUTER_API_KEY |
| Custom / optimized proxy | your proxy provider | CUSTOM_BASE_URL + the matching key above |
Your API key is sent only to the provider you selected — it is never sent to The Nomad Stack or any third party, and never shown in error messages.
Using the assistant
Open the sidebar chat and simply describe what you want:
- "Change the heading text to 'Welcome back'"
- "Make the button background blue and add rounded corners"
- "Increase the font size of the title to 24px"
- "Build a responsive pricing card with three tiers"
When you ask for a change, the assistant edits your file automatically and the live preview updates right away. The chat confirms exactly what was changed, for example:
✏️ Applied 2 edits to Dashboard.jsx:
• const user = "Jason" → const user = "Jenny"
• fontSize: 14 → fontSize: 18
If you simply ask a question instead of requesting a change (e.g., "what color is this text?"), the assistant answers normally without touching your file.
Undo is always available — every AI edit creates an AI entry in Revision History first, so you can revert instantly if a change isn't what you wanted.
Tips for best results
- Be specific about what to change (e.g., "the heading" rather than "the text") if your file has similar content in multiple places.
- For very large files, ask for one focused change per message rather than a long list — it's both faster and easier to verify.
- If the assistant reports it couldn't locate something, rephrase with the exact wording or nearby code you see in your editor.