Codalyst Tech
AI ProductLive Demo

Nova

AI-powered writing studio with document library, rich editor, and streaming AI assistant

Client

Interactive Demo

Next.js 16TypeScriptTailwind CSS v4Framer MotionClaude API patterns
Nova project

Docs + Editor + AI

State areas

Write, Rewrite, Tone

AI modes

The Problem

What needed solving

Content teams and solo creators need an AI writing tool that feels native , not a chat window bolted onto a text area. The editor, document management, and AI must work as one cohesive product.

The Solution

How we approached it

A two-panel writing studio with a document library sidebar, a rich text editor with formatting controls, an AI suggestion toolbar, and a streaming AI chat panel that writes, rewrites, and adjusts tone on demand.

Technical Approach

How we built it

Nova manages three parallel state areas simultaneously: the document library (list of documents, active selection, search filter), the rich text editor (content, formatting state), and the AI chat panel (conversation history, streaming state, active prompt). Each lives in its own context provider, with a coordination layer that writes the AI's generated response directly into the active document in the editor when the user accepts a suggestion.

The simulated AI streaming effect is implemented using setInterval with a token queue. When the AI responds, the full response string is split into tokens, pushed onto a queue, and dequeued one token per interval tick — creating the visual impression of real model streaming. The interval speed is varied with a small random offset per tick to avoid the mechanical regularity that makes fake streaming feel obviously faked.

The rich text editor is a controlled textarea with a formatting toolbar that wraps selected text in Markdown syntax (** for bold, * for italic, > for blockquote). A custom useSelection hook tracks the selection range in the textarea, so toolbar actions operate on the currently highlighted text rather than the full document. Multiple documents can be open simultaneously, each with its own content stored in the library state and swapped into the editor when the active document changes.

Outcomes

What we delivered

An AI writing studio demo that demonstrates our capacity to build AI-native products with streaming UX, complex state management, and editor-class interfaces.

Streaming AI text generation with loading states

Document library with search and tagging

Dark mode: GitHub-style near-black palette

Toolbar with bold, italic, list, and quote formatting

Technologies Used

Next.js 16TypeScriptTailwind CSS v4Framer MotionClaude API patterns

See it live

This is a fully interactive demo, not a static mockup. Click around, try all the features.

Open Nova Demo

nova.codalyst-tech.com

Want Something Like This?

We build production-quality products for clients worldwide: SaaS dashboards, POS systems, AI tools, and more.