# Writing Tools 4 on-device blocks in the Writing Tools category — each installs and runs on its own, entirely in the browser. ## Write Rewrite or improve a draft with an AI edit you review as a before/after diff, then accept or reject it. Use quick presets or write your own instructions, with a live word count. It uses your browser's built-in AI when available, or a small downloadable model otherwise, and nothing downloads until you ask. **Install** ```bash npx shadcn@latest add @localmode/ui/blocks/writing-tools/write ``` **Full block (all files):** https://localmode.ai/r/ui/blocks/writing-tools/write.json ```tsx 'use client'; /** * @file write.tsx * @description Write block — a draft editor with live length feedback, preset + free-text edit instructions with prompt improvement, and an AI edit reviewed as a before/after diff with explicit Accept/Reject (Prompt API ⇄ Llama-3.2-1B fallback). */ import { useEffect, useState } from 'react'; import { useGenerateText, useProviderFallback, toAppError, providerName, type ResolvedModel, } from '@localmode/react'; import type { LanguageModel } from '@localmode/core'; import { isWebGPUSupported } from '@localmode/core'; import { CharLimitIndicator } from '@/components/char-limit-indicator'; import { PromptEnhanceButton } from '@/components/prompt-enhance-button'; import { CodeDiffViewer } from '@/components/code-diff-viewer'; import { CapabilityGate } from '@/components/capability-gate'; import { ProviderBadge } from '@/components/provider-badge'; import { ChromeAIDownloadGate } from '@/components/chrome-ai-download-gate'; import { ErrorAlert } from '@/components/error-alert'; import { cn } from '@/lib/utils'; const EDIT_ENGINE_MODEL_ID = 'onnx-community/Llama-3.2-1B-Instruct-ONNX'; const EDIT_ENGINE_MODEL_SIZE = '~380 MB'; const EDIT_PRESETS = [ 'Fix grammar and spelling', 'Make it more concise', 'Use a friendlier tone', 'Make it more formal', ]; const WRITE_DEFAULT_TARGET = 280; const WRITE_SAMPLE = 'Artificial intelligence has transformed how we interact with technology. From voice assistants to recommendation systems, AI is now embedded in everyday tools. Recent advances in on-device AI have made it possible to run sophisticated models directly in web browsers, eliminating the need for cloud APIs and ensuring user data never leaves the device. This shift toward local-first AI represents a fundamental change in how we build privacy-respecting applications.'; function buildEditPrompt(instruction: string, draft: string): string { return `You are a writing assistant. Rewrite the text below according to the instruction. Output only the rewritten text, with no preamble or explanation.\n\nInstruction: ${instruction}\n\nText:\n${draft}`; } function buildEnhancePrompt(instruction: string): string { return `Rewrite the following editing instruction so it is clearer and more specific. Output only the improved instruction, on a single line, with no preamble.\n\nInstruction: ${instruction}`; } function cleanProposal(text: string): string { let out = text.trim(); out = out.replace(/^(here('| i)s|sure[,!]?|rewritten text|revised text)[^\n:]*:\s*/i, ''); if ((out.startsWith('"') && out.endsWith('"')) || (out.startsWith('“') && out.endsWith('”'))) { out = out.slice(1, -1).trim(); } return out; } export function WriteBlock() { const [draft, setDraft] = useState(''); const [target, setTarget] = useState(WRITE_DEFAULT_TARGET); const [instruction, setInstruction] = useState(EDIT_PRESETS[0]); const [proposal, setProposal] = useState(null); const [device, setDevice] = useState<'webgpu' | 'wasm' | null>(null); const [resolved, setResolved] = useState | null>(null); const { resolveEditEngine, chromeAvailability, refreshChromeAvailability, requestChromeDownload, chromeDownloadProgress, downloadingCapability, error: providerError, } = useProviderFallback({ loadChromeAI: () => import('@localmode/chrome-ai'), loadTransformers: () => import('@localmode/transformers'), }); useEffect(() => { let alive = true; void isWebGPUSupported().then((ok) => { if (alive) setDevice(ok ? 'webgpu' : 'wasm'); }); return () => { alive = false; }; }, []); const editAvailability = chromeAvailability.edit ?? 'unsupported'; useEffect(() => { void refreshChromeAvailability('edit'); }, [refreshChromeAvailability]); useEffect(() => { if (!device) return; let alive = true; void resolveEditEngine({ fallbackModelId: EDIT_ENGINE_MODEL_ID, device }).then((r) => { if (alive) setResolved(r); }); return () => { alive = false; }; }, [device, resolveEditEngine, editAvailability]); const { data, error, isLoading, execute, cancel, reset } = useGenerateText({ model: resolved?.model as LanguageModel, maxTokens: 220, temperature: 0.4, }); const ready = !!resolved; const appErr = toAppError(error); const modelId = data?.response.modelId ?? resolved?.modelId ?? null; const runEdit = async () => { if (!draft.trim() || !instruction.trim() || !ready || isLoading) return; setProposal(null); const r = await execute(buildEditPrompt(instruction, draft)); if (r) setProposal(cleanProposal(r.text)); }; const accept = () => { if (proposal === null) return; setDraft(proposal); setProposal(null); reset(); }; const reject = () => { setProposal(null); reset(); }; return (

Write - AI-edit draft editor. Models load only behind an explicit action.

{ void requestChromeDownload('edit'); }} />
{modelId ?? ''} WebGPU unavailable - the edit engine runs on WASM (slower). } pending={Checking WebGPU…} > WebGPU detected - the edit engine is GPU-accelerated.
{}
Draft