8KG

A carry-on packed by you and the AI that already knows you.

Comment

Inspiration

Most “AI personalization” demos are recommendation lists or theme pickers. They ask the user to repeat preferences the assistant may already understand, then return another block of text. We wanted to test a more tangible collaboration: can an AI contribute personal judgment while a website contributes precise domain constraints, without the website receiving the user’s profile?

Packing a carry-on makes that boundary immediately visible. The AI can decide what matters for this person right now; the browser knows every item’s weight and physical footprint and can make those choices fit.

What it does

8KG is an interactive carry-on shared by a person and their AI.

The user copies one short request into the AI connected to the page. Through WebMCP, the AI reads an anonymous item catalog and sends back only accepted item IDs. The browser then packs those items into a 6 × 8 spatial grid while enforcing an 8 kg cabin limit. The result appears immediately as a visual suitcase rather than a text recommendation.

The collaboration continues after the first pack. A user can remove an item or mark it Keep this. A later AI repack sees the public bag state and must work around the user’s locked decision. The page protects those locks even if the model omits them.

No prompt, identity, destination, conversation history, private facts, or AI reasoning is accepted by the website. There is no application backend or embedded LLM. Bag state lives only in the current tab.

How we built it

  • React 19 and TypeScript for the client-only application.
  • WebMCP tools registered through feature-detected document.modelContext or navigator.modelContext.
  • A constrained catalog of 18 items with weight and grid dimensions.
  • A deterministic first-fit packing engine that validates weight, space, unique IDs, and user locks.
  • Six narrow tools: get_available_items, get_bag_state, pack_bag, add_items, remove_items, and reset_bag.
  • ChatGPT Sites for hosting, with no database, API key, analytics, cookies, or server-side profile.

The visual controls and WebMCP tools call the same functions in lib/packing.ts. The model never generates HTML, CSS, or JavaScript and cannot bypass the browser’s constraints.

Challenges

The hardest part was finding a use of AI memory that felt meaningfully different from ordinary controls. A user can manually select items, so the value could not be “AI clicked buttons for me.” The stronger interaction is mixed-initiative: the AI makes a context-sensitive first proposal, the user expresses a hard preference by locking an item, and the AI adapts around that decision.

We also had to keep the privacy story technically honest. The page cannot pull ChatGPT memory. The user deliberately asks the connected AI to act, reviews the tool call, and sends only catalog IDs. Tool schemas reject open-ended text and the page stores nothing after the tab closes.

Accomplishments that we're proud of

  • One WebMCP call causes an obvious, physical-looking transformation instead of a subtle theme change.
  • The full experience works without an application backend.
  • User locks are enforced by deterministic page logic, not model promises.
  • The interface explains the data boundary before the user copies the request.
  • The same flow works in ChatGPT’s in-app browser and responsive mobile layouts.

What we learned

WebMCP is most compelling when the website and the model bring different capabilities. The model should contribute judgment and context; the page should expose trustworthy state, enforce domain rules, and render the consequence. Narrow tools and shared business logic make that collaboration understandable and testable.

What's next for 8KG

  • Airline-specific cabin limits and baggage policies.
  • Trip-length and weather-aware catalogs without sending destinations to the page.
  • Drag-and-drop manual arrangement with AI repacking around pinned positions.
  • A “why this fits” summary generated in the assistant, while keeping reasoning out of the website.
  • WebMCP evals for weight-limit, user-lock, and privacy-boundary scenarios.

Built With

Share this project:

Updates

Submission history