StackBlitz for AI Programming: What It Can and Can’t Do

StackBlitz is a browser-based editor that runs Node.js inside your browser tab, so you can try JavaScript machine-learning libraries such as TensorFlow.js without installing anything. It is good for small experiments, demos and learning. It is not a place to train large models, and it does not use “cloud computing power” the way the older version of this post claimed: the code runs on your own machine, in the browser. This guide shows what that means in practice, with an example that runs.

What StackBlitz is, and how it runs code

StackBlitz gives you a VS Code-style editor in the browser, with a file tree, a terminal, npm, and a live preview of your app. The technology underneath is WebContainers: according to the StackBlitz docs, it is a browser-based runtime for executing Node.js applications and operating-system commands that runs entirely inside the browser tab.

That has three consequences for AI work:

• Startup is fast. There is no remote machine to boot, so a project opens in seconds and npm install works in the tab.
• Your computer does the work. A TensorFlow.js model trains using your CPU, or your GPU through the browser’s WebGL support. A weak laptop means slow training.
• The browser sets the limits. Chromium-based browsers are fully supported, Firefox is listed as alpha and Safari as beta in the WebContainers browser-support notes. Features such as native Node add-ons or arbitrary system tools are not available the way they are on a real server.

The free personal plan covers public projects, and StackBlitz’s pricing page says you need a GitHub account to save work. Paid team plans add private repositories. Check the pricing page for current terms.

Two different things people mean by “AI on StackBlitz”

1. Writing AI code in the editor. You install a JavaScript ML library such as TensorFlow.js or Brain.js and run small models in the page. This is what the rest of this post covers.

2. Using Bolt.new. Bolt is StackBlitz’s AI app builder: you describe an app in chat and it generates, runs and previews a full web app in the browser, with options for hosting and a database. It is a code generator built on the same browser runtime, not a machine-learning environment. Plans, models and limits change often, so read bolt.new for what is available now.

Example: train a tiny model with TensorFlow.js

The classic first model is linear regression: learn the rule y = 2x - 1 from six examples. In StackBlitz, create a new project from a Vite vanilla JavaScript template, open the terminal, and run npm install @tensorflow/tfjs. Pin the version rather than loading a “latest” script from a CDN, so the example does not break when the library changes. Then replace the contents of main.js with:

import * as tf from '@tensorflow/tfjs';

async function main() {
  const model = tf.sequential();
  model.add(tf.layers.dense({ units: 1, inputShape: [1] }));
  model.compile({ loss: 'meanSquaredError', optimizer: tf.train.sgd(0.01) });

  const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);
  const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);

  await model.fit(xs, ys, { epochs: 250, verbose: 0 });

  const prediction = model.predict(tf.tensor2d([10], [1, 1]));
  console.log(prediction.dataSync()[0].toFixed(2));
}

main();

Run in Node with @tensorflow/tfjs 4.22.0, this code printed 18.70. (The browser should give a similar value.) The exact number changes from run to run because the weights start random, and it is close to the true answer of 19, not equal to it. More epochs or a different learning rate get you closer. Open the browser console (or the preview’s console) to see the output.

Two details that trip people up: fit returns a promise, so use await or .then before predicting; and the optimizer needs a sensible learning rate. The string 'sgd' also works and gave 18.78 in the same test.

What to build on StackBlitz

• Pre-trained models in a web page. TensorFlow.js has packaged models for image classification, object detection and text, which you load and call from JavaScript. Inference on a single image is light enough for a browser.
• Small training demos. Linear regression, a tiny classifier on a few hundred rows, or a visualisation of how a loss curve falls. These make good teaching material because anyone can open the link.
• Front ends for models that live elsewhere. Build the UI in StackBlitz and call an API that hosts the heavy model. Note that outbound network access is subject to browser rules such as CORS.
• Bug reports and sharing. A reproducible project link is a good way to show a maintainer a problem.

Where it stops

• Large training jobs. There is no managed GPU, and tabs have memory limits. Train big models in a notebook service or on a GPU machine and load the result in the browser.
• The Python ML stack. NumPy, PyTorch, scikit-learn and most data-science work live in Python. WebContainers are built around Node.js, so for Python ML use a local setup or a hosted notebook.
• Private data. Project files are stored by the service. Do not put customer data or secrets in a public project.
• Offline work and browser variation. It needs a supported browser and a connection, and behaviour can differ outside Chromium.

Habits that help

1. Pin dependency versions in package.json.
2. Keep models and data small. Downsample first, scale up locally.
3. Run long work in a Web Worker so the page stays responsive.
4. Free memory: call tensor.dispose() or wrap code in tf.tidy() so tensors do not pile up.
5. Do not copy generated code you cannot explain. An AI builder will happily produce a working demo with a wrong idea inside it.

Where to go next

If the browser editor appeals to you, compare it with a local setup in this guide to Visual Studio Code, and with AI assistants inside your editor in this comparison of Cline, Aider and Continue. Machine learning also rests on ordinary programming skill; if that part is shaky, AlgoCademy has interactive lessons that build it step by step.