Trip Packing Wizard: An Open Source AI Packing List Generator

I’ve been using an AI-powered packing list generator for months. It’s genuinely useful—tell it where you’re going, how long, what kind of trip, and it generates a smart packing list with weight estimates, quantities, and even suggests how to organize everything into bags and packing cubes.

Today I’m open-sourcing a version of it that runs entirely in your browser.

Trip Packing Wizard

AI-powered packing lists with bag organization. Your API key never leaves your device.

View Project →

The Problem with AI Apps

Most AI-powered web apps have a trust problem. You paste sensitive data into a form, it goes to some server, the server calls OpenAI (or Claude or whatever), and you have no idea what happens to your data in between.

I wanted to build something different: an app where you can verify that your data stays private.

100% Client-Side

The Trip Packing Wizard stores everything in your browser’s localStorage:

• Your OpenAI API key
• Your trip data
• Your packing lists and progress

Nothing goes to any server except the OpenAI API call itself.

But wait—browsers can’t call OpenAI directly because of CORS restrictions. So there’s a tiny proxy server involved. Here’s the entire thing:

// The complete CORS proxy (~50 lines)
export default {
  async fetch(request, env) {
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'POST, OPTIONS',
          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        },
      });
    }

    const url = new URL(request.url);
    if (request.method !== 'POST' || url.pathname !== '/v1/chat/completions') {
      return new Response(JSON.stringify({ error: 'Only POST /v1/chat/completions' }), {
        status: 400,
        headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
      });
    }

    // Just forward to OpenAI - no logging, no storage
    const openaiResponse = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': request.headers.get('Authorization'),
      },
      body: request.body,
    });

    return new Response(await openaiResponse.text(), {
      status: openaiResponse.status,
      headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' },
    });
  },
};

That’s it. No logging, no storage, no analytics. You can read every line of code, deploy your own proxy if you want, and verify exactly what happens.

Features

Smart packing lists: GPT-4o generates lists based on destination, trip length, and options (work trip, beach, cold weather, formal events, etc.). It knows the formula: underwear = days + 1, socks = days + 1, and so on.

Weight estimates: Every item comes with a weight estimate in grams. The app shows total weight and weight per bag.

Bag organization: Two-column layout with a drag-and-drop interface. Start with a suitcase and backpack, add packing cubes, drag items into the right container.

Packing cubes: Create nested cubes inside your bags. Toiletry bag in the suitcase, tech pouch in the backpack—organize however works best for you.

Progress tracking: Check off items as you pack. The progress bar shows how much you’ve packed and organized.

Multiple trips: Save unlimited trips in your browser. Each gets a memorable name like “swift-dolphin” or “cosmic-aurora”.

Dark mode: Because of course.

How It Works

1. Enter your OpenAI API key (get one at platform.openai.com)
2. Fill in trip details: destination, days, and toggle options
3. Click “Generate Packing List”
4. Drag items into bags and cubes to organize
5. Check off items as you pack

Your API key is validated on login (one quick API call) and stored in localStorage. Every generate request goes directly to OpenAI through the minimal proxy.

Try It

Try it live | View source on GitHub

The whole thing is about 900 lines of vanilla HTML/CSS/JS. No build step, no npm install, no framework. Just open the HTML file.

Deploy Your Own

Fork the repo and deploy to any static host (Cloudflare Pages, Vercel, Netlify). If you want your own CORS proxy:

cd worker
npm install -g wrangler
wrangler login
wrangler deploy

Then update PROXY_URL in public/index.html.

What’s Not Included

The private version I use has some extra features:

• Todoist integration (export lists directly to Todoist)
• Trip templates (save trips as reusable templates)
• Destination autocomplete (from past trips)

But the core functionality—generating smart packing lists with AI and organizing them into bags—is all there in the open source version.

Built with vanilla JS. Uses GPT-4o. Your data stays in your browser.