Jupyter Lab IDE basics with Typescript and Deno
Tags: typescript, ai, chatgpt, llm
Published: 2024-06-18 07:16:10

---
title: Jupyter Lab IDE basics with Typescript and Deno
published: true
description: A step-by-step guide for Typescript developers
series: Let’s build AI-tools with the help of AI and Typescript!
tags: #typescript #ai #chatgpt #llm
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b58m8y6zvsbhbpu8zxh1.png
canonical_url: https://www.aiboosted.dev/p/jupyter-lab-ide-basics-with-typescript
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-17 19:53 +0000
---

In the [introductory part](https://www.aiboosted.dev/p/lets-build-ai-tools-typescript) of this series, I summarized the recent changes that enable us to **prototype and develop AI apps in Typescript easily.**

Haven’t read the first part? Here is what this project is all about: my goal in the coming months, and probably years, is to experiment with the new AI models and tools and show you everything I learn along the way. I'm going to “build in public” a lot and show you the important milestones of my journey. As a result, you’ll be able to apply this knowledge in your own practice.

In the [second article](https://www.aiboosted.dev/p/install-jupyter-lab-deno-typescript-prototyping), I showed you **how to install the Jupyter Lab IDE and all the necessary tools** for our rapid prototyping environment:

- [Jupyter Lab](https://jupyter.org/) web-based interactive development environment
- [Deno Typescript/Javascript kernel](https://blog.jupyter.org/bringing-modern-javascript-to-the-jupyter-notebook-fc998095081e) for Jupyter notebooks, which enables us to create Jupyter Notebooks in Typescript
- [Ollama](https://ollama.com/) for running LLMs locally
- [Langchain](https://js.langchain.com/docs/get_started/introduction), a framework for developing applications powered by language models

If you’ve followed the steps in the second article, now you have a working Jupyter Lab environment with Typescript support, and a local Ollama installation for running LLMs locally.

In this article, **I'll explain how to use Jupyter Lab, and show you a basic coding workflow in it.**

You can [download my sample Notebook](https://github.com/gergelyszerovay/aiboosted.dev/blob/main/a003/deno-demo.ipynb) with all the examples.

## Jupyter Lab basics

Jupyter Lab is an integrated development environment (IDE) for working with Jupyter notebooks, code, and data. Jupyter Notebooks contain live code, outputs, visualizations, and narrative text.

Jupyter Lab's user interface is similar to VSCode or JetBrains IDEs. It has two main parts: a "File browser", and a main work area with opened files:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8allvtp77kbxhp14gv2.png)

You can open and edit your source files from the "File browser". The root directory of the "File browser" is the directory, where you started Jupyter Lab.

The button with the plus icon above the "File browser" is the "Launcher". It provides shortcuts to create new notebooks, text files, terminals, consoles, and other tools:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nc809xvguuht0okq1kb0.png)

The left sidebar contains these tools:

- **File Browser**: Navigate and manage files
- **Running Terminals and Kernels**: Lists currently running terminals and kernels
- **Extension Manager**: Manage extensions to enhance the functionality of Jupyter Lab
- **Command Palette**: Quick access to commands, open it with `Ctrl+Shift+C`

In the "Command palette" you can see all Jupyter Lab commands and their shortcuts:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haodagztiidbbg03lixx.png)

## Coding Workflow in Jupyter Lab

### **Creating a New Notebook**

Click the `+` icon in the left sidebar to open the "Launcher". Under "Notebook" select "Deno" to create a new notebook for TypeScript (or JavaScript). Save your notebook with `Ctrl+S`. Rename the file in the "File browser" by right clicking on it and selecting "Rename" (or press `F2`)

### Writing and Executing Code

In the new notebook, you can write and execute TypeScript code within code cells. Each code cell lets you to enter and execute a snippet of code. For example, to display message, write:

```ts
console.log('Hello Deno!')
```

Execute the code by pressing `Shift+Enter`. The output will appear below the cell immediately:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dix3grrafd7r88gjr6sx.png)

### Kernels

A kernel executes the code in Jupyter Notebooks. It maintains the state of variables, imports, and other runtime information between cell executions. Each notebook has its own kernel.

### Restarting a Kernel

The notebook's kernel memory can get cluttered with variables from previous executions. Restarting clears this memory, providing a clean slate. Restarting also reloads updated modules.

You can restart the kernel from the "Kernel" menu.

### Markdown Cells

Markdown cells add text and documentation to your notebook, making it more informative. To add a Markdown cell, click the `+` button in the toolbar to insert a new cell, then change the cell type to "Markdown" using the dropdown menu or by pressing `Esc + M`. To create a heading and formatted text, write:

```

### Outputs

You can write to the output cells using JavaScript's standard output functions, such as `console.log`
```

To render the Markdown, press `Shift+Enter`:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rhbtpiowc90em0maii6.png)

### Importing Packages in Deno

In Deno, package import uses a URL-based syntax:

```ts
import { escape } from "https://deno.land/std/html/mod.ts";
```

Deno has a standard library available at [https://deno.land/std](https://deno.land/std). The line above imports the `escape()` function  from the `std` library. To specify the version, use:

```ts
import { escape } from "https://deno.land/std@0.224.0/html/mod.ts";
```

Deno also has a repository for third-party modules at [https://deno.land/x](https://deno.land/x). To import the `html()` function, use:

```ts
import { html } from "https://deno.land/x/display/mod.ts";
```

Deno can import `npm` modules with the `npm:` prefix. For example to import [zod](https://www.npmjs.com/package/zod):

```ts
import { z } from "npm:zod";
```

### Writing in Output cells

You can output from a Code cell by:

- Using `console.*` functions
- With the `html` function (HTML output)
- With the `md` function (Markdown output)

Example:

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8733vzdxbr2vk735y0vm.png)

### Environment variables

In Deno or Node, we use environment variables for settings. For example, Langchain's OpenAI wrappers get the key from `OPENAI_API_KEY`. Set it in a `.env` file:

```
OPENAI_API_KEY=[insert your key here]
```

Load this file with:

```ts
import "https://deno.land/std@0.215.0/dotenv/load.ts";
```

Show the value with:

```ts
console.log(Deno.env.get("OPENAI_API_KEY"));
```

### Importing local files

Deno supports local file imports. After changing an external file, restart the kernel to reload it:

```ts
import { f1 } from './1.ts';

f1();
```

Deno also supports importing JSON files:

```ts
import jsonData from "./data.json" with { type: "json" };
console.log(jsonData);
```

## Summary

Congrats on completing this little tutorial! We've covered the basics of Jupyter Lab, so in future articles, we can focus on AI-related topics. In the next article, I'll explain how I built the "Text reviewer app" prototype. It’s going to be exciting, so make sure to [subscribe](https://aiboosted.dev/)!

## 👨‍💻About the author

My name is [Gergely Szerovay](https://www.linkedin.com/in/gergelyszerovay/), I worked as a data scientist and full-stack developer for many years, and I have been working as frontend tech lead, focusing on Angular-based frontend development. As part of my role, I'm constantly following how Angular and the frontend development scene in general are evolving.

Angular has been advancing very rapidly over the past few years, and in the past year, with the rise of generative AI, our software development workflows have also evolved rapidly. In order to closely follow the evolution of AI-assisted software development, I decided to start building AI tools in public, and publish my progress on [AIBoosted.dev](https://aiboosted.dev/) , [Subscribe here](https://aiboosted.dev/) 🚀

Follow me on [Substack (Angular Addicts)](https://www.angularaddicts.com/), [Substack (AIBoosted.dev)](https://aiboosted.dev/), [Medium](https://medium.com/@GergelySzerovay), [Dev.to](https://dev.to/gergelyszerovay), [X](https://twitter.com/GergelySzerovay) or [LinkedIn](https://www.linkedin.com/in/gergelyszerovay/) to learn more about Angular, and how to build AI apps with AI, Typescript, React and Angular!