Gallery
■ Introduction
Nothing speaks better for a tool then to show what you can build with it. On github there is a separate repo for the examples of applications built with vmblu: Examples.
The list below allows you to explore the vmblu architecture files for some of the examples there. It gives you a good impression of what a vmblu architecture file looks like and also to try-out the editor.
The editor is fully functional, but not embedded into an IDE, so you won't be able to see or jump into any source code or save modified files. For that you have to download the examples repo and work inside the IDE (vscode)
Some of the examples can be run in the browser, but for examples like the tutorial (needs a server-side app as well) , or the vscode extension (needs to be embedded in vscode) you have to download the code and setup the environment - but that's not difficult at all.
To open the editor and see the list of examples click here: Open Editor or click on the figure of the example below which opens the main vmblu file of the example (use ctrl-click if you want to open the example in a new tab)
The list of examples is continuously being expanded, so keep an eye on it - better still is to contribute to the examples something you build, see the examples repo for how to contribute.
■ The tutorial example
The tutorial example consists of two models: one for the client, running in the browser, and one for the server, a node.js application. Here you can have a look at the model files for both. To run this apllication you have to set up a server environment as well on your machine (see the tutorial for details)
The tutorial example is one of the first examples that was completely written by an LLM - architecture and code.
■ Solar System: human
This app is a simulation of the solar system. We chose that example because it doesn't need a lot of explaining and because it is sufficiently complex to be interesting. In the first version, the human has made the architecture of the app and the LLM was used for coding/code completion.
It's one of the first bigger applications we built with vmblu, so we learned a lot from it, but the use of an architecture file was definitely a great help.
This is also the first application where we tested the MCP interface. The application has an LLM group node that contains three nodes : a chat interface window, an MCP client and an MCP server. You can connect the chat interface window to your favourite LLM and then you can give 'commands' to the application to change settings etc. For this example, it was just a proof of concept - see the example itself to learn what you can do - but it shows how an LLM can be given deep access to the inner workings of an app made with vmblu, to control its behaviour.
You can also run this application, most of the settings are self-explanatory and if you want to dive deeper, see the examples repo.
■ Solar System: LLM
■ The vscode extension
The first versions of vmblu were obviously not written with vmblu, but as soon as the vmblu editor became a viable product, the editor itself was remodelled using vmblu. The main purpose of the rewrite was to cleanly separate the different functions of the editor: the UI, the document management, clipboard handling, selecting from node libs etc. It proved to be an enormous advantage when making different versions of the editor: one for the browser (the 'playground') and one for vscode.
In vscode document management, copying between documents etc. is done completely different from how it is done in the browser. With the vmblu architecture however, all that needed to be done was to write nodes to handle these specifics without even touching the core nodes that implement the functionality of the editor.
There was no need to change the core architecture of the editor itself, that is why there is still one big node that implements the editor functionality. That in itself is not bad, if a certain type of functionality is better written in a tight, connected way, it is ok to put that in one single node iso breaking it artificially up in smaller nodes. But if we were to refactor the editor again, we would probably break it up in two or three nodes, for example a node for handling the clicks, selections, drawing etc. and a node to do/undo the actual changes to the document.
The first vmblu file, webview.vmblu, is the architecture of the vscode extension based the webview design, hence the name. The complete extension also has a couple of typescript files to provide vscode with the necessary hooks to handle vmblu files, but these are fairly standard 'glue' code.
The second file is the vmblu architecture of the playground version, which you are using on this site to look at vmblu files. The playground version has its own simple workspace node to handle the document handling, but for the rest uses exactly the same nodes as the vscode version.
