What it does
GraphED is an AI powered IDE with high visualization capabilities that allows you to combine the benefits of agentic coding with visual graphs.
Dual-Layer Graph Environment
- Overview vs. Detailed Graphs: It allows for an easy-to-edit environment where you can create graphs, featuring both an "overview" graph and a "detailed" graph.
- Quick Node Creation: You can add nodes very easily and simply give them brief descriptions (think of them as prompts). For example, when making new software, you could create a "frontend" node, connected to a "backend" node, which in turn is connected to a "database" node. You can either quickly make these nodes yourself or prompt our graph assistant agent to make them for you.
The Refine & Build Process
- The Refine Button: This uses agents to turn your vague idea into a concrete graph containing all the functions, classes, variables, and connections needed to implement the exact program you want. You can easily read this detailed graph after it is generated and even edit it, making sure the program the AI suggests is actually what you want to build.
- The Build Button: Once you like the detailed graph, you can click "build" to deploy up to dozens of agents to build the detailed graph you have created.
The Compliance Engine & Syncing
- Strict Code Compliance: To ensure the built program matches your vision, we built a system that takes in a codebase, maps the connections between every function, class, and variable, and compares this to the detailed graph. If a connection in the program violates the detailed graph, the agent is forced to modify the program to comply, or suggest a graph change that you can accept or deny.
- Bi-Directional Syncing: This keeps codebases and graphs perfectly in sync. If you
git pull, it can rebuild the graph around your new program. This also means you can immediately take any existing program and turn it into a new GraphED project. - Graph-Driven Iteration: From here, you can use the graphs to add new features or change anything about the project. Additionally, the AI agent can help you fix graph conflicts, add features via graphs, and fix bugs. The backend uses Claude and has the full power of any normal AI-powered IDE.
How we built it
There are multiple important engines powering GraphED:
- The Frontend: Allows for editing everything manually.
The Refinement Agent: Uses any existing detailed graph, alongside changes made to the overview graph, to generate or update a new detailed graph. This is a strict process requiring the creation of necessary functions and classes.
Note: Not all functions have to show up here. Helper functions, for example, do not have to be added. The compliance engine forces all graph connections to show up in the code, but not all code connections have to show up in the graph. (However, we have planned features like "ghost nodes" and graph coverage metrics to allow visibility on code elements not strictly enforced by the graph).
The Building Tool: A custom infrastructure of Claude agents focused on a graph-first implementation. This allows many more agents to build a program in parallel than would normally be possible. It focuses heavily on parallelism, working on multiple nodes at once even if they depend on each other, using the graph as a "contract."
The Compliance Engine: Uses Tree-sitter to build its own graph of all function connections. We combine this graph with AI agents to force compliance—checking if a graph is properly implemented and telling agents to try again if it isn't. It is also used to "initialize" an existing codebase or a new pull into a graph.
Tool Calls & Sidebar: We turned editing this graph into a bunch of tool calls. These are used by both internal agents and the Claude CLI sidebar. The sidebar can do everything a normal Claude CLI can do, but has access to extra graph-specific tools that shortcut almost any part of the graph-to-program pipeline while resolving graph conflicts for you.
Challenges we ran into
- Designing the Compliance System: This was incredibly complex, as we had to create an abstract system for how programs work. At one point, we were basically considering making a compiler! Eventually, we found Tree-sitter, which helped a ton. With a lot of extra infrastructure on our side, we were able to make a deterministic compliance system that depends on no AI, making it completely dependable.
- Agent Infrastructure: Making an agent infrastructure that could rival the efficiency of Claude Code was also very difficult and time-consuming. While we had access to the Claude SDK, making everything work smoothly in our new parallel system took a lot of trial and error. We think this can still be improved a ton, but we are amazed by how well it performs with only a day's worth of tuning.
Accomplishments that we're proud of
The frontend looks super polished and beautiful! Aarav was in charge of it, but we all helped and spent a lot of time making it actually a user focused IDE we would actually want to use ourselves.
What we learned
We learned a ton of stuff! From setting up complex agentic systems, to how programming languages sort function connections, to visualizing a huge amount of connections neatly in a way that is easy to understand. Overall, this has been one of our favorite projects of all time.
What's next for GraphED
We believe this project has actual potential as a product, and all of us plan to use it as our daily driving IDE. Moving forward, we hope to introduce:
- Massive improvements to the build system.
- The addition of ghost nodes and extra visibility metrics.
- Intelligent agent routing and more efficient credit usage (such as assigning powerful models to complex nodes and weaker models to simpler ones).
- Many more quality-of-life and usability features.
We eventually hope to release this as an actual IDE that people can download and use.
Built With
- css
- html
- javascript
- langgraph
- marked
- npm
- python
- react
- treesitter
- tsx
- typescript
Log in or sign up for Devpost to join the conversation.