AI writing and creation

Writing help, generated images and prompt libraries.

3 components · 13 variants

Switch category

Writing assistant

Writing help in a document. Inline suggestions by kind, rewriting in a chosen tone, tracked changes to accept or reject, a toolbar on selected words and a draft written point by point from an outline.

Inline suggestions
Rewrite in a tone
Review changes
Selection toolbar
Draft from an outline

Props and details

Inline suggestions

Underlines by kind in the text, a card with the change and its reason beside it. Accepting replaces the words and flashes them, the rest stays in a list.

Open in Studio

Installv1.0.0

aiw add @ai-website/writing-assistant

Brings along utils, kit, icon, reveal, motion

Usage

<WritingAssistant variant="inline-suggestions" doc="…" text="…" issues={[{ id, kind, find, replace, reason }]} />

Source

Rewrite in a tone

The original beside the rewrite, tones as a choice, the new text streams in at a stable height with its word count. Replace, insert below or try again.

Open in Studio

Installv1.0.0

aiw add @ai-website/writing-assistant

Brings along utils, kit, icon, reveal, motion

Usage

<WritingAssistant variant="rewrite-tone" text="…" tones={[{ id, label, icon, result }]} />

Source

Review changes

Suggested edits as tracked changes in the text, each with accept and reject, the reason under the text and a counter in the header. Undo brings everything back.

Open in Studio

Installv1.0.0

aiw add @ai-website/writing-assistant

Brings along utils, kit, icon, reveal, motion

Usage

<WritingAssistant variant="diff-review" segments={[{ text }, { id, del, ins, reason }]} />

Source

Selection toolbar

A toolbar floats above the selected words with improve, shorten, simplify and translate, the result opens below with replace. A free question works with your own model.

Open in Studio

Installv1.0.0

aiw add @ai-website/writing-assistant

Brings along utils, kit, icon, reveal, motion

Usage

<WritingAssistant variant="selection-toolbar" text="…" selection="…" actions={[{ id, label, icon, result }]} onAction={async (action, text) => …} />

Source

Draft from an outline

Points to include on the left, the draft writes itself paragraph by paragraph when it scrolls into view. Pointing at a point lights up its paragraph.

Open in Studio

Installv1.0.0

aiw add @ai-website/writing-assistant

Brings along utils, kit, icon, reveal, motion

Usage

<WritingAssistant variant="outline-draft" doc="…" outline={[{ id, point, draft }]} />

Source

generation-gallery

Generation gallery

Generated images in four views. Four variations to pick from with vary and upscale, refining one image step by step with versions to compare, the history of past images by format and a render queue with progress and retry.

Variations
Refine step by step
History
Render queue

Props and details

Variations

A prompt with format and cost, four results as a choice. Generating again renders each tile with grain and progress, then the new images develop from blur.

Open in Studio

Installv1.0.1

aiw add @ai-website/generation-gallery

Brings along utils, kit, icon, reveal, motion

Usage

<GenerationGallery variant="variations" prompt="…" items={[{ id, prompt, media, aspect, model }]} cost="4 credits" />

Source

Refine step by step

One image large, changes as suggestions or in your own words, every result kept as a version. Holding the compare button shows the version before.

Open in Studio

Installv1.0.1

aiw add @ai-website/generation-gallery

Brings along utils, kit, icon, reveal, motion

Usage

<GenerationGallery variant="refine" steps={[{ id, label, media }]} suggestions={[{ id, label, icon }]} />

Source

History

Past images in columns by their own format, filterable. Pointing or focusing shows the prompt with a button to reuse it.

Open in Studio

Installv1.0.1

aiw add @ai-website/generation-gallery

Brings along utils, kit, icon, reveal, motion

Usage

<GenerationGallery variant="history" items={[{ id, prompt, media, aspect, time }]} />

Source

Render queue

Jobs with grain while they render, progress that moves when it scrolls into view, the next one starts on its own. A failed job says why and offers a retry.

Open in Studio

Installv1.0.1

aiw add @ai-website/generation-gallery

Brings along utils, kit, icon, reveal, motion

Usage

<GenerationGallery variant="queue" items={[{ id, prompt, media, status, progress, time }]} />

Source

prompt-library

Prompt library

A prompt library in four views. Templates by category with search and favorites, filling a template’s fields with a live preview, shared prompts with owner, version and visibility, and an editor that finds the fields as you type them.

Library
Fill a template
Shared with the team
Prompt editor

Props and details

Library

Cards by category with search, a favorites filter and the number of fields and uses. Filtering lets the cards rise again in order.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-library

Brings along utils, kit, icon, reveal, motion

Usage

<PromptLibrary variant="library" templates={[{ id, title, description, category, icon, body, uses, favorite }]} newHref="/prompts/new" onUse={(prompt) => …} />

Source

Fill a template

Fields on the left, the prompt on the right with each value lighting up as it is filled. Copy and use wait until every field is set.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-library

Brings along utils, kit, icon, reveal, motion

Usage

<PromptLibrary variant="fill-template" template={{ title, body: "… {{name}} …", variables: [{ name, label, placeholder, options }] }} />

Source

Shared with the team

Shared prompts with version, owner and who can see them. A private prompt has no link to copy.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-library

Brings along utils, kit, icon, reveal, motion

Usage

<PromptLibrary variant="team-shared" templates={[{ id, title, author, visibility, updated, version }]} />

Source

Prompt editor

Name, category and prompt. Every {{field}} typed shows up as a chip, the preview marks it and can fill in sample values. Saving counts the version up.

Open in Studio

Installv1.0.0

aiw add @ai-website/prompt-library

Brings along utils, kit, icon, reveal, motion

Usage

<PromptLibrary variant="editor" template={…} categories={["Sales", "Marketing", …]} />

Source

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to AI writing and creation on a page.

On this page

Inline suggestions

Rewrite in a tone

Review changes

Selection toolbar

Draft from an outline

Variations

Refine step by step

History

Render queue

Library

Fill a template

Shared with the team

Prompt editor

Similar components, Often combined with

Similar components

Often combined with