Retrieve relevant material first, then give it to a model as context for its answer.
<div class="scene"><div class="heading">RAG PIPELINE</div><div class="pipeline"><div>질문</div><b>→</b><div>검색</div><b>→</b><div>근거</div><b>→</b><div>답변</div></div><div class="evidence" id="evidence">질문: 정책은 언제 바뀌었나?</div></div>.scene{width:min(94vw,800px);height:min(88vh,326px);padding:clamp(10px,2.7vmin,19px);border:1px solid var(--line);border-radius:13px;background:var(--surface);font:500 clamp(13px,2.4vmin,17px)/1.3 var(--font-sans,sans-serif);position:relative;overflow:hidden}.scene .mono{font-family:ui-monospace,SFMono-Regular,monospace}.scene .muted{color:var(--muted)}.scene .accent{color:var(--accent)}.scene .heading{font-weight:750;color:var(--accent);margin-bottom:clamp(5px,1.6vmin,12px)}.pipeline{display:flex;align-items:center;justify-content:space-between;gap:3px;height:46%}.pipeline div{flex:1;text-align:center;border:1px solid var(--line);border-radius:8px;padding:clamp(8px,3vmin,20px) 1px;background:var(--bg);transition:.25s}.pipeline div.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent)}.pipeline b{color:var(--accent)}.evidence{border-left:3px solid var(--accent);padding:9px;background:var(--bg);min-height:24%}const steps=['질문: 정책은 언제 바뀌었나?','검색: 관련 문서 2개','근거: 변경일 9월 1일','답변: 9월 1일에 변경'];let i=0;function draw(){document.querySelectorAll('.pipeline div').forEach((x,n)=>x.classList.toggle('on',n===i));document.getElementById('evidence').textContent=steps[i];i=(i+1)%4}draw();setInterval(draw,780)Retrieval-augmented generation (RAG) searches a knowledge store, adds selected evidence to the prompt, and then generates an answer. It can use updated material without retraining model weights.
The demo follows question, retrieval, context insertion, and answer. Bad retrieval or insufficient evidence can still produce a bad answer, so source attribution and checks matter.
Use it for answers grounded in frequently updated or private documents.