🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

Formatting Retrieved Context for the Prompt

Build a real context formatter that numbers each retrieved source, the exact mechanism that lets a RAG chatbot cite its answers.

Narrated Video Summary
data-composition-id="ragchatbotmasterclass-module2_lesson5"1280×720 @ 30fps3 clips0:47 total

From Chunk IDs to Prompt Text

similarity_search() returns ids like 'pto-policy' — useful for your code, meaningless to the LLM. Before generation, you need to turn retrieved ids into real, labeled text the model can read and even cite back to the user.

retrieved_ids = ["pto-policy", "parental-leave"]

# Needs to become:
"[Source 1] PTO Policy: ...\n[Source 2] Parental Leave: ..."

A Real, LLM-Ready Context String

You can now go from a raw query all the way to a clean, labeled context string. Next lesson closes Module 2: combining similarity_search() and format_context() into a single retrieve() function — the one piece your chatbot will actually call.

/* Next: The Combined retrieve() Function */
0:00 / 0:47
Scene 1 / 3 — From Chunk IDs to Prompt Text
Total XP: 0|💻 ragchatbotmasterclass XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Context Formatting

IDs to citable text.

Quick Quiz //

What does labeling each retrieved chunk with a source number primarily enable?


🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.

Turn raw retrieved chunk ids into a clean, source-labeled string ready to inject directly into an LLM prompt.

1Why Format Instead of Just Concatenating

You could join retrieved chunks together with no labeling at all, and generation would still technically work. But without source boundaries, the model has no way to tell you which specific document backed a specific claim — and neither do you, when debugging a wrong answer. Numbering sources is a small formatting step with an outsized payoff for trust and debuggability.

2The Shape of a Production Context Block

Real RAG systems often go further than plain numbering — adding metadata like document titles, timestamps, or URLs next to each source. The core pattern stays the same as what you just built: retrieve, then format each result as a clearly delimited, labeled unit before it ever reaches the prompt.

3Step-by-Step Breakdown

From Chunk IDs to Prompt Text. similarity_search() returns ids like 'pto-policy' — useful for your code, meaningless to the LLM. Before generation, you need to turn retrieved ids into real, labeled text the model can read and even cite back to the user.

Build the Context Formatter. Finish format_context(): for each retrieved id, look up its full text and append a labeled line like '[Source N] <text>' to lines. Numbering the sources isn't cosmetic — it's what lets the model cite exactly which source it used in its answer.

Why label each retrieved chunk with a source number like '[Source 1]' instead of just concatenating the raw text together?

  • It lets the generation step (and the model's answer) reference exactly which retrieved source backs a specific claim, which is essential for user trust and debugging wrong answers.
  • It reduces the total number of tokens sent to the model.

A Real, LLM-Ready Context String. You can now go from a raw query all the way to a clean, labeled context string. Next lesson closes Module 2: combining similarity_search() and format_context() into a single retrieve() function — the one piece your chatbot will actually call.

Level Up 🚀

Advanced cheat sheets, SEO tricks, and interview prep for this topic.

Browser Support

ChromeSupported

Fully supported.

FirefoxSupported

Fully supported.

SafariSupported

Fully supported.

EdgeSupported

Fully supported.

Accessibility (A11y)

1Render Source Citations as Real Links or Text

If your UI later shows '[Source 1]' style citations, make each one a real, focusable link or text reference rather than a purely visual badge, so keyboard and screen reader users can navigate to the cited source.

<a href="#source-1">[Source 1]</a>

SEO Implications

  • 1

    Target 'RAG citations' as a distinct search topic

    Developers search for citation/attribution patterns as a separate, later-stage problem once basic retrieval is already working.

Best Practices

Always Delimit and Label Retrieved Sources

Never concatenate retrieved chunks into the prompt without labels — it removes the model's (and your own) ability to trace an answer back to a specific source, which matters enormously the first time a RAG answer is wrong.

Frequent Bugs

THE BUG

Using 0-indexed source numbers in a user-facing citation, producing a confusing '[Source 0]'.

THE FIX

Use `enumerate(chunk_ids, start=1)` (or add 1 manually) so citations are human-numbered starting from 1, matching how people naturally reference a numbered list.

Real-World Examples

Cited HR Answers

A production HR chatbot answers 'You can roll over up to 5 PTO days [Source 1]' and links Source 1 directly to the relevant handbook section — only possible because the context was labeled before generation, not after.

f"[Source {i}] {chunk_texts[chunk_id]}"

Interview Prep

?Frequently Asked Questions

Pascual Vila

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Hardcoding sensitive credentials

// Wrong const API_KEY = 'sk-123456789'; // Correct const API_KEY = process.env.API_KEY;

The Solution //

Never hardcode API keys, passwords, or secrets in your source code. Use environment variables (.env files) to keep them secure and out of version control.

Lesson Glossary

[01]Context Formatting

Converting raw retrieved chunks into a clean, labeled string ready to inject into an LLM prompt.

Code Preview
[Source N] ...

[02]Citation

A reference in a generated answer pointing back to the specific retrieved source it was derived from.

Code Preview
"...5 days [Source 1]"

Continue Learning