Skip to content

Build Your First AI-powered Web Application

Photo of Alfred Essa
Hosted By
Alfred E.
Build Your First AI-powered Web Application

Details

## Workshop Overview

In this hands-on session, we'll guide you through building a simple AI-powered web application using modern AI-coding tools. Whether you're new to programming or looking to apply your skills to AI, this session is designed to meet you where you are.

By the end of this workshop, you'll have built a complete web application that uses local AI to create an interactive haiku challenge game, and you'll understand some fundamental concepts of AI integration.

***

## What You'll Build

A Haiku Challenge App where:

  • AI offers the user a challenge theme
  • The user writes a haiku based on the challenge theme
  • AI evaluates the haiku structure and syllable count
  • AI creates its own haiku on the same theme for comparison

## Workshop Stages

### Stage 1: Understanding AI APIs

We'll start by making direct API calls to your local AI using simple command-line tools:

  • Learn what an API is and why it matters
  • Make your first AI request using `curl`
  • See exactly how applications communicate with AI models
  • Understand the anatomy of an AI request and response

Key Learning: AI integration is just HTTP requests - no magic involved!

### Stage 2: Simple Web Interface

Transform your API calls into a user-friendly web interface:

  • Build your first Streamlit web application
  • Create a simple text input and response system
  • Connect the web interface to your local AI
  • Explore how prompt engineering changes AI behavior

Key Learning: The same API can power any interface - web, mobile, or desktop.

### Stage 3: Prompt Engineering

Discover how instructions shape AI behavior:

  • Modify prompts to make AI respond only in haiku format
  • Learn the art of crafting effective AI instructions
  • See how the same model becomes a completely different application
  • Understand why prompt engineering is a crucial skill

Key Learning: The "intelligence" of your app comes from how you instruct the AI.

### Stage 4: Multi-Step AI Interactions

Create a sophisticated application using multiple AI calls:

  • Generate themes dynamically with AI
  • Evaluate user input with detailed analysis
  • Chain multiple AI requests together
  • Build interactive, stateful applications

Key Learning: Complex AI applications are built by combining simple API calls.

###

## What You'll Take Away

  • A working AI web application you built yourself
  • Understanding of AI API fundamentals that apply to any AI service
  • Prompt engineering skills for controlling AI behavior
  • Confidence to experiment with AI in your own applications
Photo of Vibe Code AI for Absolute Beginners group
Vibe Code AI for Absolute Beginners
See more events