</>
Reusable components
Define an agent once, pass it props, and use it in different workflows. Components can return text, JSX, or async results.
Build AI agents
with <JSX />
AML is a TypeScript framework for building AI agents. Write reusable JSX components to connect agents, give them tools, and pass their results to the next step.
WeeklyStandup.tsx
resolving running resolvedcycle 1
<Agent provider={codex}>
<Mcp use={slack} />
post our weekly standup:
{synthesis}
</Agent>
why aml
Your agent sdk isn’t enough.
Most AI SDKs are designed around chat: send a message, call a model, stream a response. Agentic workflows need much more around that conversation. Agents need tools, permissions, somewhere to run, and files they can keep between runs. AML brings those pieces together in reusable JSX components, with TypeScript for branching and data flow.
Your choice of agent
Use OpenCode, Codex, GitHub Copilot, GLM, or Pi. Choose a provider for each agent in the tree.
▣
Execution and storage
Run commands in a Sandbox and keep files between runs with a Workspace. AML acquires and releases both.
See what happened
Inspect agent turns, tool calls, timings, and failures through structured traces. Set limits and cancel runs from your application.
how it works
Results flow up. Scope flows down.
AML resolves nested components before the agent that consumes their results. JSX defines dependencies; TypeScript handles branching and data transformation. <Parallel /> runs independent branches concurrently.
Tools are granted to individual agents. Sandboxes and workspaces apply to the components nested inside them, and AML handles their setup and cleanup.
parallel-review.tsx
explicit concurrency, composed results
import { Agent, Parallel, System, Tool } from "@aml-jsx/sdk"
function CorrectnessLane() {
return <Agent provider={OpenCode}>
<Tool use={ReadSource} />
Review src/index.ts for correctness defects.
</Agent>
}
function MaintainabilityLane() {
return <Agent provider={OpenCode}>
Review src/index.ts for maintainability issues.
</Agent>
}
function Review() {
return (
<Agent provider={OpenCode}>
<System>Synthesize evidence without inventing findings.</System>
<Parallel>
<CorrectnessLane />
<MaintainabilityLane />
</Parallel>
Produce the final review.
</Agent>
)
}
const result = await runtime.evaluate(<Review />)Simple by design. Flexible by default.
Start with an agent. Add a Sandbox when it needs an execution environment, and a Workspace when its files need to survive the run. Configure each through its own provider.
- <Agent />
- Runs a coding agent with the prompt and tools you provide. Nest agents to pass results between them.
- <Sandbox />
- Provides a place to run commands, from a local process to a container or remote environment.
- <Workspace />
- Keeps files between runs. Choose a storage provider and when changes should be saved.
- Your app sends the authored JSX tree to the AML Runtime.
- The runtime evaluates Agents using their selected providers.
- Built-in coding-agent providers use the shared ACP engine to run agent sessions.
- When a Sandbox is configured, the agent process runs in that execution environment.
- When a Workspace is configured, its files are loaded and saved according to its save policy.
integrations
Bring your own agent, sandbox, or storage.
Use OpenCode, Codex, GitHub Copilot, GLM, or Pi with local execution, Docker, Daytona, or Modal. Keep files locally or in S3-compatible storage. Providers let you change the agent, execution environment, or storage without rewriting the workflow.
agents
harnesses & model runtimes
future →
providers
all from @aml-jsx/sdk
agent
sandbox
workspace
OpenCode × Local × S3
agent · sandbox · workspace
main.tsx
import {
Agent, AmlRuntime, Sandbox, Workspace,
opencodeAgent,
localSandbox,
s3Workspace,
} from "@aml-jsx/sdk"
const provider = opencodeAgent({ model: "opencode-go/deepseek-v4-flash" })
const sandbox = localSandbox({ workspace: "./project" })
const workspace = s3Workspace({ bucket: "agent-workspaces" })
const runtime = new AmlRuntime()
await runtime.evaluate(
<Workspace id="thread-42" load save={{ include: ["**/*.md"] }} provider={workspace}>
<Sandbox provider={sandbox} access="read-write">
<Agent provider={provider}>Summarize this repository.</Agent>
</Sandbox>
</Workspace>,
)Provider combinations require compatible agent executables, sandbox images, and credentials. Check provider compatibility →
bring your own
The same contracts are open to custom providers.
reference
The components and APIs
Compose agents, tools, and resources in JSX. Keep application logic in TypeScript.
Results become prompts
conceptNest an Agent inside another Agent to pass its result into the parent's prompt. AML finishes the child before starting the parent. Use evaluate() inside a component when your application needs to inspect or transform a result before continuing.
Read the full guide →review-brief.tsx
<Agent provider={Editor}>
Write a release brief from this review:
<Agent provider={Reviewer}>Review the latest changes.</Agent>
</Agent>get started
Run your first agent
Add AML to a Node.js 26+ TypeScript project. To run OpenCode, install its CLI and configure model credentials.
step 1
Install AML
$ npm install @aml-jsx/sdkCoding with an agent?
$ npx skills add we-are-singular/aml --skill aml-jsxstep 2
Point JSX at AML
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@aml-jsx/sdk"
}
}step 3
Run an agent
import { Agent, AmlRuntime, opencodeAgent } from "@aml-jsx/sdk"
const runtime = new AmlRuntime({
agentProvider: opencodeAgent({}),
})
const result = await runtime.evaluate(
<Agent>Summarize this repository.</Agent>,
)
console.log(result)Save as workflow.tsx in your project.
contributing
AML is early. Help shape what it becomes.
Try AML on a project. Star the repo if it’s useful, and tell us what you’d change.