AI chat

Build with Vlak
Research notebookA space to work through ideas
Product thinking

A better first five minutes

Conversation notesLocal example
YouNote

Help me plan the first session for someone joining our research workspace.

Draft assistantSample

Start with one useful outcome, not a tour of every feature. 1. Ask what they want to learn. 2. Let them bring in one research note. 3. Help them turn that note into a question for the team. Leave the full workspace setup until they have something worth keeping.

Local templates, no connected model. ⌘ / Ctrl + Enter to send.

Local demoYour ideas, kept in context

Choose a conversation → send a question → inspect, save, or export the response

View source
About this download

A standalone Vite and React project using Vlak 0.5.0. Extract the ZIP, open its folder, then run npm install and npm run dev. Requires Node 22.12 or newer.

Replies are local templates. Connect a model through your own server; never put provider secrets in the browser.

Installation and base examples

Inside the interface

A focused notebook for working through product and research questions. Search or create conversations, choose a response format, and inspect the question behind each response. Save useful replies in the conversation or export the actual history as Markdown. Each conversation keeps its own messages and unfinished draft.

Messages stay in this tab. Replies are authored samples or local writing templates; no model or research service is connected. Export downloads the actual conversation as a Markdown file.

Watch the 20-second walkthrough

A short walkthrough of the working ai chat study.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed

Download the AI chat starter

Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Input filters the conversation list. Select chooses a response format, and Textarea pairs with Button in the pinned composer. Control or Command plus Enter sends the current draft.
  • Card and Description list organize the response, its starting question, and its source. Buttons save replies and export the current history as Markdown.
  • Flush conversation rows use full-surface selection. Narrow containers move from list to conversation to response details, preserving independent drafts and restoring keyboard focus.
  • On mobile, conversations open into a full-width reading screen with a pinned composer. Response details replace the conversation, expose a keyboard-scrollable text region, and return focus to their opening action. Separate drafts survive conversation changes.