Radiant / Gen-AI Interaction Platform

Setrt

Poland

Branding

ABOUT PROJECT

Breaking away from monotonous AI chat interfaces to build an open, canvas-driven interactive environment for natural language software creation. Radiant is an advanced artificial intelligence platform dedicated to democratizing code production through intuitive natural language inputsa workflow often referred to as "vibe coding". They wanted a digital product that moved beyond the typical, uninspiring "ChatGPT clone" chat box. Radiant hired Clonex to design and engineer an interactive web canvas. The platform treats software construction like digital architecture, turning complex AI prompt strings into physical, interactive blocks that users can manipulate on an infinite workspace.

THE CHALLENGES

The difficulty lay in visually representing non-linear AI reasoning step-by-step, ensuring that streaming data structures render beautifully without breaking user focus. When users generate full software blocks using natural language, an enormous amount of code structure, logic, and state changes happen simultaneously in the background. Displaying this massive stream of data in a simple text container forces the user into an active scrolling loop, completely breaking their spatial awareness of the project. Furthermore, because large language models return text in irregular streaming fragments, the user interface must dynamically resize and recalculate layout columns in real time, which can trigger sudden, jarring layout shifts.

man in black crew neck t-shirt wearing black sunglasses holding black smartphone

THE APPROACH

We engineered a structural workspace that handles real-time data streams through smoothly morphing UI blocks, utilizing Next.js and the Vercel AI SDK for instant layout adaptation. Structured Spatial Canvas Clonex designed a minimal, canvas-based UI architecture utilizing TypeScript and Next.js. We replaced the linear chat system with an asymmetric layout grid where inputs live on a persistent sidebar, and outputs materialize as distinct visual nodes on a clean, infinite canvas.

A smartphone is showing an ai assistant's interface.

Working with large language models often leaves users trapped in monotonous chat interfaces. Radiant breaks this paradigm by introducing an ultra-clean, node-based interactive workspace built with Next.js and TypeScript. Clonex leveraged the Vercel AI SDK to feed real-time streaming text changes directly into the UI, while Framer Motion coordinates smooth transitions as abstract, layout-driven blocks morph based on user intent. The final application bridges advanced engineering with accessible design, allowing users to build complex software tools visually.



EXPLORE MORE

Get Template

Create a free website with Framer, the website builder loved by startups, designers and agencies.