Portfolio

AI Overlay

This page is embedded with AI functionality, from familiar chat flows to inline editor controls and command-driven async agents.

Message UIs

There are two ways to interact with the AI on this page depending on whether you want a conversational response or async execution.

Chat Interface

The chat interface is the familiar conversational entry point with visible assistant responses.

  • ⌘J — Open the chat interface, a familiar chat experience with response messages.

Command Interface

The command interface is built for async execution. It launches agents that perform work and return tool effects instead of chat replies.

  • ⌘K — Open the command interface, which launches async agents that do not return chat messages.

Text Editors

There is only so much you can do with a textarea. Text editors are an important part of any serious AI integration. I use the Lexical library to create advanced features in an application. Features on this page are noted below.

Inline Editor Hotkeys

These hotkeys work directly inside the text editors for mentions, actions, completions, and quick field navigation.

  • @ — Link context items such as coffee beans, brewers, or specifications into your message.
  • / — For full list of specialized behaviors, to change preset prompts and tools available.
  • Shift + Tab — Rotate through specialized behaviors.
  • Tab — Accept a completion or teleport to the next field in multi-part forms.
  • Esc — Discard the current completion and generate a new one.
  • Esc + Esc — Clear out the text field.
Use the /guide action to switch into tutorial mode, ask any questions and the agent will highlight parts of the page for you! Every submission is a human-in-the-loop mechanism that sends a tool result message for multi-stepped help. The tutorial agent was built with a fast AOM tree for context to interact with the DOM. Try asking it to give you a rundown of the app.

Javascript Stack

Full-stack TypeScript with tools chosen for composability, performance, and AI-friendly transparency.

Core Stack

React Router for explicit data flow with no hidden magic — loaders, actions, and type-safe routes that AI tools can reason about. Tailwind for utility-first styling. shadcn/ui for accessible, composable primitives.

Data & Backend

Supabase with native Postgres RPCs for performance-critical paths. pgvector for embeddings, full-text search via tsvector, and row-level security for multi-tenant access control.

Search Integrations

Algolia for instant faceted search. Elasticsearch and OpenSearch for full-text and analytics workloads.

React Principles

Composable compound components, view transitions with optimistic UI, and Suspense boundaries for streaming SSR.

Theming

Catppuccin Latte and Mocha palettes mapped to semantic design tokens. Toggle the theme to see light and dark modes in action.

Primary

Interactive elements and focus

--primary-foreground

Secondary

Supporting UI surfaces

--secondary-foreground

Accent

Hover and highlight states

--accent-foreground

Muted

Subdued backgrounds

--muted-foreground

Success

Positive and confirmation states

--success-foreground

Destructive

Error and danger states

--background

Card

Card surfaces and panels

--card-foreground

Contrast

Example displays and inset panels

--contrast-background-foreground

Warm Contrast

Intentional warm accent surfaces

--warm-contrast-foreground

Warm Accent

Emphasis and warm highlight states

--warm-accent-foreground

Pour-over Assistant

Manage coffee beans, brewers, and AI-generated brew specifications.

Coffee Beans

Manage your coffee beans.

Look up a coffee to auto-fill the form
Press Tab to accept autocomplete suggestion, Esc to dismiss. Double-tap Esc to clear field
0/500
Press Enter to add a tag. Use remove buttons to delete tags.

Brewer

Manage your brewers.

Look up a brewer to auto-fill the form
Press Tab to accept autocomplete suggestion, Esc to dismiss. Double-tap Esc to clear field
0/500

User Customization

We can allow AI customization with prompt scoped to specific agentic and tab-completion fields. For example, custom guidelines that are provided when working with pour-over specifications.

Press Tab to accept autocomplete suggestion, Esc to dismiss. Double-tap Esc to clear field
Saved0/500

To help users or prevent misuse we can process their prompts. In practice, this can be run behind-the-scenes.

Specifications

Create a filter brew specification with time-keyed extraction steps, or ask the AI assistant to generate one.

Extraction Steps
Press Tab to accept autocomplete suggestion, Esc to dismiss. Double-tap Esc to clear field
0/500
Press Tab to accept autocomplete suggestion, Esc to dismiss. Double-tap Esc to clear field
0/500

No specifications yet. Try asking the assistant to create one.

Creative Writing

AI in creative spaces works differently from structured domains. Instead of extracting specifications or filling forms, the model generates divergent ideas — maximizing conceptual surface area while the writer curates, prunes, and combines. The workflow inverts control: AI proposes, the human disposes.

Ideation

The AI generates poetry ideas with zero conceptual overlap, vocabulary reuse, or thematic structure. An initial batch of 20 ideas seeds the space, then each subsequent generation adds 5 more — chained so the model avoids everything already on the table. Demo limited to 100 ideas across 20 chains.

Experience Simulation

The AI adopts the persona of Li Bai, the Tang Dynasty poet, drawing on a structured memory stream of life events. Provide emotional context and selected ideas to generate classical Chinese Gushi poetry, then translate to English.

701Age 0 · Suyab (Central Asia)

Born in the frontier. Mother dreamt of the falling white star, Venus (Tai Bai), before my birth.

I am not entirely of the central empire; I carry the wildness of the frontier and the destiny of the stars in my blood.

705Age 4 · Jiangyou, Sichuan

Family moves to Sichuan. I spend my youth reading the classics, taming wild birds, and practicing swordsmanship.

True mastery requires both the scholar's brush and the swordsman's blade. Nature is my first master.

725Age 24 · The Yangtze River

Leave home via the river. I distribute my vast family wealth to needy friends and itinerant strangers to embrace the wandering life.

Wealth is heavy; water and wine are light. To be free, one must let go of earthly anchors.

727Age 26 · Yunmeng

Marry the granddaughter of a retired prime minister. We live together, though I still wander frequently.

I desire roots and family, yet the call of the mountains and the moon always pulls me away. My heart is split.

742Age 41 · Chang'an (The Capital)

Summoned by Emperor Xuanzong. Appointed to the prestigious Hanlin Academy as a court scholar and poet.

Finally, the empire recognizes my genius. I am at the center of the world, drinking with emperors.

744 SpringAge 43 · Chang'an

Expelled from the Emperor's court. Legend says I became utterly drunk and ordered the Emperor's powerful head eunuch to pull off my boots.

Court life is a gilded cage of sycophants. I would rather be an immortal of wine than a servant to petty men.

744 AutumnAge 43 · Luoyang

Meet the younger poet Du Fu. We travel the region together, drink heavily, and write poems for one another.

In Du Fu, I find a mortal anchor—a man who feels the suffering of the world as deeply as I feel its transcendence.

756Age 55 · South China

The An Lushan Rebellion devastates the empire. I join the military staff of Prince Lin, hoping to save the fractured nation.

The Golden Age is dead. War has painted the rivers red. I must use my sword and pen for the realm.

757Age 56 · Jiujiang

Prince Lin is accused of treason and executed. I am arrested, imprisoned, and sentenced to death, later commuted to exile in deadly Yelang.

Betrayed by the state I tried to save. I am old, branded a traitor, facing a lonely death at the edge of the world.

759Age 58 · Yangtze River (En route to Yelang)

A general amnesty is declared before I reach my exile. I write 'Departing White King City at Dawn,' feeling a sudden, surreal elation.

I have survived the abyss. The river flows fast, the monkeys cry from the banks, and I am free to drink with the moon once more.

Press Tab to accept autocomplete suggestion, Esc to dismiss. Double-tap Esc to clear field
0/1000

Text Layout

DOM-free text measurement with pretext — text reflows around your cursor in real time.

A fluffy chow chow dog standing on grass

Activity

imjwang