@intlayer/docs 9.4.4 → 9.5.0

package/blog/en/internationalization_and_SEO.md

@@ -21,16 +21,12 @@ author: aymericzip
 
 Want to reach more users worldwide? Making your website multilingual is one of the best ways to expand your audience and improve your SEO (Search Engine Optimization). In this blog post, we’ll break down the basics of international SEO often referred to as **i18n** (short for “internationalization”), in clear, understandable terms. You’ll learn about the key decisions you need to make, how to use technical elements like `hreflang`, and why tools like **Intlayer** can simplify your multilingual Next.js projects.
 
----
-
 ## 1. What Does It Mean to Make Your Website Multilingual?
 
 A multilingual website offers its content in more than one language. For example, you might have an English version (`example.com/en/`), a French version (`example.com/fr/`), and a Spanish version (`example.com/es/`). This approach lets search engines display the correct language version to users based on their preferences or geographic location.
 
 When you do this right, you’ll create a far more user-friendly experience for non-English speakers leading to better engagement, higher conversion rates, and improved SEO in different regions.
 
----
-
 ## 2. Choosing the Right URL Structure
 
 If you decide to have multiple language versions, you’ll need a clear, consistent way to organize your site’s URLs. Each language (or region) should have its own unique “address” on the internet. Below are three common ways to structure multilingual websites:
@@ -52,8 +48,6 @@ If you decide to have multiple language versions, you’ll need a clear, consist
 
 > **Tip:** If you have a global brand and want to keep things simpler, subdirectories often work best. If you’re only targeting one or two main countries and want to really emphasize each one, ccTLDs might be the way to go.
 
----
-
 ## 3. Mastering Language Targeting with Hreflang
 
 ### 3.1. What Is Hreflang?
@@ -84,8 +78,6 @@ In your HTML, you’ll add something like:
 
 > **Quick Note:** Make sure the URLs in these tags point directly to the final page, with **no** additional redirects.
 
----
-
 ## 4. Making Content Truly “Local” (Not Just Translated)
 
 ### 4.1. Localization vs. Translation
@@ -97,8 +89,6 @@ In your HTML, you’ll add something like:
 
 Even with good translations, search engines can flag your site for duplicate content if it appears too similar in structure. Hreflang helps clarify that these pages aren’t duplicates but are language variations.
 
----
-
 ## 5. Technical SEO Must-Haves
 
 ### 5.1. Language Declarations (`lang` and `dir`)
