Generation & Text Processing Hooks

See it in action

Try the Chat block and Agent & Structured Data block for working demos of these hooks.

useGenerateText

Non-streaming text generation.

import { useGenerateText } from '@localmode/react';
import { webllm } from '@localmode/webllm';

const model = webllm.languageModel('Llama-3.2-1B-Instruct-q4f16_1-MLC');

function Demo() {
  const { data, isLoading, execute } = useGenerateText({
    model,
    systemPrompt: 'You are concise.',
    maxTokens: 200,
    topP: 0.9,
    stopSequences: ['\n\n'],
  });

  return (
    <div>
      <button onClick={() => execute('Write a haiku about AI')}>Generate</button>
      {data && <p>{data.text}</p>}
    </div>
  );
}

Options

Option	Type	Description
`model`	`LanguageModel`	The language model to use (required)
`systemPrompt`	`string`	System prompt included in all requests
`maxTokens`	`number`	Maximum tokens to generate
`temperature`	`number`	Sampling temperature
`topP`	`number`	Top-p (nucleus) sampling
`stopSequences`	`string[]`	Sequences that stop generation

Chat-Style Generation

execute(prompt, options?) accepts per-call messages for multi-turn, chat-style generation — they are passed through to generateText():

const { execute } = useGenerateText({ model, systemPrompt: 'You are concise.' });

await execute('Summarize this');
await execute('Follow-up question', { messages: priorMessages });

For streaming generation, use useChat instead.

useGenerateObject

Generate typed, validated JSON objects from a language model using a Zod schema.

import { useGenerateObject } from '@localmode/react';
import { z } from 'zod';

const schema = z.object({ name: z.string(), age: z.number() });

const { data, isLoading, execute } = useGenerateObject({ model, schema });
await execute('Extract: John is 30 years old');
// data.object = { name: 'John', age: 30 }

useAnswerQuestion

Extractive question answering from a context passage.

import { useAnswerQuestion } from '@localmode/react';

const { data, execute } = useAnswerQuestion({ model });
await execute({ question: 'Who founded Apple?', context: 'Apple was founded by Steve Jobs...' });
// data.answer = 'Steve Jobs', data.score = 0.95

useAskDocument

Question answering on document images (receipts, forms, invoices).

import { useAskDocument } from '@localmode/react';

const { data, execute } = useAskDocument({ model });
await execute({ image: imageDataUrl, question: 'What is the total amount?' });
// data.answer = '$42.50'

useFillMask

Masked token prediction (BERT-style).

import { useFillMask } from '@localmode/react';

const { data, execute } = useFillMask({ model });
await execute('The capital of France is [MASK].');
// data.predictions = [{ token: 'Paris', score: 0.98 }, ...]

useSummarize

Summarize long text.

import { useSummarize } from '@localmode/react';

const { data, execute } = useSummarize({ model });
await execute('Long article text...');
// data.summary = "A concise summary..."

useTranslate

Translate text between languages.

import { useTranslate } from '@localmode/react';

const { data, execute } = useTranslate({ model });
await execute({ text: 'Hello world', targetLanguage: 'fr' });
// data.translation = "Bonjour le monde"

useExtractText

Extract text from images (OCR).

import { useExtractText } from '@localmode/react';

const { data, execute } = useExtractText({ model });
await execute(imageDataUrl);
// data.text = "Text extracted from the image"

For full API reference on these functions, see the Core docs.

Blocks

App	Description	Links
Chat (LLM Chat)	Stream text generation with useChat (supports vision image input)	Live block · Source
Agent & Structured Data (Data Extractor)	Structured output extraction with useGenerateObject	Live block · Source
Knowledge Base (LangChain RAG)	Generate RAG answers with useGenerateText	Live block · Source

Generation & Text

On this page