Appearance

Quickstart ​

■ Getting Started ​

Welcome to vmblu — vizual model blueprint - the graphical editor for building trustworthy, maintainable and efficient software with AI. This guide helps you install the vmblu editor as a VS Code extension, create your first model, and run it using the built-in runtime tools.

■ Requirements ​

Before you start, make sure you have:

But any setup that can run a javascript file will do.

■ Installing vmblu ​

Get the vmblu extension from the VS Code Marketplace:

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

Or install directly from marketplace.visualstudio.com.

To run an application built with vmblu, you need the vmblu runtime lib.

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

You also need the vmblu command line interface or vmblu-cli.

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

For easy project setup, specifically if you want to use vmblu with an LLM, use the init command. Note that if you install the vmblu-cli with the -g (global) option you will be able to run the init command as vmblu init folder-name. Otherwise you can add a script to package.json, eg : vmblu: vmblu, and run the command as follows npm run vmblu -- init folder-name. Note that everything after -- is passed to the vmblu command. You can also run the cli command with npx: npx @vizualmodel/vmblu-cli init folder-name.

The vmblu-cli contains also other commands eg profile that are used by the vmblu extension.

■ Creating Your First Model ​

The file extension used by vmblu for its models is .vmblu, so simply create a new file with that extension and you are ready to go.

If you want to start a project with LLM support, first run the command vmblu init folder-name. This will create a project folder and copy the required LLM files (schemas, seed file, manifest). In your first prompt tell the LLM to read the file seed.md in the LLM directory of your project before writing code.

You can also have a look at the examples included in the distribution.

■ Running a model ​

The model that you have built is compiled to a runable model-name.app.js file by selecting the make app option in the main menu.

You can run that .js file using the tools that you normally use for your application, whether it is a node-based application or an application that runs in the browser. You can also use a framework like vite to test the app. The resulting .js file can also be used as the starting point to make a bundle.

The format of the model-name.app.js file is given in the user-guide. In that file the vmblu-runtime lib is imported and started automatically, so you do not have to do anything extra for this.

■ ⚠️ 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: github.com/vizualmodel/vmblu/issues

💬 Discussions: github.com/vizualmodel/vmblu/discussions

🌐 Website: https://vmblu.dev

→ vmblu