@@ -127,8 +117,6 @@ Canonical tags tell search engines which page is the “original” or primary v
 <link rel="canonical" href="https://example.com/fr/produits" />
 ```
 
----
-
 ## 6. On-Page SEO in Multiple Languages
 
 ### 6.1. Title & Meta Descriptions
@@ -145,8 +133,6 @@ Your headings should reflect each region’s **local phrases** or **keywords**.
 - Localize alt text, captions, and filenames if needed.
 - Use visuals that resonate with the target culture.
 
----
-
 ## 7. Language Switching & User Experience
 
 ### 7.1. Auto-Redirect or a Language Selector?
@@ -224,8 +210,6 @@ const LocaleSwitcher: FC = () => {
 - Save your user’s language choice in a **cookie** or **session**.
 - Next time they visit your site, you can automatically load their preferred language.
 
----
-
 ## 8. Building Local Backlinks
 
 **Backlinks** (links from external sites to yours) remain an important SEO factor. When you run a multilingual site, consider:
@@ -233,8 +217,6 @@ const LocaleSwitcher: FC = () => {
 - Reaching out to local news sites, blogs, or forums. For instance, a `.fr` domain pointing to your French subdirectory can boost your local French SEO.
 - Monitoring backlinks per language to see which regions need more PR/marketing efforts.
 
----
-
 ## 9. Monitoring & Maintaining Your Multilingual Site
 
 ### 9.1. Google Analytics & Search Console
@@ -247,8 +229,6 @@ const LocaleSwitcher: FC = () => {
 - Keep translations fresh. If you change a product description in English, update it in French, Spanish, etc.
 - Outdated translations can be confusing for customers and hurt user trust.
 
----
-
 ## 10. Common Pitfalls to Avoid
 
 1. **Machine-Translated Content**
@@ -263,14 +243,10 @@ const LocaleSwitcher: FC = () => {
 4. **Ignoring Cultural Nuances**
    A joke or phrase that works in one country might be offensive or meaningless in another.
 
----
-
 ## Audit your website with the Intlayer SEO Scanner
 
 To ensure your multilingual app is perfectly optimized, we recommend using the [Intlayer SEO Scanner](https://intlayer.org/i18n-seo-scanner). It is a specialized tool for multilingual website checking, helping you identify missing hreflang tags, broken links, and other SEO issues across all your localized pages.
 
----
-
 ## Wrapping Up
 
 Making your website multilingual involves more than just translating text. It’s about structuring URLs effectively, using `hreflang` tags to help search engines serve the correct version, and providing a stellar user experience complete with localized visuals, language selectors, and consistent navigation. Following these best practices will set you up for success in global markets, boost user satisfaction, and, ultimately, deliver better SEO results across regions.

package/blog/en/intlayer_with_i18next.md

@@ -79,7 +79,6 @@ This guide explains how to leverage Intlayer as an **adapter for i18next**, allo
 ## Step-by-Step Guide to Set Up Intlayer with i18next
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -126,7 +125,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to i18next compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:
@@ -164,7 +162,6 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Set up AI provider">
 
 Intlayer unlocks a set of advanced automation and developer-friendly features for your i18next workflow.

package/blog/en/intlayer_with_next-i18next.md

@@ -65,12 +65,9 @@ This guide explains how to leverage Intlayer as an **adapter for i18next**, allo
 - Automate your JSON translations in CLI or CI/CD pipelines.
 - Test, sync, and manage translations more effectively.
 
----
-
 ## Step-by-Step Guide to Set Up Intlayer with next-i18next
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages using your preferred package manager:
@@ -117,7 +114,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to sync Intlayer content declarations to i18next JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:
@@ -155,7 +151,6 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Set up AI provider">
 
 Intlayer unlocks a set of advanced automation and developer-friendly features for your i18next workflow.

package/blog/en/intlayer_with_next-intl.md

@@ -69,7 +69,6 @@ This guide explains how to leverage Intlayer as an **adapter for next-intl**, al
 ## Step-by-Step Guide to Set Up Intlayer with next-intl
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -116,7 +115,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to next-intl compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:
@@ -155,7 +153,6 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Set up AI provider">
 
 Intlayer unlocks a set of advanced automation and developer-friendly features for your i18next workflow.

package/blog/en/intlayer_with_react-i18next.md

@@ -70,7 +70,6 @@ This guide explains how to leverage Intlayer as an **adapter for i18next**, allo
 ## Step-by-Step Guide to Set Up Intlayer with react-i18next
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -117,7 +116,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to react-i18next compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:
@@ -155,7 +153,6 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Set up AI provider">
 
 Intlayer unlocks a set of advanced automation and developer-friendly features for your i18next workflow.

package/blog/en/intlayer_with_react-intl.md

@@ -68,7 +68,6 @@ This guide explains how to leverage Intlayer as an **adapter for react-intl**, a
 ## Step-by-Step Guide to Set Up Intlayer with react-intl
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages:
@@ -115,7 +114,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to export Intlayer content declarations to react-intl compatible JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:
@@ -154,7 +152,6 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Set up AI provider">
 
 Intlayer unlocks a set of advanced automation and developer-friendly features for your i18next workflow.

package/blog/en/intlayer_with_vue-i18n.md

@@ -65,12 +65,9 @@ This guide explains how to leverage Intlayer as an **adapter for vue-i18n**, all
 - Automate your JSON translations in CLI or CI/CD pipelines.
 - Test, sync, and manage translations more effectively.
 
----
-
 ## Step-by-Step Guide to Set Up Intlayer with vue-i18n
 
 <Steps>
-
 <Step number={1} title="Install Dependencies">
 
 Install the necessary packages using your preferred package manager:
@@ -117,7 +114,6 @@ bun add intlayer @intlayer/sync-json-plugin --dev
 - **@intlayer/sync-json-plugin**: Plugin to sync Intlayer content declarations to vue-i18n JSON format
 
 </Step>
-
 <Step number={2} title="Implement the Intlayer plugin to wrap the JSON">
 
 Create an Intlayer configuration file to define your supported locales:
@@ -156,7 +152,6 @@ If changes are made using the CLI to translate the JSON, or using the CMS, Intla
 To see more details about the `syncJSON` plugin, please refer to the [syncJSON plugin documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md).
 
 </Step>
-
 <Step number={3} title="Set up AI provider">
 
 Intlayer unlocks a set of advanced automation and developer-friendly features for your i18next workflow.

package/blog/en/list_i18n_technologies/frameworks/react-native.md

@@ -139,7 +139,7 @@ import { IntlayerProvider } from "react-native-intlayer";
 
 export default function App() {
   return (
-    <IntlayerProvider defaultLocale={getLocales()[0]?.languageTag}>
+    <IntlayerProvider locale={getLocales()[0]?.languageTag}>
       <RootNavigator />
     </IntlayerProvider>
   );

package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md

@@ -34,16 +34,12 @@ We focus on **Next.js 13+ App Router** (with **React Server Components**) and ev
 
 > One confusion often made by developers is to think that `next-intl` is the Next.js version of `react-intl`. It's not, `next-intl` is maintained by [Amann](https://github.com/amannn), while `react-intl` is maintained by [FormatJS](https://github.com/formatjs/formatjs).
 
----
-
 ## In short
 
 - **next-intl** - Lightweight, straightforward message formatting with solid Next.js support. Centralized catalogs are common; DX is simple, but safety and large-scale maintenance remain mostly your responsibility.
 - **next-i18next** - i18next in Next.js clothing. Mature ecosystem and features via plugins (e.g., ICU), but configuration can be verbose and catalogs tend to centralize as projects grow.
 - **Intlayer** - Component-centric content model for Next.js, **strict TS typing**, **build-time checks**, **tree-shaking**, **built-in middleware & SEO helpers**, optional **Visual Editor/CMS**, and **AI-assisted translations**.
 
----
-
 | Library                | GitHub Stars                                                                                                                                                                     | Total Commits                                                                                                                                                                        | Last Commit                                                                                                                                           | First Version | NPM Version                                                                                                         | NPM Downloads                                                                                                                  |
 | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
 | `aymericzip/intlayer`  | [![GitHub Repo stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=%E2%AD%90%20stars)](https://github.com/aymericzip/intlayer/stargazers)   | [![GitHub commit activity](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits)   | [![Last Commit](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits)   | April 2024    | [![npm](https://img.shields.io/npm/v/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)         | [![npm downloads](https://img.shields.io/npm/dm/intlayer?style=for-the-badge)](https://www.npmjs.com/package/intlayer)         |
@@ -53,8 +49,6 @@ We focus on **Next.js 13+ App Router** (with **React Server Components**) and ev
 
 > Badges update automatically. Snapshots will vary over time.
 
----
-
 ## Side-by-Side Feature Comparison (Next.js focused)
 
 | Feature                                       | `next-intlayer` (Intlayer)                                                                                                          | `next-intl`                                                                                              | `next-i18next`                                                                                           |
@@ -80,16 +74,12 @@ We focus on **Next.js 13+ App Router** (with **React Server Components**) and ev
 | **Management of Large Projects**              | ✅ Encourages modular, suited for design-system                                                                                     | ✅ Modular with setup                                                                                    | ✅ Modular with setup                                                                                    |
 | **Testing Missing Translations (CLI/CI)**     | ✅ CLI: `npx intlayer content test` (CI-friendly audit)                                                                             | ⚠️ Not built-in; docs suggest `npx @lingual/i18n-check`                                                  | ⚠️ Not built-in; rely on i18next tools / runtime `saveMissing`                                           |
 
----
-
 ## Introduction
 
 Next.js gives you built-in support for internationalized routing (e.g. locale segments). But that feature doesn’t do translations on its own. You still need a library to render localized content to your users.
 
 Many i18n libraries exist, but in the Next.js world today, three are gaining traction: next-i18next, next-intl, and Intlayer.
 
----
-
 ## Architecture & scalability
 
 - **next-intl / next-i18next**: Default to **centralized catalogs** per locale (plus **namespaces** in i18next). Works fine early on, but often becomes a big shared surface area with rising coupling and key churn.
@@ -97,8 +87,6 @@ Many i18n libraries exist, but in the Next.js world today, three are gaining tra
 
 **Why it matters:** In large codebases or design-system setups, **modular content** scales better than monolithic catalogs.
 
----
-
 ## Bundle sizes & dependencies
 
 After building the application, the bundle is the JavaScript that the browser will load to render the page. Bundle size is therefore important for application performance.
@@ -166,8 +154,6 @@ Here an example of the impact of bundle size optimization using `intlayer` in a
 | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
 | ![optimized bundle](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true) | ![no optimized bundle](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle_no_optimization.png?raw=true) |
 
----
-
 ## TypeScript & safety
 
 <Columns>
@@ -192,12 +178,11 @@ Here an example of the impact of bundle size optimization using `intlayer` in a
 - **Generates strict types** from your content. **IDE autocompletion** and **compile-time errors** catch typos and missing keys before deploy.
 
   </Column>
+
 </Columns>
 
 **Why it matters:** Strong typing shifts failures **left** (CI/build) instead of **right** (runtime).
 
----
-
 ## Missing translation handling
 
 <Columns>
@@ -222,12 +207,11 @@ Here an example of the impact of bundle size optimization using `intlayer` in a
 - **Build-time detection** with **warnings/errors** for missing locales or keys.
 
   </Column>
+
 </Columns>
 
 **Why it matters:** Catching gaps during build prevents 'undefined' strings in production.
 
----
-
 ## Routing, middleware & URL strategy
 
 <Columns>
@@ -254,12 +238,11 @@ Here an example of the impact of bundle size optimization using `intlayer` in a
 - Provides middleware.
 
   </Column>
+
 </Columns>
 
 **Why it matters:** Helps for SEO and discovery, as well as user experience.
 
----
-
 ## Server Components (RSC) alignment
 
 <Columns>
@@ -287,12 +270,11 @@ Here an example of the impact of bundle size optimization using `intlayer` in a
 - Provide synchronous API for children server components.
 
   </Column>
+
 </Columns>
 
 **Why it matters:** Server component suport is a key feature of Next.js 13+, helping for performance. Passing props the locale or the `t` function from the parent to the child server components make your components less reusable.
 
----
-
 ## Integration with localization platforms (TMS)
 
 Large organizations often rely on Translation Management Systems (TMS) like **Crowdin**, **Phrase**, **Lokalise**, **Localizely**, or **Localazy**.
@@ -312,8 +294,6 @@ Large organizations often rely on Translation Management Systems (TMS) like **Cr
 
 > Note: `next-intl` and `i18next` also accepts TypeScript catalogs. If your team stores messages in `.ts` files or decentralizes them by feature, you can face similar TMS friction. However, many `next-intl` setups remain centralized in a `locales/` folder, which is a bit easier to refactor to JSON for TMS.
 
----
-
 ## Developer Experience
 
 This part makes a deep comparison between the three solutions. Rather than considering simple cases, as described in the 'getting started' documentation for each solution, we will consider a real use case, more similar to a real project.
@@ -945,8 +925,6 @@ const ClientComponentExample = () => {
   - **next-intl** is flexible; load messages however you configure.
   - **Intlayer** stores content in TS/JS dictionaries and resolves by key.
 
----
-
 ### Usage in a server component
 
 We will take the case of a UI component. This component is a server component, and should be able to be inserted as a child of a client component. (page (server component) -> client component -> server component). As this component can be inserted as a child of a client component, it cannot be async.
@@ -1059,7 +1037,7 @@ Here's a list of good practices regarding multilingual SEO.
 Developers often forget to properly reference their pages across locales.
 
 <Tabs defaultTab="next-intl" group='techno'>
- 
+
   <Tab label="next-i18next" value="next-i18next">
 
 ```ts fileName="i18n.config.ts"
