AI for Web Devs: Project Introduction & Setup

Austin Gil - Jan 12 - - Dev Community

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!!!

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, a JavaScript framework focused on the concept of resumability (this will be relevant to understand later).

Here’s what the series outline looks like:

  1. Intro & Setup

  2. Your First AI Prompt

  3. Streaming Responses

  4. How Does AI Work

  5. Prompt Engineering

  6. AI-Generated Images

  7. Security & Reliability

  8. Deploying

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.

Screenshot of versus.austingil.com

I thought it would be cool to build an app that takes two 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 post we are mostly going to work on…

Boilerplate 😒

Prerequisites

Before we start building anything, we have to cover a couple of prerequisites. Qwik 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.

Next, we’ll also need an OpenAI 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’s cloud computing services (formerly Linode). New users can go to linode.com/austingil and get $100 in free credits to get started with Akamai.

Setting Up the Qwik App

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 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:

Let's create a  Qwik App  ✨ (v1.2.7)Where would you like to create your new project? (Use '.' or './' for current directory): versusCreating new project in /home/austin/code/versusSelect a starter: Empty AppWould you like to install npm dependencies? YesInitialize a new git repository? YesFinishing the install. Wanna hear a joke? YesWhat did the big flower say to the littler flower? Hi, bud!

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.

  • /src/components: contains reusable components to build our app with.

  • /src/routes: responsible for Qwik’s file-based routing. Each folder represents a route (can be a page or API endpoint). To make a page, drop a index.{jsx|tsx} 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 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 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.

The Qwik CLI makes it easy to add the necessary changes, by executing the terminal command, npm run qwik add. This will prompt you with several available Qwik plugins to choose from.

What integration would you like to add?- Adapter: Cloudflare Pages- Adapter: AWS Lambda- Adapter: Azure Static Web Apps- Adapter: Netlify Edge- Adapter: Vercel Edge- Adapter: Google Cloud Run server- Adapter: Deno Server- Adapter: Node.js Express Server- Adapter: Node.js Fastify Server- Adapter: Node.js Server- Adapter: Static site (.html files)- Integration: Builder.io- Integration: Cypress- Integration: Storybook- Integration: Auth.js (authentication)- Integration: Orama (full-text search engine)- Integration: PandaCSS (styling)- Integration: Playwright (E2E Test)- Integration: PostCSS (styling)- Integration: Prisma (Database ORM)- Integration: Styled-Vanilla-Extract (styling)- Integration: Tailwind (styling) (Use Tailwind in your Qwik app)- Integration: Turso (database)- Integration: Vitest (Unit Test)

You can use your arrow keys to move down to the Tailwind 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.

Ready? Add tailwind to your app?Modify- package.json- .vscode/settings.json- src/global.cssCreate- postcss.config.js- tailwind.config.jsInstall npm dependencies:- autoprefixer ^10.4.14- postcss 8.4.27- tailwindcss 3.3.3Ready to apply the tailwind updates to your app?- Yes looks good, finish update!

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 directives in place.

Prepare Homepage

The last thing we’ll do today 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.

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

  • Adding some Tailwind classes to center the content and make the <h1> larger.

  • Wrapping the content with a <main> 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>
  );
});
Enter fullscreen mode Exit fullscreen mode

And in the browser, it looks like this:

Conclusion

That’s all we’ll cover today. 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 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.

  1. Intro & Setup

  2. Your First AI Prompt

  3. Streaming Responses

  4. How Does AI Work

  5. Prompt Engineering

  6. AI-Generated Images

  7. Security & Reliability

  8. Deploying

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .