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.<\/p>\n
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<\/strong>: according to the StackBlitz docs<\/a>, it is a browser-based runtime for executing Node.js applications and operating-system commands that runs entirely inside the browser tab.<\/p>\n That has three consequences for AI work:<\/p>\n 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<\/a> for current terms.<\/p>\n 1. Writing AI code in the editor.<\/strong> 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.<\/p>\n 2. Using Bolt.new.<\/strong> 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<\/a> for what is available now.<\/p>\n The classic first model is linear regression: learn the rule Run in Node with Two details that trip people up: If the browser editor appeals to you, compare it with a local setup in this guide to Visual Studio Code<\/a>, and with AI assistants inside your editor in this comparison of Cline, Aider and Continue<\/a>. Machine learning also rests on ordinary programming skill; if that part is shaky, AlgoCademy<\/a> has interactive lessons that build it step by step.<\/p>\n","protected":false},"excerpt":{"rendered":" How to use StackBlitz for AI programming: run TensorFlow.js in the browser, what Bolt.new adds, and the limits that matter. Includes a tested example.<\/p>\n","protected":false},"author":1,"featured_media":1606,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-1607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-problem-solving"],"_links":{"self":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/1607"}],"collection":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/comments?post=1607"}],"version-history":[{"count":1,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/1607\/revisions"}],"predecessor-version":[{"id":8736,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/posts\/1607\/revisions\/8736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/media\/1606"}],"wp:attachment":[{"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/media?parent=1607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/categories?post=1607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/algocademy.com\/blog\/wp-json\/wp\/v2\/tags?post=1607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
npm install<\/code> works in the tab.<\/li>\nTwo different things people mean by “AI on StackBlitz”<\/h2>\n
Example: train a tiny model with TensorFlow.js<\/h2>\n
y = 2x - 1<\/code> from six examples. In StackBlitz, create a new project from a Vite vanilla JavaScript template, open the terminal, and run npm install @tensorflow\/tfjs<\/code>. 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<\/code> with:<\/p>\nimport * as tf from '@tensorflow\/tfjs';\n\nasync function main() {\n const model = tf.sequential();\n model.add(tf.layers.dense({ units: 1, inputShape: [1] }));\n model.compile({ loss: 'meanSquaredError', optimizer: tf.train.sgd(0.01) });\n\n const xs = tf.tensor2d([-1, 0, 1, 2, 3, 4], [6, 1]);\n const ys = tf.tensor2d([-3, -1, 1, 3, 5, 7], [6, 1]);\n\n await model.fit(xs, ys, { epochs: 250, verbose: 0 });\n\n const prediction = model.predict(tf.tensor2d([10], [1, 1]));\n console.log(prediction.dataSync()[0].toFixed(2));\n}\n\nmain();\n<\/code><\/pre>\n@tensorflow\/tfjs<\/code> 4.22.0, this code printed 18.70<\/code>. (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.<\/p>\nfit<\/code> returns a promise, so use await<\/code> or .then<\/code> before predicting; and the optimizer needs a sensible learning rate. The string 'sgd'<\/code> also works and gave 18.78 in the same test.<\/p>\nWhat to build on StackBlitz<\/h2>\n
\n
Where it stops<\/h2>\n
\n
Habits that help<\/h2>\n
\n
package.json<\/code>.<\/li>\ntensor.dispose()<\/code> or wrap code in tf.tidy()<\/code> so tensors do not pile up.<\/li>\nWhere to go next<\/h2>\n