React
Agents
React hook for running AI agents with real-time step updates, tool execution, and cancellation.
Agent Hook
See it in action
Try Research Agent and LLM Chat for working demos of these hooks.
useAgent
Run AI agents with a ReAct loop, tool execution, real-time step streaming, and cancellation.
import { useAgent } from '@localmode/react';
import { webllm } from '@localmode/webllm';
import { z } from 'zod';
const model = webllm.languageModel('Qwen3-1.7B-q4f16_1-MLC');
const tools = [
{
name: 'search',
description: 'Search for information',
parameters: z.object({ query: z.string() }),
execute: async ({ query }) => `Results for: ${query}`,
},
];
function AgentDemo() {
const { steps, result, isRunning, error, run, cancel, reset } = useAgent({
model,
tools,
maxSteps: 10,
});
return (
<div>
<button onClick={() => run('Find info about LocalMode')} disabled={isRunning}>
{isRunning ? 'Thinking...' : 'Run Agent'}
</button>
{isRunning && <button onClick={cancel}>Cancel</button>}
{steps.map((step, i) => (
<div key={i}>
<b>Step {i + 1}:</b> {step.thinking}
{step.action.type === 'tool_call' && (
<p>Tool: {step.action.toolName}({JSON.stringify(step.action.toolArgs)})</p>
)}
</div>
))}
{result && <p><b>Answer:</b> {result.finalAnswer}</p>}
{error && <p className="text-error">{error.message}</p>}
</div>
);
}Options
Prop
Type
Return Value
Prop
Type
Step Structure
Each AgentStep contains:
| Field | Type | Description |
|---|---|---|
thinking | string | The agent's reasoning for this step |
action | { type: 'tool_call', toolName, toolArgs, result } or { type: 'finish', answer } | The action taken |
durationMs | number | Time taken for this step |
Agent with Memory
Use createAgentMemory() for conversation context that persists across runs:
import { useAgent } from '@localmode/react';
import { createAgentMemory } from '@localmode/core';
const memory = await createAgentMemory({
model: embeddingModel,
maxEntries: 100,
});
function AgentWithMemory() {
const agent = useAgent({ model, tools, memory });
// Memory is automatically updated after each run
}For full agent API reference including createAgent(), runAgent(), tool definitions, and memory, see the Core Agents guide.