@@ -1441,9 +1419,8 @@ The set up of the middleware centralized in the `intlayer.config.ts` file.
 - **Integrated tooling**: Take advantage of built-in routing, SEO helpers, and visual editor support.
 
   </Tab>
-</Tabs>
 
----
+</Tabs>
 
 ## And the winner is…
 
@@ -1471,6 +1448,7 @@ It’s not simple. Each option has trade-offs. Here’s how I see it:
 - built for modern Next.js, with modular content, type safety, tooling, and less boilerplate. If you value **component-scoped content**, **strict TypeScript**, **build-time guarantees**, **tree-shaking**, and **batteries-included** routing/SEO/editor tooling - especially for **Next.js App Router**, design-systems and **large, modular codebases**.
 
   </Column>
+
 </Columns>
 
 If you prefer minimal setup and accept some manual wiring, next-intl is a good pick. If you need all the features and don't mind complexity, next-i18next works. But if you want a modern, scalable, modular solution with built tools, Intlayer aims to give you that out of the box.
@@ -1485,8 +1463,6 @@ GitHub stars are a strong indicator of a project's popularity, community trust,
 
 [![Star History Chart](https://api.star-history.com/chart?repos=i18next/next-i18next%2Camannn/next-intl%2Caymericzip/intlayer&type=date&legend=top-left)](https://www.star-history.com/#i18next/next-i18next&amannn/next-intl&aymericzip/intlayer)
 
----
-
 ## Conclusion
 
 All three libraries succeed at core localization. The difference is **how much work you must do** to achieve a robust, scalable setup in **modern Next.js**:

package/blog/en/nextjs-multilingual-seo-comparison.md

@@ -26,8 +26,6 @@ If your multilingual Next.js app doesn’t tell search engines how to crawl and
 
 In this blog, we’ll explore **why i18n is an SEO superpower** and how to implement it correctly in Next.js with `next-intl`, `next-i18next`, and `Intlayer`.
 
----
-
 ## Why SEO and i18n
 
 Adding languages isn’t just about UX. It’s also a powerful lever for **organic visibility**. Here’s why:
@@ -37,8 +35,6 @@ Adding languages isn’t just about UX. It’s also a powerful lever for **organ
 3. **Better UX:** Visitors land on the right version of your site immediately.
 4. **Competitive advantage:** Few sites implement multilingual SEO well which means you can stand out.
 
----
-
 ## Best Practices for Multilingual SEO in Next.js
 
 Here’s a checklist every multilingual app should implement:
@@ -57,8 +53,6 @@ Here’s a checklist every multilingual app should implement:
 
 These are simple steps, but skipping them can cost you visibility.
 
----
-
 ## Implementation Examples
 
 Developers often forget to properly reference their pages across locales so let’s look at how this works in practice with different libraries.
@@ -341,14 +335,10 @@ export default robots;
   </Tab>
 </Tabs>
 
----
-
 ## Audit your website with the Intlayer SEO Scanner
 
 To ensure your multilingual app is perfectly optimized, we recommend using the [Intlayer SEO Scanner](https://intlayer.org/i18n-seo-scanner). It is a specialized tool for multilingual website checking, helping you identify missing hreflang tags, broken links, and other SEO issues across all your localized pages.
 
----
-
 ## Conclusion
 
 Getting i18n right in Next.js isn’t just about translating text, it’s about making sure search engines and users know exactly which version of your content to serve.

package/blog/en/rag_powered_documentation_assistant.md

@@ -71,7 +71,6 @@ At a high level, here’s the recipe I used:
 6.  **Logging queries for feedback** Every user query is stored. This is gold for understanding pain points, missing docs, or new opportunities.
 
 <Steps>
-
 <Step number={1} title="Reading the Docs">
 
 The first step was simple: I needed a way to scan a docs/ folder for all .md files. Using Node.js and glob, I fetched the content of each Markdown file into memory.
@@ -79,7 +78,6 @@ The first step was simple: I needed a way to scan a docs/ folder for all .md
 This keeps the pipeline flexible: instead of Markdown, you could fetch docs from a database, a CMS, or even an API.
 
 </Step>
-
 <Step number={2} title="Chunking the Documentation">
 
 Why chunk? Because language models have **context limits**. Feeding them an entire book of docs won’t work.
@@ -103,7 +101,6 @@ This trade-off (chunk size vs overlap) is key for RAG efficiency:
 - Too large → you blow up context size.
 
 </Step>
-
 <Step number={3} title="Generating Embeddings">
 
 Once the docs are chunked, we generate **embeddings**, high-dimensional vectors representing each chunk.
@@ -123,7 +120,6 @@ I used OpenAI’s text-embedding-3-large model, but you could use any modern e
 Each vector is a mathematical fingerprint of the text, enabling similarity search.
 
 </Step>
-
 <Step number={4} title="Indexing & Storing Embeddings">
 
 To avoid regenerating embeddings multiple times, I stored them in embeddings.json.
@@ -138,7 +134,6 @@ In production, you’d likely want a vector database such as:
 Vector DBs handle indexing, scalability, and fast search. But for my prototype, a local JSON worked fine.
 
 </Step>
-
 <Step number={5} title="Retrieval with Cosine Similarity">
 
 When a user asks a question:
@@ -152,7 +147,6 @@ Cosine similarity measures the angle between two vectors. A perfect match scores
 This way, the system finds the closest doc passages to the query.
 
 </Step>
-
 <Step number={6} title="Augmentation + Generation">
 
 Now comes the magic. We take the top chunks and inject them into the **system prompt** for ChatGPT.
@@ -162,7 +156,6 @@ That means the model answers as if those chunks were part of the conversation.
 The result: accurate, **doc-grounded responses**.
 
 </Step>
-
 <Step number={7} title="Logging User Queries">
 
 This is the hidden superpower.
@@ -177,7 +170,6 @@ Every question asked is stored. Over time, you build a dataset of:
 This turns your RAG assistant into a **continuous user research tool**.
 
 </Step>
-
 <Step number={8} title="What Does It Cost?">
 
 One common objection to RAG is cost. In practice, it’s surprisingly cheap:
@@ -189,7 +181,6 @@ One common objection to RAG is cost. In practice, it’s surprisingly cheap:
 On the top of that, you can include the hosting cost.
 
 </Step>
-
 <Step number={9} title="Implementation Details">
 
 Stack:
@@ -255,7 +246,6 @@ We experimented with gpt-5, but latency was too high (sometimes up to 15 second
 👉 [Try the demo here](https://intlayer.org/doc/why) 👉 [Check the code template on GitHub](https://github.com/aymericzip/smart_doc_RAG)
 
 </Step>
-
 <Step number={10} title="Going Further">
 
 This project is a minimal implementation. But you can extend it in many ways:
@@ -269,7 +259,6 @@ This project is a minimal implementation. But you can extend it in many ways:
 - Improved prompting → reranking, filtering, and hybrid search (keyword + semantic)
 
 </Step>
-
 <Step number={11} title="Limitations We Hit">
 
 - Chunking and overlap are empirical. The right balance (chunk size, overlap percentage, number of retrieved chunks) requires iteration and testing.
@@ -277,7 +266,6 @@ This project is a minimal implementation. But you can extend it in many ways:
 - In this prototype, embeddings are stored in JSON. This works for demos but pollutes Git. In production, a database or dedicated vector store is better.
 
 </Step>
-
 <Step number={12} title="Why This Matters Beyond Docs">
 
 The interesting part is not just the chatbot. It’s the **feedback loop**.