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.

To add the vmblu framework as a skill for your agent, use the following command:

• vmblu agent install <AGENT> or, if vmblu is not on PATH:
• npx @vizualmodel/vmblu-cli agent install <AGENT>

where AGENT can be CODEX, CLAUDE

Before prompting your agent to create an application, simply tell it first to use vmblu

If you do not install vmblu as a skill, you can use a slightly longer intro to the application:

We are making a new application. We will use the vmblu framework for this.

Initialize the project as follows 

- `vmblu init "my-new-application"` or if vmblu is not on PATH
- `npx @vizualmodel/vmblu-cli init my-new-application`

Carefully read  `./my-new-application/.vmblu/vmblu.prompt.md` before continuing.

The init will create the folder if it does not exist yet. After that continue with the description of the application.

The coding agent will propose an architecture that you can inspect with the vmblu editor in vscode. The main model file is my-new-application.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