Noder is a VS Code extension that transforms your codebase into a smart interactive graph. Instead of navigating endless files of text, Noder allows you to visualize, manage, and generate your code as a network of interconnected nodes. It leverages a powerful parser and cutting-edge AI to streamline your development workflow, from architecture design to code synthesis.
This tool is designed for developers who want to manage complexity, understand dependencies more clearly, and leverage AI to accelerate the creation of production-ready code.
✨ Key Features
Visual Node-Based Editor: View your classes, functions, and variables as a clear, interactive nodes. Understand your codebase's architecture at a glance.
AI-Powered Code Synthesis: Write a signature and a natural language description for a function, and let Noder's AI backend generate the complete implementation for you. It supports multiple AI providers like Google Gemini, Anthropic, and OpenAI.
Smart Context Generation: The AI is not working in a vacuum. Noder builds a rich context from across your entire project, including dependencies and structurally similar code, to provide the AI with the information it needs to generate accurate and relevant code.
🚀 Getting Started
1. Installation
Install the "Noder" extension directly from the Visual Studio Code Marketplace.
2. Initial Setup
Open the Noder Editor: Open a project folder in VS Code. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P) and run the command Show Node Editor.
Build the Initial Graph: The first time you open Noder in a project, it will prompt you to build the graph. Click "Build Graph" or "Start Indexing". This will perform an initial scan of your entire workspace to create the node representation of your code. This may take a few moments for large projects.
Configure Your AI Provider:
Click on the "Settings" menu in the Noder editor.
Navigate to the "AI Models" section.
Paste your API key for your preferred provider (e.g., Gemini) and select the model you wish to use from the dropdown.
3. Basic Workflow
Viewing Your Code: Once the graph is built, you will see your files and the code within them represented as a series of nested nodes. Click the chevron on a node to expand or collapse its contents (dependencies, children, description).
Editing Code:
Modify a Signature: Simply click on the signature of any node and edit it like a text field. Changes are automatically saved.
Add a Description: Expand a node and type a natural language description of what it does. This description will be used by the AI during code generation.
Creating a New Function:
Click the "Create New Node" button in the action bar.
A new, empty node will appear. Define its signature (e.g., def calculate_sum(a, b):).
Add a clear description (e.g., "This function takes two integers and returns their sum.").
Generating Code ("Compiling"):
Any node that has not yet had its code generated will have a "Ready to Generate" status.
Click the "Compile" button in the action bar.
Noder will send all uncompiled nodes to the AI backend to generate their implementations.
The generated code is then written directly back to your source files, and the node's status will change to "In Codebase".
