DEV Community

Cover image for 🤖 Getting Started with AI in JavaScript: A Beginner's Guide to the Future of Web Development : Part -II
SHIBAM
SHIBAM

Posted on

🤖 Getting Started with AI in JavaScript: A Beginner's Guide to the Future of Web Development : Part -II

#ai #javascript #beginners #machinelearning

🧠 Trendy: Using Transformers.js for LLMs in the Browser

Welcome to the future of AI — where Large Language Models (LLMs) like GPT and BERT can now run locally in the browser, thanks to transformers.js.

“Running AI models in the browser eliminates latency and enhances privacy.” – HuggingFace Blog

🚀 What is Transformers.js?

Transformers.js is a pure JavaScript library that lets you run HuggingFace transformer models in the browser. No Python. No servers. Just JS.

🌟 Features:

  • 🤖 Supports text generation, classification, translation, summarization
  • 🧠 Uses ONNX + WebAssembly (WASM) under the hood
  • 🧪 100% runs in-browser – private, fast, and serverless

🔨 Build: AI Text Generator in the Browser

Here’s how to build a GenAI chatbot using Transformers.js.

🧠 Goal: Use a GPT-style model to generate text completions in-browser

1. Add the Script 

<script type="module">
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.0';
</script>
Enter fullscreen mode Exit fullscreen mode

2. Generate Text 

<body>
  <h1>💬 AI Chatbot in Browser</h1>
  <textarea id="input" rows="4" cols="50" placeholder="Type your prompt..."></textarea>
  <button onclick="generateText()">Ask AI</button>
  <pre id="output">🧠 Waiting for input...</pre>

  <script type="module">
    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.0';

    const generator = await pipeline('text-generation', 'Xenova/distilgpt2');

    window.generateText = async () => {
      const prompt = document.getElementById('input').value;
      const result = await generator(prompt, { max_new_tokens: 40 });
      document.getElementById('output').textContent = result[0].generated_text;
    };
  </script>
</body>
Enter fullscreen mode Exit fullscreen mode

🔥 This uses the distilgpt2 model and generates responses based on your input.

✅ Output Example: 

Prompt: The future of AI is
Response: The future of AI is not a dream anymore — it's happening right now in real time.
Enter fullscreen mode Exit fullscreen mode

🧠 Use Case 2: Smart UI Assistant with Brain.js

Brain.js is a lightweight neural net library for JS developers.

Imagine making your site smarter by training it to understand patterns — like recognizing user behavior or product popularity.

🧪 Code: AI-Based Sentiment Predictor 

import brain from 'brain.js';

const net = new brain.NeuralNetwork();

net.train([
  { input: { awesome: 1 }, output: { positive: 1 } },
  { input: { terrible: 1 }, output: { negative: 1 } },
]);

const output = net.run({ awesome: 1 }); // { positive: 0.98 }

console.log(output);
Enter fullscreen mode Exit fullscreen mode

🧠 This is basic sentiment prediction — but it lays the groundwork for things like:

  • 🔍 Product review analysis
  • 💬 Live feedback loops
  • 🎯 UI personalization

🌎 Real-World AI x JavaScript Use Cases

Let’s take a look at some real companies and open-source tools using AI + JavaScript.

Platform Use Case Tech Stack
Runway In-browser video editing w/ GenAI JavaScript, WebAssembly
HuggingFace Spaces Browser-based AI demos Transformers.js, React, Vite
Google Teachable Machine Train your own model visually TensorFlow.js
Replicate UI UI for running AI models via API React + REST
You.com Search engine with in-browser GenAI TypeScript, Web Workers, LLM APIs

🔍 Use Case: AI as a Browser Extension (New & Cool!)

With AI getting smaller and faster, devs are building AI-powered browser extensions like:

  • 📜 TLDR This – Summarizes articles
  • ✍️ Compose AI – Autocompletes emails and messages
  • 🧠 Monica – Local memory extension that learns what you browse

You can build your own using:

// manifest.json
{
  "name": "Smart Summary",
  "permissions": ["activeTab", "storage"],
  "content_scripts": ["summary.js"],
  "manifest_version": 3
}
Enter fullscreen mode Exit fullscreen mode

And then use Transformers.js or fetch() to call AI models directly from the extension.

🧠 Bonus: Using OpenAI API from JavaScript

Want to work with ChatGPT/GPT-4 via JavaScript? Use the OpenAI API:

📜 Setup 

npm install openai
Enter fullscreen mode Exit fullscreen mode 
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: 'YOUR_API_KEY',
  dangerouslyAllowBrowser: true,
});

const chatCompletion = await openai.chat.completions.create({
  model: 'gpt-3.5-turbo',
  messages: [{ role: 'user', content: 'Write a haiku about JavaScript' }],
});

console.log(chatCompletion.choices[0].message.content);
Enter fullscreen mode Exit fullscreen mode

⚠️ Note: This sends data to OpenAI’s servers. If you need privacy, go for Transformers.js.

✅ That’s it for Part 2!

🙌 Let me know when you're ready for Part 3!

Thank you for reading this far. If you find this article useful, please like and share this article. Someone could find it useful too.💖

Connect with me on 👉 LinkedIn and [Medium]

Top comments (0)