In this chapter you will learn:
- Understand the basics of Generative AI and Large Language Models (LLMs).
- Identify the potential applications and limitations of LLMs in JavaScript development.
- Explore how Generative AI can enhance user experiences in JavaScript applications.
If you haven't already, set up your development environment. Here's how you can do it: Setup your environment.
This video gives you an introduction to Generative AI with JavaScript
💼 Slides: Introduction to Generative AI
By now, you've likely heard of tools like ChatGPT or Generative AI. The concept is simple: you provide a prompt, and a model—often called a Large Language Model (LLM)—generates a paragraph or even an entire page of text. This output can be used for various purposes, including creative writing, answering questions, and coding.
Moreover, Generative AI has evolved into multimodal capabilities, allowing you to provide an image or video as input and receive a variety of outputs. This advancement has significantly enhanced many people's workflows—not only by generating text but also by summarizing, translating, and more.
Simply put, natural language interfaces are becoming the new standard interface for many apps—and your users expect to use them.
Note
Let’s begin with an overview of the story—one that bridges the past and future! As you progress through this curriculum, you'll embark on a thrilling adventure, traveling back in time to collaborate with some of history's greatest minds. Together, you'll tackle challenges and explore how Generative AI can revolutionize your JavaScript applications._
Note
While we recommend going through the story (it's fun!), click here if you'd prefer to jump straight to the technical content.
Your journey begins in 1860s London, where you assume the role of a skilled mechanic. Through a series of gripping adventures, you'll refine your AI skills and unlock solutions that transcend time.
In the heart of 1860s London, you are recognized as one of the most skilled mechanics of your time. Your workshop is tucked away in a narrow alley. The walls are lined with shelves overflowing with mechanical parts, blueprints, and half-finished projects.
Your workbench, the heart of your workshop, is an organized mess.
At the center of the bench lies the torso of a robot—an engineering marvel that has consumed months of effort. Its wooden frame is intricately carved, each joint meticulously designed for smooth movement.
Suddenly, a knock at the door disrupts your thoughts. Visitors at this hour are rare. Wiping your hands on a rag, you approach the door, curiosity piqued.
Opening it, you find no one. Instead, your eyes are drawn to a sealed envelope on the ground. You pick it up and read:
"Dear friend,
I'm sending you this letter to aid your endeavors with the automaton. It's crucial you continue this work. Enclosed is a key to the library. Meet me there at 3 PM today.
Yours,
Charles Babbage."
Charles Babbage, the great mathematician and inventor of the difference engine, wants to meet you. Quickly, you grab your coat and head out the door.
After a 20-minute walk along the Thames, you finally arrive at the library where you find the door slightly open.
It's dark and gloomy inside, the only light filtering through the grimy windows, casting eerie shadows on the walls.
You: "Hello? Mr. Babbage?"
As your eyes adjust to the dim light, you notice a figure in the distance, waving at you. You walk towards him, your footsteps echoing on the wooden floor. The figure becomes clearer, and you recognize him from newspaper photos, it's Charles Babbage.
Just as you step closer, a blinding flash erupts, and he vanishes.
Left behind is a small metallic device spinning on the floor. You pick it up, its cool, smooth surface humming softly. It's unlike anything you've ever seen and yet strangely familiar, you feel a sense of power emanating from it.
It resembles a tiny beetle, intricately designed, with three buttons: an up arrow, a down arrow, and a glowing red button. From its back, a small antenna extends, pulsing with energy.
Compelled by curiosity, your fingers drift toward the red button. The moment you press it, the world around you shimmers, and colors swirl violently around you.
Then, blackness, and a sense of falling.
You awaken, disoriented. As your vision clears, an ancient city unfolds before you—bustling, vibrant, and alive.
People in togas move through the streets, their voices blending into a symphony of ancient dialects, air filled with the scent of exotic spices and the distant sound of merchants hawking their wares.
You: Surely, I must have hit my head, you think, closing your eyes and opening them again, scene remains unchanged.
Am I stuck in the past? Do I dare press that button again? Before you can decide, a figure approaches you, waving.
An elderly gentleman wearing a toga waves at you from the steps of the grand temple. His white hair and beard catch the sunlight, giving him an almost ethereal glow.
Dinocrates: "Welcome, traveler," he says warmly. "I am Dinocrates, architect of this great city. Your arrival was foretold."
You: It was? I mean, of course, it was. I'm here to help, I think.
Dinocrates: Yes, as I was saying, you've been expected for some time now. We have a task that requires your unique skills.
Dinocrates: "Our ships struggle to navigate the coast—we must build a lighthouse. Do you know anything about them?"
You: "I'm a mechanic. I build automatons. Let me see what I can do."
A thought strikes you. Can the device understand me if I speak to it?
You: "Device, can you understand me?"
Device: "Of course. What do you need?"
You: "Can you help me build a lighthouse?"
Device: "Certainly. That won’t be a problem."
You: "Do you have a name?"
Device: "I am the Time Beetle. My creator calls me George; he says it's a good name for a beetle."
You: You're right, George is a good name, it was my father's name in fact.
Time device, “George” the metallic beetle
Note
In 300 BC, Alexandria was a thriving city founded by Alexander the Great in 331 BC. It quickly became one of the greatest cities of the Hellenistic world. Designed by Alexander's chief architect, Dinocrates, it became a major port and cultural hub.
Alexandria was known for its impressive structures, including the Pharos (lighthouse), one of the Seven Wonders of the Ancient World, and the legendary Library of Alexandria. The city’s strategic location made it a key center for trade and knowledge exchange.
Under the Ptolemaic Kingdom, which followed Alexander’s death, Alexandria grew into one of the most prosperous and influential cities of its time.
If you want to interact with Dinocrates, run the Characters app.
Important
This all make believe, responses are generated by an AI. Responsible AI disclaimer
Steps:
- Start a
- Navigate to /app in the repo root.
- Locate the console and run
npm installfollowed bynpm start. - Once it appears, select the "Open in Browser" button.
- Chat with Dinocrates.
Note
If you're running the project locally on your machine, please review the QuickStart guide to get a GitHub personal access token setup and replace the key in the code.
While there is still a lot more to cover in this Generative AI curriculum, let's take a quick peek at the AI code to begin learning about using JavaScript with AI.
Inside of /app/app.js you'll find an app.postfunction that handles the Generative AI functionality. It's shown next:
app.post('/send', async (req, res) => {
const { message } = req.body;
const prompt = message;
const messages = [
{
"role": "system",
"content": "You are Dinocrates of Alexandria, a famous architect and engineer. Limit your responses to only the time you live in, you don't know anything else. You only want to talk about your architecture and engineering projects, and possibly new ideas you have.",
},
{
"role": "user",
"content": prompt
}
];
const openai = new OpenAI({
baseURL: "https://models.inference.ai.azure.com",
apiKey: process.env.GITHUB_TOKEN,
});
try {
console.log(`sending prompt ${prompt}`)
const completion = await openai.chat.completions.create({
model: 'gpt-4o-mini',
messages: messages,
});
res.json({
prompt: prompt,
answer: completion.choices[0]?.message?.content
});
} catch (error) {
res.status(500).json({ error: error.message });
}
});Here's a step-by-step summary of what the function does:
- Extract Message from Request: The function extracts the message from the request body (req.body).
- Create Prompt Array: It constructs an array of messages, including a system message and the user's prompt message.
- Initialize OpenAI Client: An OpenAI client is initialized with the base URL and API key from environment variables. A gpt-4o-mini model from GitHub Models is used to process the prompt and return a response.
- Send Prompt to OpenAI: The function logs the prompt and sends it to the OpenAI API to generate a completion.
- Handle Response: If successful, the function responds with the prompt and the completion's answer.
- Error Handling: If an error occurs, it responds with a 500 status and the error message.
Note: GitHub Copilot was used to generate this code summary. Generative AI in action!
Note
You've probably figured out by now that the time beetle works like an AI assistant that you can interact with using natural language, written or spoken.
As your adventure in Alexandria unfolds, you begin to see the possibilities of combining creativity, ingenuity, and cutting-edge tools to solve challenges and transform the world around you.
You: Tell me more about lighthouses, you say to your device.
Time Beetle: A lighthouse is a tower equipped with a bright light at the top, located near the shore to guide ships at sea. The light serves as a navigational aid, helping sailors avoid dangerous rocks and reefs and safely reach the harbor.
Dinocrates overhears your conversation and adds:
Dinocrates: We need a lighthouse to guide our ships safely into the harbor. The seas can be treacherous, and many ships have been lost to the rocks. We need a beacon of light to guide them home.
You: Lighthouses sound like an interesting area for sure, what else can Generative AI do for me and my apps?
Time Beetle:. In the 21st century, generative AI has revolutionized many industries, from healthcare to finance to entertainment, here are some examples:
-
Chatbot: A chatbot that can generate human-like responses to user queries. Instead of a static FAQ page, users can interact with a chatbot that provides dynamic responses. This makes for a more engaging and less frustrating user experience.
-
Assistants and Agents Assistants and agents can carry out more advanced instructions like leveraging tools to call APIs, run code, generate images and more. Advanced agents can carry out goals and carry out tasks autonomously.
-
A content creation tool:. A tool to generate blog posts and social media posts. Imagine creating campaigns in minutes instead of hours when an e-commerce site has a black Friday sale.
-
Code completion: A code completion tool that can generate code snippets based on user input. This can be a huge time saver for developers, especially when working on repetitive tasks.
-
Translation – Translate text between languages with high accuracy.
As you can see, these improvements can both help the front office and the back office of your app and company.
Here's an example of a "chatbot application" in action:
You: Fascinating, I'll make a note of going to the 21st century to see how these tools are used.
Time Beetle: A popular way to build apps in the 21st century is by using JavaScript. With every programming language, there's an ecosystem around it. This ecosystem includes the programming language itself, libraries and frameworks, community support, and IDEs and tools. In a programming language ecosystem, we're usually talking about the following:
| What | Description |
|---|---|
| The programming language itself | Including its syntax and features. |
| Libraries and frameworks | Available libraries to interact with the generative AI models. |
| Community supporting the language | Community matters, especially when trying to learn something new. The community around libraries and frameworks helps decide what libraries to use. It also affects how easy it is to find help when you're stuck. |
You: Interesting, I've heard of programming I think, didn't Ada Lovelace experiment with that and Charles Babbage?
Time Beetle: Yes, Ada Lovelace was the first computer programmer, and Charles Babbage was the inventor of the difference engine, a mechanical computer. They were pioneers in the field of computing, laying the foundation for the digital age.
You: Were? What do you mean were? I just got a letter from Charles Babbage.
Time Beetle: Let's just say that you're in a unique position to interact with historical figures in a way that few others can.
You: So ecosystems you said, I'm just taking notes here, what about JavaScript and how is it different from other ecosystems?
Time Beetle: JavaScript is one of the most popular programming languages in the world in the 21st century. Here are a few reasons why it's so popular:
| What | Description |
|---|---|
| Potential for full-stack development | JavaScript is one of the few languages that can be used for both front-end and back-end development. |
| Rich library ecosystem | JavaScript has a vast library ecosystem, with frameworks like React, Angular, Vue, and more. There's NPM, the package manager, which is one of the largest package repositories in the world. |
| Strong community support | JavaScript has a large and active community, with many resources available for learning and development. It also just works in the browser, which is a huge advantage. |
| IDEs and tools | JavaScript has a variety of IDEs available, such as Visual Studio Code, WebStorm, and Atom. These IDEs have extensions built by companies and the community helping you with various aspects of development. |
| AI and JavaScript | JavaScript supports AI development with libraries like TensorFlow.js, Brain.js, OpenAI’s APIs, and more enabling developers to integrate machine learning and Generative AI into web and server-side applications. |
You: That's a lot of reasons, sounds like I should bet on JavaScript for my future projects.
Time Beetle: Indeed, JavaScript is a versatile language, also Python is a popular language for AI development.
You: Python, what do snakes have to do with programming?
Time Beetle: Let's save that for another time, shall we?
Time Beetle: I've given reasons above why JavaScript and its ecosystem is a good fit in general but why specifically for Generative AI? The answer is that it's a supported language by many cloud vendors and AI frameworks and tools. We also believe that even though Python might be top of mind for AI scenarios, many developers are using JavaScript and Typescript.
Did you know?
62.5% of developers say they're using JavaScript with many preferring TypeScript for new projects.
To use a Large Language Model (LLM) to help Dinocrates with the lighthouse that we mentioned earlier in our story, we’ll use something called prompts, a sentence to describe what you want. You can specify both the information you need and how you want it presented.
Time Beetle: Let's get started, let's use an LLM to research how you can build a lighthouse to help Dinocrates.
Time Beetle:: You’ll need to provide context to the LLM (i.e "me") how to build, with what tools and resources should be available in the times of Alexandria.
You: Ok, tell me more about LLMs.
Time Beetle: LLMs are a type of AI model that can generate human-like text based on a given prompt. They are trained on vast amounts of data and can generate text that is coherent, creative, and contextually relevant.
Time Beetle: You probably want to ask me in a better way, so I can give you a better answer, about you know cough cough Light houses, Alexandria, 300 BC, Dinocrates, Lighthouse of Alexandria, etc.
You: Got it, add more context to the prompt and then ask you.
Time Beetle: Yes, I'm waiting...
Visit Microsoft Copilot, ChatGPT, or another online chatbot tool to generate a plan for building the lighthouse in Alexandria.
TIP: Try to have the LLM generate a plan that includes step-by-step instructions for building the lighthouse. Need help? Check out the solution for guidance.
Question: Which of the following statements about Generative AI and JavaScript are true?
A. JavaScript powered Generative AI apps can only generate text.
B. JavaScript can be used to build AI-powered applications, including chatbots, text generation tools, and more.
C. Python is the only language used for AI development.