ClaudeApi Component
Not Yet Implemented. This component is reserved for future use. It currently renders a <claude-api> element but does not execute any API calls. Use the <Claude> component for working agent execution.
<ClaudeApi> component provides an alternative way to execute Claude using the Anthropic SDK directly, rather than through the Claude Code CLI.
This component is for scenarios where you need direct API access. For most use cases, the standard <Claude> component is recommended as it provides full tool access and better integration with Smithers features.
Usage
import { ClaudeApi } from "smithers-orchestrator";
<ClaudeApi model="claude-sonnet-4">
Generate a haiku about programming.
</ClaudeApi>
Props
The Anthropic model ID to use (e.g., “claude-sonnet-4”, “claude-opus-4”).
Maximum number of conversation turns.
Tool names to make available.
onFinished
(result: ClaudeApiResult) => void
Callback when execution completes. See ClaudeApiResult for the result shape. Callback when an error occurs.
The prompt to send to Claude.
ClaudeApiResult
The onFinished callback receives a result object with the following shape:
interface ClaudeApiResult<T = unknown> {
/** Raw text output from the agent */
output: string
/** Structured output (if JSON output was requested or schema was provided) */
structured?: T
/** Token usage */
tokensUsed: {
input: number
output: number
}
/** Number of turns used */
turnsUsed: number
/** Reason the agent stopped */
stopReason: 'completed' | 'stop_condition' | 'error' | 'cancelled'
/** Execution duration in milliseconds */
durationMs: number
}
AgentResult type exported from smithers-orchestrator.
When to Use ClaudeApi vs Claude
| Feature | Claude | ClaudeApi |
|---|
| Tool access | Full CLI tools | Custom tools only |
| File editing | Built-in | Manual |
| Database logging | Automatic | Manual |
| MCP support | Yes | No |
| Structured output | Yes | Manual |
| Best for | Agentic tasks | Simple completions |
Use Claude for:
- File editing and code modifications
- Multi-turn agentic workflows
- Tasks requiring CLI tools (Bash, Read, Write, etc.)
- Workflows that need database logging
Use ClaudeApi for:
- Simple text generation
- Custom API integrations
- Direct control over the Anthropic SDK
- Non-agentic tasks
Example
function SimpleCompletion() {
const [result, setResult] = useState<string | null>(null);
return (
<SmithersProvider db={db} executionId={executionId}>
<ClaudeApi
model="claude-haiku-3"
onFinished={(r) => setResult(r.output)}
onError={(e) => console.error(e)}
>
Summarize the key points of functional programming in 3 bullet points.
</ClaudeApi>
<If condition={result !== null}>
<div>Result: {result}</div>
</If>
</SmithersProvider>
);
}
Environment Setup
ClaudeApi requires an Anthropic API key:
export ANTHROPIC_API_KEY="your-api-key"
Unlike the standard Claude component which uses Claude Code’s subscription, ClaudeApi requires your own Anthropic API key and will be billed to your account.
