All work01 / 05
AI PRODUCT · EXPERIMENTAL BETA

ViewMesh.

Ideas you can see, change and explore.

AI interfacesInteractive systems3D

Screenshot of the project website

STAGEDeployed experimental beta
MY WORKProduct design · system architecture · AI integration · implementation
EXPLOREExplore ViewMesh
01 / WHAT I BUILT

An AI workspace that makes explanations interactive.

ViewMesh transforms natural-language questions into interactive visual explanations. GPT-6 Astra generates custom React interfaces, diagrams and procedural 3D scenes that people can manipulate through playback, sliders, selection and follow-up requests.

02 / MY ROLE

My contribution.

I designed, architected, built, tested and deployed ViewMesh independently. It is the current evolution of my earlier ViewLane direction.

  • Product direction and interaction design for a visual reasoning workspace.
  • System architecture across the application shell, generation backend and isolated browser runtime.
  • AI integration, implementation, testing and deployment of the experimental beta.
03 / HOW IT WORKS

Inside the system.

One Next.js application hosts navigation, history, authentication and purchasing. Server routes handle generation, validation, compilation, usage accounting and recovery. A separate browser runtime renders generated content and talks to the host through a MessageChannel. A custom SDK supplies timelines, path-following particles, camera transitions and spatial annotations.

TECHNOLOGY STACKTHE BUILDING BLOCKS
ApplicationNext.js 16 · React 19 · TypeScript
AIOpenAI Responses API · GPT-6 Astra · structured JSON
Visual runtimeThree.js · React Three Fiber · Drei · Motion · maath · Flubber
Code and dataesbuild / in-process WebAssembly · localStorage · private server files
Identity and paymentsAuth.js · Google OAuth · JWT sessions · Stripe Checkout
DeliveryHostinger · Node.js 22 · Node tests · TypeScript checks
SYSTEM ARCHITECTUREFROM INPUT TO OUTCOME ↘
  1. 01Question + state

    The prompt, current visualization and recent context

  2. 02GPT-6 Astra

    Preview, metadata, initial state and JSX or targeted edits

  3. 03Validate + compile

    Structured output and approved imports

  4. 04Sandboxed runtime

    React, animation and optional 3D inside an iframe

  5. 05Local exploration

    Playback, sliders, camera and follow-up edits

04 / IMPLEMENTATION

Under the hood.

The details that make the experience or workflow work in practice.

01

Streaming with recovery

Server-Sent Events deliver status, previews and results. Keep-alives, account-scoped request IDs and temporary recovery records help preserve a result when a connection breaks.

02

Controlled generated code

The server validates the model response and compiles against an import allowlist. Generated code runs in a sandboxed iframe with a Content Security Policy blocking network connections and nested frames; it does not execute in the server process.

03

Interaction stays local

Playback, scrubbing, parameter changes and camera movement happen in the browser. A follow-up can modify the visualization while retaining user state.

04

Credits and persistence

The backend reserves an estimated request cost, then settles against reported usage. Stripe signed webhooks fulfill purchases idempotently; local workspaces support import and export.

05

Storage with recovery

Workspaces live in browser localStorage. Private server files hold credit, spending and temporary recovery records, with locking and atomic writes.

AI ARCHITECTURE

Where the model fits.

Model

GPT-6 Astra through the OpenAI Responses API.

Output contract

Structured JSON carrying a provisional preview, metadata, initial state and a JSX module or targeted edits.

Context

The request can include the current visualization, saved state and recent conversation, so follow-ups work on the existing artifact.

Failure handling

Validation, compilation boundaries and recovery records protect the path from model output to a usable visual. Post-compilation failures remain an active reliability focus.

Verification

Node.js tests, TypeScript checks and production-build verification support release quality.

05 / WHY IT WORKS THIS WAY

Decisions with intent.

The thinking behind the architecture and product experience.

01 / DECISION

Generate the composition; constrain the runtime

Custom React and 3D output leaves room for novel explanations. The import allowlist, iframe, CSP and MessageChannel put a defined boundary around that freedom.

02 / DECISION

Use the model once, then let the browser work

Local playback and manipulation keep exploration responsive and avoid an AI request for every interaction.

03 / DECISION

Account for cost before generation

Reserving an estimated maximum before the model call keeps free-trial and paid allowances predictable; settlement uses reported usage afterward.

06 / THE HARD PART

Making generated interfaces both expressive and dependable.

The model can create original code and scenes, which makes visual quality possible but also creates compilation and runtime failure modes. Validation, approved imports and isolated rendering handle the execution boundary. Current work concentrates on generated-code reliability, visual quality and errors that appear after compilation.

07 / CURRENT STAGE

Where it stands.

Deployed experimental beta. Core generation, rendering, authentication and payment infrastructure is implemented.

PROOF / EXPLORE

Open the live product to explore the current workspace and visual generation flow.

Explore ViewMesh
KEEP EXPLORINGNext projectAI Growth Incubator