Quickstart

▞ Getting Started

Welcome to vmblu — vizual model blueprint - the ai framework for building trustworthy, maintainable and efficient software with AI. This guide helps you install vmblu as a VS Code extension and create and run your first model.

▞ Requirements

• vmblu is currently available as an extension to vscode. See Visual Studio Code.
• vmblu works with javascript/typescript. Execution target can be a browser app or server app (node.js etc.). Any setup that can run javascript will do.
• vmblu does not have its own coding agent, nor does it impose one. But to benefit maximally from vmblu you will need one - Claude, Codex, ...

▞ Install vmblu

Get the vmblu extension for vscode.

• Open VS Code
• Go to the Extensions view (Ctrl+Shift+X)
• Search for vmblu
• Click Install

Or install directly from marketplace.visualstudio.com.

Get vmblu-runtime.

• To install: npm install @vizualmodel/vmblu-runtime

Get vmblu-cli.

• To install: npm install @vizualmodel/vmblu-cli

▞ Creating Your First Model

With vmblu you can manually create models, but the easiest way of course is to let the coding agent do the work. vmblu does not impose a coding agent, but works with what you have already available: claude, codex, etc.

Write a prompt similar to the prompt below that was used for the tutorial chat application:

We are making a simple chat application. 
It consists of two sub-projects: a chat server and a chat client.

# Steps to make the application

In `./examples/chat-application`, initialize the projects:

  - `vmblu init "chat-client"`
  - `vmblu init "chat-server"`

In order to develop these applications we are going to use the vmblu framework. 
You can find the documents, that you should read carefully before making 
the app in `./chat-client/.vmblu/vmblu.prompt.md`. 
The same documents also exist in the chat server, but you do not have to read 
them twice.

You will make the application in three steps:

  1. first we will make the architecture in the respective model files. 
  Ask for approval after having made the architecture.

  2. When the architecture is approved, write the code for the nodes of the 
  application.In this phase your role is that of a developer or builder.

  3. when the code for the nodes has been written, generate the test model 
  for the application and write the test code for mirror nodes. In this 
  phase your role is that of a test engineer or verifier.

# Description of the application

Here you give a more or less detailed description of your application. 
Focus on architecture first. Also specify the frameworks or runtime 
environment you want (node.js, vite, svelte etc.)

The coding agent will propose an architecture that you can inspect with the vmblu editor in vscode. The main model file is project-name.mod.blu. Change and add to the architecture as you see fit, and once you are pleased with it, let the coding agent write the code. Afterwards you can of course still make changes to the architecture and code as required.

Use the vscode extension to inspect the model to see the nodes that have been created, the interfaces that have been proposed and to understand the general flow of data in the application. The editor uses an automatic placement and routing of the connections, but you might want to re-arrange nodes and route layout to get a more pleasing result.

▞ Running a model

Depending on the type of appliation you have requested, your coding agent will know how to generate and start the application - so just ask. The application can also be generated manually and started as described in the user guide, but this is seldom necessary. The generated application is project-name.app.js.

▞ ⚠️ pre-1.0 Version

vmblu is currently in version 0.9.0 — nearing its first stable release.

The editor is already fully functional, and you can build, edit, and run models today. That said, as the project is being opened to a wider developer audience, new bugs and edge cases may still surface.

We welcome early adopters and feedback! Expect frequent updates as we work toward a 1.0 release within the next few months.

💬 Found something? Please open an issue or discussion on GitHub.

▞ Next Steps

• Check out the examples or the tutorial
• Start a project

▞ Feedback & Community

vmblu is open source and community-driven. We welcome contributions, feature requests, additional examples and ideas:

🛠 GitHub Issues: vmblu issues

💬 Discussions: vmblu discussions

🌐 Website: https://vmblu.dev

→ vmblu