Nexel

Inspiration

AI can generate impressive frontend code, but it still spends too many tokens producing repetitive HTML, CSS, JavaScript, event handlers, and state synchronization.

Even when a generated page looks correct, its behavior is often difficult to inspect or safely modify. We created Nexel to let AI describe what an interface means and connect its behavior directly.

What It Does

Nexel is a semantic Python UI system built around one interaction model:

hit → fn → fill

A real user action triggers a real Python function, and the result fills real interface elements. Nexel generates a working local application and exposes the same interaction structure through Inspect2D.

Our demo is a responsive, persistent task board where users can:

• Create tasks
• Move tasks
• Complete and reopen tasks
• Delete tasks

Every interaction is visible in Inspect2D. Connections can be:

1. Edited visually
2. Reviewed as a source diff
3. Applied at runtime
4. Saved back into Python

Application developers do not need to write custom HTML, CSS, or JavaScript.

How We Built It

We built Nexel around a Python semantic component system and an explicit action table.

Python defines:

• The interface
• Application functions
• Persistent state
• hit → fn → fill connections

Nexel projects this description into a browser runtime that handles user events and structured UI updates.

The same action table powers Inspect2D, ensuring that the visual graph represents the application’s real behavior rather than serving as separate documentation.

We also implemented:

• Local persistence
• Stable identities for dynamic items
• Source-diff generation
• Runtime rewiring
• Safe source write-back

Challenges We Ran Into

The greatest challenge was keeping the visual graph both complete and understandable.

A single function may update several interface elements. Hiding those writes would make the inspector inaccurate, while displaying every detail equally can make the graph overwhelming.

We also had to:

• Preserve stable identities for dynamic items
• Restore persistent data on the first page load
• Validate every function’s declared write targets
• Translate visual wiring changes back into readable Python

Accomplishments That We’re Proud Of

We are proud that Nexel uses the same wiring as both:

• Executable behavior
• An editable explanation of the application

Our demo is not a static mockup. It is a functional, persistent local application whose interactions can be:

• Used normally
• Inspected visually
• Modified as connections
• Reviewed as source changes
• Saved back into Python

Nexel shows that semantic generation can reduce frontend boilerplate without sacrificing real functionality or transparency.

What We Learned

We learned that visual programming becomes much more valuable when the visualization and runtime share the same source of truth.

We also learned that semantic components give AI a better abstraction level. Instead of repeatedly generating low-level frontend scaffolding, the model can focus on:

• User intent
• Application behavior
• Meaningful interface structure

What’s Next for Nexel

Next, we plan to:

• Expand Nexel’s semantic component library
• Improve the grouping and editing of complex interaction graphs
• Provide reusable patterns for common applications
• Connect behavior to existing HTML
• Support richer local applications
• Bring the same semantic interaction model to VS Code extensions and other development environments

source code：https://github.com/lo2589/Nexel

Built With

• codex
• css3
• developer-tools
• domain-specific-language
• gpt-5.6
• html5
• javascript
• json
• jsonl
• local-first
• low-code
• ollama
• openai
• python
• server-sent-events
• visual-programming
• vscode
• vscode-extension