AI for Web Devs: Project Introduction & Setup

By admin
In this blog post, we start bootstrapping a web development project using

Qwik
ORG

and get things ready to incorporate AI tooling from OpenAI.

If you’re anything like me, you’ve noticed the massive boom in AI technology. It promises to disrupt not just software engineering but every industry.

THEY’RE COMING FOR

US
GPE

!!!

Just kidding ;P

I’ve been bettering my understanding of what these tools are and how they work, and decided to create a tutorial series for web developers to learn how to incorporate AI technology into web apps.

In this series, we’ll learn how to integrate OpenAI‘s AI services into an application built with

Qwik
ORG

, a

JavaScript
ORG

framework focused on the concept of resumability (this will be relevant to understand later).

Here’s what the series outline looks like:

We’ll get into the specifics of OpenAI and Qwik where it makes sense, but I will mostly focus on general-purpose knowledge, tooling, and implementations that should apply to whatever framework or toolchain you are using. We’ll be working as closely to fundamentals as we can, and I’ll point out which parts are unique to this app.

Here’s a little sneak preview.

I thought it would be cool to build an app that takes

two
CARDINAL

opponents and uses AI to determine who would win in a hypothetical fight. It provides some explanation and the option to create an AI-generated image. Sometimes the results come out a little wonky, but that’s what makes it fun.

I hope you’re excited to get started because in this

first
ORDINAL

post we are mostly going to work on

Boilerplate
WORK_OF_ART

😒

Prerequisites

Before we start building anything, we have to cover a couple of prerequisites.

Qwik
ORG

is a JavaScript framework, so we will have to have Node.js (and NPM) installed. You can download the most recent version, but anything above version v16.8 should work. I’ll be using version

20
CARDINAL

.

Next, we’ll also need an

OpenAI
ORG

account to have access to their API.

At the end of the series, we will deploy our applications to a VPS (Virtual Private Server). The steps we follow should be the same regardless of what provider you choose. I’ll be using

Akamai
ORG

’s cloud computing services (formerly

Linode
ORG

). New users can go to linode.com/austingil and get $

100
MONEY

in free credits to get started with

Akamai
ORG

.


Setting Up the Qwik App
WORK_OF_ART

Assuming we have the prerequisites out of the way, we can open a command line terminal and run the command: npm create qwik@latest . This will run the

Qwik
ORG

CLI that will help us bootstrap our application.

It will ask you a series of configuration questions, then generate the project for you. Here’s what my answers looked like:

If everything worked, open up the project and start exploring.

Inside the project folder, you’ll notice some important files and folders:

/src : contains all application business logic.

: contains all application business logic. /src/components : contains reusable components to build our app with.

: contains reusable components to build our app with. /src/routes : responsible for

Qwik
ORG

’s file-based routing. Each folder represents a route (can be a page or

API
ORG

endpoint). To make a page, drop a index.{jsx|tsx} file in the route’s folder.

: responsible for

Qwik
ORG

’s file-based routing. Each folder represents a route (can be a page or

API
ORG

endpoint). To make a page, drop a file in the route’s folder. /src/root.tsx : this file exports the root component responsible for generating the HTML document root.

Start Development

Qwik uses Vite as a bundler, which is convenient because

Vite
GPE

has a built-in development server. It supports running our application locally, and updating the browser when files changes.

To start the development server, we can open our project in a terminal and execute the command npm run dev . With the dev server running, you can open the browser and head to

http://localhost:5173
LOC

and you should see a very basic app.

Any time we make changes to our app, we should see those changes reflected almost immediately in the browser.

Add Styling

This project won’t focus too much on styling, so this section is totally optional if you want to do your own thing. To keep things simple, I’ll use

Tailwind
PRODUCT

.

The

Qwik
ORG

CLI makes it easy to add the necessary changes, by executing the terminal command, npm run

qwik
ORG

add . This will prompt you with several available

Qwik
ORG

plugins to choose from.

You can use your arrow keys to move down to the

Tailwind
PRODUCT

plugin and press Enter. Then it will show you the changes it will make to your codebase and ask for confirmation. As long as it looks good, you can hit Enter, once again.

For my projects, I also like to have a consistent theme, so I keep a file in my GitHub to copy and paste styles from. Obviously, if you want your own theme, you can ignore this step, but if you want your project to look as amazing as mine, copy the styles from this file on GitHub into the /src/global.css file. You can replace the old styles, but leave the

Tailwind
PRODUCT

directives in place.

Prepare Homepage

The last thing we’ll do

today
DATE

to get the project in a good starting point is make some changes to the homepage. This means making changes to /src/routes/index.tsx .

By default, this file starts out with some very basic text, and an example for modifying the HTML <head> by exporting a head variable. The changes I want to make include:

Removing the head export.

export. Removing all text except the <h1> . Feel free to add your own page title text.

. Feel free to add your own page title text. Adding some

Tailwind
PRODUCT

classes to center the content and make the <h1> larger.

larger. Wrapping the content with a <main> tag to make it more semantic.

tag to make it more semantic. Adding Tailwind classes to the <main> tag to add some padding and center the contents.

These are all minor changes that aren’t strictly necessary, but I think it will provide a nice starting point for building out our app in the next post.

Here’s what the file looks like after my changes.

import { component$ } from "@builder.io/qwik"; export default component$(() => { return ( <main class="max-w-4xl mx-auto p-4"> <h1 class="text-6xl">Hi 👋</h1> </main> ); });

And in the browser, it looks like this:

Conclusion

That’s all we’ll cover

today
DATE

. Again, this post was mostly focused on getting the boilerplate stuff out of the way so that the next post can be dedicated to integrating OpenAI’s API into our project.

With that in mind, I encourage you to take a moment to think about some

AI
ORG

app ideas that you might want to build. There will be a lot of flexibility for you to put your own spin on things.

I’m excited to see what you come up with, and if you would like to explore the code in more detail, I’ll post it on my GitHub account at github.com/austingil/versus.

Thank you so much for reading. If you liked this article, and want to support me, the best ways to do so are to share it, sign up for my newsletter, and follow me on Twitter.

Originally published on austingil.com.