fragms
Studio

The prompt box every AI app needs. It grows as you write, takes files and skills from its plus menu, picks a model by its maker, listens when you speak, and turns send into stop while the answer comes in.

Can you help me name my new app?

Of course. What does it do, and who is it for?

Colour

Plus menu

Voice

Model picker

Effort

Context ring

NeedsReactFramer MotionAuraTheme

Source
npm install framer-motion && curl --create-dirs -o src/components/composer.tsx https://fragms.simonveprek.cz/source/composer -o src/components/aura.tsx https://fragms.simonveprek.cz/source/aura -o src/components/theme.tsx https://fragms.simonveprek.cz/source/theme

Saves src/components/composer.tsx and aura.tsx beside it and theme.tsx beside it after installing what it needs. No setup, works in any React project.

import { Composer } from "@/components/composer";import { Context } from "@/components/context";const models = [  { id: "sonnet", name: "Claude Sonnet", provider: "anthropic" },  { id: "gpt", name: "GPT", provider: "openai", note: "Quick and broad" },  { id: "gemini", name: "Gemini", provider: "google", tag: "Pro" },];const skills = [  { id: "clear", name: "Clear copy", note: "Short, plain words" },  { id: "brief", name: "Brief", note: "Short answers" },];<Composer  onSubmit={({ text, files, model, skills }) => send(text, files, model, skills)}  busy={answering}  onStop={stop}  models={models}  efforts={["Low", "Medium", "High"]}  skills={skills}  tools={<Context used={tokens} limit={200_000} />}/>
onSubmit

Runs on send or Enter, with the text, the files, the chosen model, the effort and the picked skills. Shift and Enter makes a new line.

(message) => voidDefault nothing
busy

The model is answering. Send turns into stop.

truefalse
onStop

Runs when stop is pressed. Cancel the request here.

() => voidDefault nothing
models

Shows a model picker. Each has an id and a name, and can take a note, a provider for its mark, a tag, a group heading, or be disabled. Marks come built in for Anthropic, OpenAI, Google, Meta, Mistral and DeepSeek, or bring your own icon.

ComposerModel[]Default none
efforts

Levels of thinking, lightest first, picked at the foot of the model menu and shown as small bars beside the model. Left and right arrows change it while the menu is open. Set effort to false on a model that does not think.

string[]Default none
attachments

Files from the plus menu, by drop or by paste. Images show a preview.

truefalse
skills

Skills to pick from the plus menu. Picked ones sit as pills in the toolbar and go out with the message.

ComposerSkill[]Default none
actions

More rows for the plus menu, each with a label, a note, an icon and what it does.

ComposerAction[]Default none
voice

Speech to text, with Aura glowing round the edge as you speak. Hidden where the browser has no speech recognition.

truefalse
color

The send button and the focus ring.

#3d7bffany colour
tools

Anything else for the toolbar, beside send. A Context ring fits well.

ReactNodeDefault none
placeholder

The hint in the empty box.

stringDefault Ask anything
maxHeight

How tall it grows before it scrolls, in pixels.

numberDefault 200

What's new

  1. 2.0
    • Takes the Theme's accent, glow and roundness
    • Its menus stay dark on dark pages, whatever colour the text is
  2. 1.1
    • A plus menu for files and skills
    • A compact model picker with provider marks
    • An effort setting for models that think
  3. 1.0
    • First release
BeforeDiffNextContext