useloom

The full-stack framework for AI agents. The agent on your server, the chat in your UI, and your data in between, acting with your users' permissions. Built on the AI SDK, on any model.

Loom is in early development. APIs may change before 1.0.

Create a new app:

npx useloom@latest create my-app

Or add Loom to an existing Next.js or TanStack Start app:

npm i useloom ai @ai-sdk/react @ai-sdk/anthropic zod

Quick start (existing Next.js app)

// agents/support/agent.ts
import { anthropic } from "@ai-sdk/anthropic";
import { defineAgent } from "useloom";

export default defineAgent({
  model: anthropic("claude-sonnet-5-5"),
  instructions: "You are the support agent for Acme.",
});

// agents/support/tools/orders.ts: each exported tool is named by its export
import { tool } from "useloom";
import { z } from "zod";

export const lookupOrder = tool({
  description: "Look up an order by its id",
  inputSchema: z.object({ id: z.string() }),
  execute: async ({ id }, { context }) => db.orders.find(id), // context has the user, thread, and request
});

export const refundOrder = tool({
  description: "Refund an order",
  inputSchema: z.object({ id: z.string(), amount: z.number() }),
  approval: (input) => input.amount > 100, // the user approves large refunds
  execute: async ({ id, amount }, { context }) => payments.refund(id, amount, context.user),
});

// next.config.ts
import { withLoom } from "useloom/next/plugin";
export default withLoom({});

// app/api/agents/[name]/route.ts
import { createRouteHandler } from "useloom/next";
import { agents } from "@/.loom/agents";
export const { GET, POST, DELETE } = createRouteHandler(agents);

// any client component
import { useAgent } from "useloom/react";
const { messages, sendMessage, status } = useAgent("support");

Add .loom/ to .gitignore.

TanStack Start

// vite.config.ts
import { loom } from "useloom/vite";
export default defineConfig({ plugins: [loom(), tanstackStart(), viteReact()] });

// src/routes/api/agents/$name.ts
import { createFileRoute } from "@tanstack/react-router";
import { createRouteHandler } from "useloom/tanstack";
import { agents } from "../../../../.loom/agents";

export const Route = createFileRoute("/api/agents/$name")({
  server: { handlers: createRouteHandler(agents) },
});

Any other server

import { createAgentHandler } from "useloom";
const handle = createAgentHandler(agents);
app.all("/api/agents/:name", (c) => handle(c.req.raw, c.req.param("name")));

Run npx loom dev beside your dev server and npx loom gen before your build.

Entry points

| Import | Provides | | --- | --- | | useloom | defineAgent, tool, connector, memoryStore, createAgentHandler | | useloom/next | createRouteHandler | | useloom/next/plugin | withLoom | | useloom/tanstack | createRouteHandler (TanStack Start server route) | | useloom/vite | loom() (Vite plugin) | | useloom/react | useAgent | | useloom/ui | AgentPanel, AgentWidget, AgentInline, AgentChat (needs streamdown) | | useloom/sqlite | sqliteStore: threads saved in a SQLite file | | useloom/supabase | supabaseTools | | loom (CLI) | loom create, loom gen, loom dev |

Links

• Documentation
• Quickstart
• Repository and example app

License

MIT