Agent-to-human handoff

AI에서 사람으로 인계

Pass AI-collected needs and reasoning to a person before a consequential choice.

···
html
<div class="handoff"><div class="handoff-cards"><div class="handoff-card ai"><small>AI SUMMARY</small><strong>NEEDS A SPECIAL FIT</strong><span>Preference + open question</span></div><div class="handoff-arrow" id="handoff-arrow">→</div><div class="handoff-card person" id="handoff-person"><small>HUMAN ADVISER</small><strong id="handoff-status">WAITING FOR CONTEXT</strong><span id="handoff-detail">No repeat interview needed</span></div></div><button id="handoff-button" type="button">PASS CONTEXT →</button></div>
css
.handoff{width:min(93%,780px);display:grid;gap:clamp(8px,2.4vmin,18px);font:800 clamp(10px,max(1.8vmin,1vw),16px)/1.2 sans-serif}.handoff-cards{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(4px,1.2vmin,12px)}.handoff-card{min-width:0;min-height:clamp(86px,26vmin,180px);display:flex;flex-direction:column;justify-content:center;gap:clamp(5px,1.5vmin,12px);padding:clamp(7px,2.2vmin,20px);border:2px solid var(--fg);background:var(--surface)}.handoff-card small{color:var(--accent);font-size:clamp(10px,max(1.5vmin,1vw),13px)}.handoff-card strong{font-size:clamp(12px,max(2.3vmin,1.1vw),20px)}.handoff-card span{color:var(--muted)}.handoff-card.person.ready{background:var(--accent-2);color:#211b19}.handoff-card.person.ready small,.handoff-card.person.ready span{color:#3d302d}.handoff-arrow{font-size:clamp(18px,5vmin,36px);color:var(--line);transition:color .4s,transform .4s}.handoff-arrow.ready{color:var(--accent);transform:translateX(3px)}.handoff button{justify-self:end;border:2px solid var(--fg);background:var(--fg);color:var(--bg);padding:clamp(6px,1.5vmin,11px);font:inherit;cursor:pointer}
js
let passed=true;const card=document.getElementById('handoff-person'),arrow=document.getElementById('handoff-arrow');function show(){card.classList.toggle('ready',passed);arrow.classList.toggle('ready',passed);document.getElementById('handoff-status').textContent=passed?'CONTEXT RECEIVED':'WAITING FOR CONTEXT';document.getElementById('handoff-detail').textContent=passed?'Fit concern + choice history':'No repeat interview needed';document.getElementById('handoff-button').textContent=passed?'RESET HANDOFF':'PASS CONTEXT →'}document.getElementById('handoff-button').onclick=()=>{clearInterval(auto);passed=!passed;show()};show();const auto=setInterval(()=>{passed=!passed;show()},2300);

An agent-to-human handoff is the point where AI-assisted discovery or comparison yields to a customer or adviser for judgment. In high-consideration purchases, checking fit, regret risk, and service promises with a person may be part of the value.

The demo passes a fictional preference summary from AI to an adviser. Include the supporting context and unresolved questions so the customer does not have to start over.

Do not force the same handoff on every shopper. Let risk, price, and customer preference guide the escalation point.

When to use

Use it to design a human escalation for high-value, risky, or emotionally important choices.

Open as page ↗