SmartParaphraseBox

Ready-made input that wraps SmartRewrite with a paraphrase button. Tap the button to rewrite in place. Auto-accepts when complete (configurable via onRewriteAccept).

Preview

Tap the sparkle button to rewrite.

import { useState } from 'react';
import { SmartProvider, SmartParaphraseBox } from '@extedcoud/smart-components';
import { createMockClient } from '@extedcoud/smart-components/adapters/mock';

const client = createMockClient({
complete: async (req) => 'Please let me know if there is anything else you need.',
});

export function Example() {
const [value, setValue] = useState('lemme know if you need anything else');
return (
  <SmartProvider client={client}>
    <SmartParaphraseBox
      value={value}
      onChange={setValue}
      instruction="Rewrite in a polished, professional tone."
    />
  </SmartProvider>
);
}

import { useState } from 'react';import { SmartProvider, SmartParaphraseBox } from '@extedcoud/smart-components';import { createMockClient } from '@extedcoud/smart-components/adapters/mock';const client = createMockClient({complete: async (req) => 'Please let me know if there is anything else you need.',});export function Example() {const [value, setValue] = useState('lemme know if you need anything else');return (  <SmartProvider client={client}>    <SmartParaphraseBox      value={value}      onChange={setValue}      instruction="Rewrite in a polished, professional tone."    />  </SmartProvider>);}

Styled example

A pill input with a gradient border and a circular violet→fuchsia sparkle button.

Tap ✦ to polish to a professional tone.

'use client';
import { useState } from 'react';
import { SmartProvider, SmartParaphraseBox } from '@extedcoud/smart-components';
import { makeRewriteMock } from '@/lib/mock-client';

const client = makeRewriteMock();

export default function SmartParaphraseBoxStylized() {
  const [value, setValue] = useState('lemme know if you need anything else');
  return (
    <SmartProvider client={client}>
      <div className="w-full max-w-md">
        <div className="rounded-2xl bg-gradient-to-r from-fuchsia-500 via-violet-500 to-indigo-500 p-[1.5px] shadow-lg shadow-violet-500/15">
          <div className="rounded-[14px] bg-fd-card">
            <SmartParaphraseBox
              value={value}
              onChange={setValue}
              instruction="Rewrite this text in a polished, professional tone. Keep the same meaning."
              wrapperClassName="flex items-center gap-2 px-3 py-2"
              className="flex-1 bg-transparent text-base text-fd-foreground outline-none placeholder:text-fd-muted-foreground"
              buttonClassName="inline-flex h-9 min-h-[44px] w-9 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 to-violet-500 text-white shadow transition hover:scale-105 disabled:opacity-50"
              buttonAriaLabel="Polish text"
            />
          </div>
        </div>
        <p className="mt-2 px-1 text-xs text-fd-muted-foreground">
          Tap ✦ to polish to a professional tone.
        </p>
      </div>
    </SmartProvider>
  );
}

'use client';import { useState } from 'react';import { SmartProvider, SmartParaphraseBox } from '@extedcoud/smart-components';import { makeRewriteMock } from '@/lib/mock-client';const client = makeRewriteMock();export default function SmartParaphraseBoxStylized() {  const [value, setValue] = useState('lemme know if you need anything else');  return (    <SmartProvider client={client}>      <div className="w-full max-w-md">        <div className="rounded-2xl bg-gradient-to-r from-fuchsia-500 via-violet-500 to-indigo-500 p-[1.5px] shadow-lg shadow-violet-500/15">          <div className="rounded-[14px] bg-fd-card">            <SmartParaphraseBox              value={value}              onChange={setValue}              instruction="Rewrite this text in a polished, professional tone. Keep the same meaning."              wrapperClassName="flex items-center gap-2 px-3 py-2"              className="flex-1 bg-transparent text-base text-fd-foreground outline-none placeholder:text-fd-muted-foreground"              buttonClassName="inline-flex h-9 min-h-[44px] w-9 items-center justify-center rounded-full bg-gradient-to-br from-fuchsia-500 to-violet-500 text-white shadow transition hover:scale-105 disabled:opacity-50"              buttonAriaLabel="Polish text"            />          </div>        </div>        <p className="mt-2 px-1 text-xs text-fd-muted-foreground">          Tap ✦ to polish to a professional tone.        </p>      </div>    </SmartProvider>  );}

Custom button

<SmartParaphraseBox
  value={v}
  onChange={setV}
  renderButton={({ onClick, status, disabled }) => (
    <button onClick={onClick} disabled={disabled}>
      {status === 'loading' ? '…' : 'Rewrite'}
    </button>
  )}
/>

Streaming first paint

<SmartParaphraseBox value={v} onChange={setV} stream />

While streaming, the input shows the partial rewrite (read-only) — accepted automatically on complete.

Props

Prop	Type	Default	Description
value*	string	—	Controlled input value.
onChange*	(value: string) => void	—	Called on user input and when a rewrite is accepted.
context	string	—	Optional context string included in the prompt.
instruction	string	—	Default rewrite instruction.
stream	boolean	false	Use the streaming capability for faster first paint.
maxTokens	number	256	Max tokens for the rewrite call.
temperature	number	0.4	Sampling temperature.
disableAI	boolean	false	Hide the button and no-op imperative rewrite().
icon	ReactNode	—	Custom icon for the button. Defaults to a built-in sparkle SVG.
buttonAriaLabel	string	'Paraphrase'	Accessible label for the button.
buttonClassName	string	—	Class name applied to the button.
buttonStyle	CSSProperties	—	Inline style applied to the button.
renderButton	(args: ParaphraseButtonRenderArgs) => ReactNode	—	Full custom render for the button.
wrapperClassName	string	—	Class name applied to the outer wrapper.
onRewriteStart	() => void	—	Called when a rewrite starts.
onRewriteAccept	(rewrite: string) => void	—	Called when a rewrite is accepted, with the rewritten text.
onRewriteError	(error: Error) => void	—	Called when a rewrite errors.
...rest	InputHTMLAttributes<HTMLInputElement>	—	All native input props minus value, onChange, defaultValue.