Customer Support

AI agents that know when to escalate to a human

Resolve routine tickets autonomously, surface context instantly, and hand off to humans seamlessly — with full conversation history.

Read the field report See the program

The problem

Why this is hard today.

Chatbots that frustrate customers

Scripted chatbots can't handle nuance. Customers get stuck in loops, abandon the chat, and call the support line anyway.

Agents without guardrails

Autonomous agents that can't escalate are a liability. One wrong refund, one leaked detail, and trust is gone.

Context lost on handoff

When a bot hands off to a human, the conversation history disappears. The customer repeats everything. CSAT drops.

Architecture

How the three libraries compose.

Three libraries give your support agents superpowers — and your customers a seamless experience.

Agent

@threadplane/langgraph

LangGraph interrupts let the agent pause before sensitive actions — refunds, account changes, escalations. Thread persistence preserves the full conversation across bot-to-human handoffs.

See Agent docs →

Render

@threadplane/render

The agent renders structured UI — order summaries, refund confirmations, knowledge base cards — instead of dumping text. Customers see clean, actionable information.

See Render docs →

Chat

@threadplane/chat

Production-ready chat UI with streaming messages, tool call visibility, and interrupt panels. When the agent escalates, the human agent sees the full debug overlay with every step the AI took.

See Chat docs →

What you ship

Capabilities the framework delivers.

Preserved

Full conversation history across bot-to-human handoff — no repeating the question, no re-explaining the problem

Named

Refunds and account changes resume only with an identified approver — the agent cannot self-authorize

Visible

Tool-call replay for human agents on escalation — see every step the AI took before the handoff

In practice

What it looks like in your codebase

support-chat.component.ts — the escalation gate

export class SupportChatComponent {
  protected readonly agent = injectAgent(SUPPORT_AGENT);

  // Populated only while the graph is paused on an interrupt.
  readonly pendingRefund = computed(() => this.agent.interrupt());
  readonly awaitingHuman = computed(() => this.pendingRefund() !== null);

  // Resuming carries the approver, so the record shows who authorized it —
  // the agent has no path to approve its own refund.
  approveRefund(approver: string) {
    this.agent.submit({ resume: { approved: true, approver } });
  }

  denyRefund(reason: string) {
    this.agent.submit({ resume: { approved: false, reason } });
  }

  send(message: string) {
    this.agent.submit({ message });
  }
}

support-chat.component.html

<chat [agent]="agent" />

@if (pendingRefund(); as pending) {
  <aside class="approval">
    <h3>{{ pending.value.action }} — {{ pending.value.amount | currency }}</h3>
    <p>{{ pending.value.reason }}</p>

    <button (click)="approveRefund(currentAgentName())">Approve</button>
    <button (click)="denyRefund('Outside policy')">Deny</button>
  </aside>
}