@mathvoice/react

Voice-driven LaTeX editing as a controlled React component.

Installation

npm install @mathvoice/react

Also import the KaTeX stylesheet in your app entry point:

import 'katex/dist/katex.min.css';

Usage

import { StudioEditor } from '@mathvoice/react';

export default function App() {
  return (
    <StudioEditor
      initialLatex="\frac{-b \pm \sqrt{b^2-4ac}}{2a}"
      apiEndpoint="/api/intent"
      onMutation={(result) => console.log('updated:', result.after)}
    />
  );
}

Controlled mode

const [latex, setLatex] = useState('\\frac{x}{2}');

<StudioEditor
  latex={latex}
  onMutation={(result) => setLatex(result.after)}
  editMode="ALGEBRA"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialLatex | string | \\frac{-b}{2a} | Starting LaTeX (uncontrolled) | | latex | string | — | Controlled LaTeX value | | onMutation | (result: MutationResult) => void | — | Called after every successful edit | | editMode | 'CORRECT' \| 'ALGEBRA' \| 'ASK' | 'CORRECT' | Enforced edit mode | | voiceEnabled | boolean | true | Show mic button placeholder | | onModeChange | (mode: EditMode) => void | — | Called when user switches mode | | apiEndpoint | string | '/api/intent' | Override the intent API URL | | className | string | — | CSS class on root element | | style | React.CSSProperties | — | Inline styles on root element |

API endpoint

The component posts to apiEndpoint with:

{
  "rawText": "change the numerator to x squared",
  "normalizedText": "change numerator to x squared",
  "formulaContext": { "latex": "\\frac{-b}{2a}" },
  "editMode": "CORRECT"
}

Expected response: an Intent object (see @mathvoice/react types).

License

MIT