Components

Everything an agent renders, imported from curb.

<Agent>

The root of the tree. Everything the agent says and can do renders inside it.

A changed prop swaps that provider from the next render, also during a call.

import { Agent, SystemPrompt } from "curb";
import { kugelaudio } from "curb/providers";

<Agent llm={kugelaudio.llm()} stt={kugelaudio.stt({ language: "de" })} tts={kugelaudio.tts({ language: "de" })}>
  <SystemPrompt>You answer calls for an insurance company.</SystemPrompt>
</Agent>

<SystemPrompt>

The system prompt. Its children are the prompt: nothing is added when it compiles. A voice call adds Curb’s spoken-reply rules at runtime.

<SystemPrompt>You answer calls for an insurance company. Keep every reply short.</SystemPrompt>

<Skills>

Holds the <Skill> links the model may open. It takes no props.

<Skill>

One link to a skill folder under src/agent/. The model opens it with read_skill.

<Skills>
  <Skill path="/claims" description="Reporting a claim or asking about an open one." />
</Skills>

<GlobalTools>

Tools inside it are available in every skill. It takes no props.

<GlobalTools>
  <TransferCallTool to="+493012345678" description="The caller asks for a person." />
</GlobalTools>

<Instruction>

Behavioural guidance for the model. It takes no props.

<Instruction>Never promise that a claim will be paid.</Instruction>

<Text>

Factual context. A plain string in JSX is factual context too; use <Text> for a clear boundary or to load a file.

Give src or children, never both.

<Text src="deductibles.md" />

<Tool>

What the model can call. A tool that is not rendered is not in the request (State and conditional tools).

Every tool takes these:

Then one of three ways to take input:

onSubmit and onCall return a ToolResult, { ok, message?, data? }, or a promise of one. With schema or fields, two more props apply, and confirm holds the tool until the caller agrees:

import { Tool, z } from "curb";

<Tool
  name="open_claim"
  description="Open a claim once the caller has described what happened."
  schema={z.object({ policy: z.string(), what: z.string() })}
  onSubmit={async ({ policy, what }) => {
    const id = await claims.open(policy, what);
    return { ok: true, message: `Claim ${id} is open.` };
  }}
/>

A handler can refuse its input with ToolInputError.

<Field>

One input field of a <Tool>, written as a child. It adds nothing a Zod schema does not; it is shorter for a few flat fields.

<Tool name="find_policy" description="Find a policy by its number." onSubmit={findPolicy}>
  <Field name="number" type="string" description="The policy number" required />
</Tool>

<ErrorMessage>

What the model reads when the input of a field is invalid.

<Procedure>

An ordered flow of <Step>s. The model gets one step at a time and the advanceTool to move on (Step-by-step procedures).

<Step>

One step of a <Procedure>. Its children render only during that step.

<Procedure title="Report a claim" completed={<Tool name="submit_claim" description="File the claim." onCall={submit} />}>
  <Step title="Ask what happened">Ask what happened and when.</Step>
  <Step title="Ask for the policy number">Ask for the policy number.</Step>
</Procedure>

<Mcp>

Tools from an MCP server (MCP servers).

With neither id nor url, it brings in every registered server. In <GlobalTools> the tools reach every skill; in a skill, only that skill.

<TransferCallTool>

A ready tool that puts the caller through to a number and tells the model what happened (Human handoff).

Next steps

• Hooks: what a component can read and do.
• Agents and skills: how the components fit together.