### Install Project Dependencies

Source: https://github.com/aymericzip/intlayer/blob/main/apps/app/README.md

Install all necessary project dependencies using Bun. Ensure you have Bun or Node.js (v20+) installed.

```bash
bun install
```

--------------------------------

### Install next-intl with bun

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_next-intl.md

Install the next-intl package using bun.

```bash
bun add next-intl
```

--------------------------------

### Install Intlayer Dependencies and Initialize (bun)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_next-intl.md

Install the intlayer package and the sync-json plugin using bun, then initialize intlayer.

```bash
bun add intlayer @intlayer/sync-json-plugin --dev
bun x intlayer init
```

--------------------------------

### Install Standard Webpack Bundle Analyzer

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/bundle_optimization.md

Install `webpack-bundle-analyzer` for Create React App (ejected), Angular, or custom Webpack setups.

```bash
npm install -D webpack-bundle-analyzer
```

```bash
yarn add -D webpack-bundle-analyzer
```

```bash
pnpm add -D webpack-bundle-analyzer
```

```bash
bun add -d webpack-bundle-analyzer
```

--------------------------------

### Example output of Intlayer init

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/init.md

This shows the typical output when the `init` command successfully sets up Intlayer in your project.

```bash
npx intlayer init
Checking Intlayer configuration...
✓ Added .intlayer to .gitignore
✓ Updated tsconfig.json to include intlayer types
✓ Created intlayer.config.ts
✓ Injected import into vite.config.ts
✓ Intlayer init setup complete.
```

--------------------------------

### Usage Example in React

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useI18n.md

Provides a comprehensive example of using the `useI18n` hook within a React application, including setup with `IntlayerProvider` and `IntlayerServerProvider`.

```APIDOC
## Usage Examples in React

```tsx
import type { FC } from "react";
import { ClientComponentExample, ServerComponentExample } from "@components";
import { IntlayerProvider } from "react-intlayer";
import { useI18n, IntlayerServerProvider } from "react-intlayer/server";
import { Locales } from "intlayer";

const App: FC<{ locale: Locales }> = ({ locale }) => {
  const t = useI18n("home-page", locale);

  return (
    <>
      <p>{t("introduction")}</p>
      <IntlayerProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};
```

```tsx
import type { FC } from "react";
import { useI18n } from "react-intlayer";

const ComponentExample: FC = () => {
  const t = useI18n("component-example");

  return (
    <div>
      <h1>{t("title")}</h1>
      <p>{t("description")}</p>
    </div>
  );
};
```

```tsx
import { useI18n } from "react-intlayer/server";

const ServerComponentExample = () => {
  const t = useI18n("server-component");

  return (
    <div>
      <h1>{t("title")}</h1>
      <p>{t("description")}</p>
    </div>
  );
};
```
```

--------------------------------

### Example Usage in Next.js

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/next-intlayer/useIntlayer.md

Provides a comprehensive example of using the useIntlayer hook within a Next.js page for both server and client components, including provider setup.

```APIDOC
## Example Usage in Next.js

```tsx fileName="src/pages/[locale]/index.tsx"
import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";

const HomePage: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};
```

```tsx fileName="src/components/ClientComponentExample.tsx"
"use-client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const ClientComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};
```

```tsx fileName="src/components/ServerComponentExample.tsx"
import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample: FC = () => {
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};
```
```

--------------------------------

### Run Development Server

Source: https://github.com/aymericzip/intlayer/blob/main/apps/app/README.md

Start the development server for the Intlayer Showcase. Access the application at http://localhost:3000.

```bash
bun dev
```

--------------------------------

### Start an Application

Source: https://github.com/aymericzip/intlayer/blob/main/CONTRIBUTING.md

General command pattern to navigate to an app directory and start it.

```sh
cd ./apps/backend # or ./apps/website, ./examples/nextjs-15-app, etc.
bun run dev # or bun run dev:turbo, etc.
```

--------------------------------

### Specify Input Examples for a Tool

Source: https://github.com/aymericzip/intlayer/blob/main/apps/backend/src/utils/AI/chat/tooldoc.md

Provide example inputs for a tool to guide the model on data structure, especially for optional values or when the JSON schema is insufficient. Only Anthropic providers natively support this; others ignore the setting.

```typescript
tool({
  description: "Get the weather in a location",
  inputSchema: z.object({
    location: z.string().describe("The location to get the weather for"),
  }),
  inputExamples: [
    { input: { location: "San Francisco" } },
    { input: { location: "London" } },
  ],
  execute: async ({ location }) => {
    // ...
  },
});
```

--------------------------------

### Intlayer Configuration Example

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/intlayer/getLocalizedUrl.md

Configure supported locales and the default locale for your multilingual application. This setup is essential for the getLocalizedUrl function to work correctly.

```typescript
import { Locales, type IntlayerConfig } from "intlayer";

// Configuration for supported locales and default locale
export default {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
} satisfies IntlayerConfig;

export default config;
```

--------------------------------

### Install Intlayer CLI and Dependencies (bun)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_i18next_to_intlayer.md

Use the Intlayer CLI to initialize your project and install core packages and the compat adapter. The --interactive flag is optional.

```bash
bunx intlayer-cli init --interactive
```

```bash
bun add intlayer @intlayer/i18next @intlayer/sync-json-plugin
```

--------------------------------

### Intlayer Build Output Example

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/releases/v6.md

This output shows the process of preparing and loading Intlayer dictionaries, including local and remote content status and loading times.

```bash
[intlayer]  Preparing Intlayer (v6.0.1)
[intlayer]  Dictionaries:
[intlayer]  ✓ Local content: 163/163
[intlayer]  ✓ Remote content: 100/100
[intlayer]   - access-key-creation-form             [local: ✔ built] [distant: ✔ imported]
[intlayer]   - access-key-creation-form-schema      [local: ✔ built] [distant: ✔ imported]
[intlayer]   - access-key-form                      [local: ✔ built] [distant: ✔ imported]
[intlayer]   - ai-ab-testing-section                                 [distant: ✔ imported]
[intlayer]   - application-not-running-view         [local: ✔ built] [distant: ✔ imported]
[intlayer]   - application-template-message         [local: ✔ built] [distant: ✔ fetched]
[intlayer]   - aside-navigation                     [local: ✔ built] [distant: ✔ imported]
[intlayer]   - ask-reset-password                   [local: ✔ built] [distant: ✔ imported]
[intlayer]   - ask-reset-password-schema            [local: ✔ built] [distant: ✔ imported]
[intlayer]   - autocompletion-section               [local: ✔ built] [distant: ✔ fetched]
[intlayer]   - available-techno-section             [local: ✔ built] [distant: ✔ imported]
[intlayer]   - blog-data                            [local: ✔ built]
[intlayer]   - blog-metadata                        [local: ✔ built]
[intlayer]   - blog-nav-list                        [local: ✔ built] [distant: ✔ imported]
[intlayer]   - blog-page                                             [distant: ✔ fetched]
[intlayer]   - blog-search-metadata                 [local: ✔ built] [distant: ✔ imported]
[intlayer]   - blog-search-page                     [local: ✔ built] [distant: ✔ imported]
... 
[intlayer]  Content loaded  (Total: 8401ms - Local: 4050ms - Remote: 4222ms)
```

--------------------------------

### Use Enumeration with Vanilla JS

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/enumeration.md

Integrate enumeration with vanilla-intlayer by using the useIntlayer hook. This example includes installation and event handling for content changes.

```typescript
import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("car_count").onChange((newContent) => {
  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
});

// Initial render
document.getElementById("cars")!.textContent = content.numberOfCar(6);

```

--------------------------------

### Start Live Sync Server with Next.js

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md

Configure your `package.json` to start the Intlayer Live Sync server alongside your Next.js application. The `--with 'next start'` argument ensures seamless integration.

```json
{
  "scripts": {
    // ... other scripts
    "build": "next build",
    "dev": "next dev",
    "start": "npx intlayer live --with 'next start'",
  },
}
```

--------------------------------

### Get Intlayer Configuration

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/configuration.md

Retrieves the current Intlayer configuration, including locale settings. Useful for verifying your setup. Supports various package managers.

```bash
npx intlayer configuration get
```

```bash
yarn intlayer configuration get
```

```bash
pnpm intlayer configuration get
```

```bash
bun x intlayer configuration get
```

--------------------------------

### Set Up OpenAI API Key

Source: https://github.com/aymericzip/intlayer/blob/main/CONTRIBUTING.md

Instructions for setting up the OpenAI API key by navigating to the docs directory, copying the environment template, and editing the .env file.

```bash
# Navigate to the docs directory
cd ./docs

# Create environment file (if it doesn't exist)
cp .env.template .env

# Add your OpenAI API key
nano .env
```

--------------------------------

### Get Intlayer Configuration (bun)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/configuration.md

Retrieves the current Intlayer configuration, including locale settings. Use this command to verify your project's setup.

```bash
bun x intlayer configuration get
```

--------------------------------

### Install Intlayer CLI and Dependencies (npm)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_i18next_to_intlayer.md

Use the Intlayer CLI to initialize your project and install core packages and the compat adapter. The --interactive flag is optional.

```bash
npx intlayer-cli init --interactive
```

```bash
npm install intlayer @intlayer/i18next @intlayer/sync-json-plugin
```

--------------------------------

### Get Intlayer Configuration (pnpm)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/configuration.md

Retrieves the current Intlayer configuration, including locale settings. Use this command to verify your project's setup.

```bash
pnpm intlayer configuration get
```

--------------------------------

### Start Standalone Live Sync Server

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md

Add a script to your `package.json` to easily start the standalone Intlayer Live Sync server. This command initiates the server process for runtime content updates.

```json
{
  "scripts": {
    // ... other scripts
    "live:start": "npx intlayer live",
  },
}
```

--------------------------------

### Get Intlayer Configuration (yarn)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/configuration.md

Retrieves the current Intlayer configuration, including locale settings. Use this command to verify your project's setup.

```bash
yarn intlayer configuration get
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_astro_svelte.md

After initializing the CLI, install the required packages for Intlayer, Astro, and Svelte integration.

```bash
npm install intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
```

```bash
pnpm add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
```

```bash
yarn add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
```

```bash
bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
```

--------------------------------

### Get Intlayer Configuration (npm)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/configuration.md

Retrieves the current Intlayer configuration, including locale settings. Use this command to verify your project's setup.

```bash
npx intlayer configuration get
```

--------------------------------

### Start Live Sync with a Development Server

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md

Configure a package.json script to start Live Sync and integrate it with your development server. This command initiates the Live Sync process and specifies the development command to run, such as 'next dev --turbopack'.

```json
"scripts": {
  "intlayer:live:start": "npx intlayer live start --with 'next dev --turbopack'"
}
```

--------------------------------

### Route File Definition

Source: https://github.com/aymericzip/intlayer/blob/main/apps/app/CLAUDE.md

Example of how a route is defined using `createFileRoute` in TanStack Start. Configuration like `head()`, `loader()`, and `beforeLoad()` are declared within the same file.

```typescript
export const Route = createFileRoute(...)({ ... })
head()
loader()
beforeLoad() declared in same file.
```

--------------------------------

### Consumindo a variante padrão em Preact

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dynamic_dictionaries/variants.md

Use the `useIntlayer` hook to get the default translation variant for 'hero-banner' in Preact. Make sure 'preact-intlayer' is installed.

```tsx
import { useIntlayer } from "preact-intlayer";

export const Hero = () => {
  const { headline, cta } = useIntlayer("hero-banner");
  // → variante padrão

  return (
    <section>
      <h1>{headline}</h1>
      <a>{cta}</a>
    </section>
  );
};

```

--------------------------------

### Install Intlayer CLI and Dependencies (pnpm)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_i18next_to_intlayer.md

Use the Intlayer CLI to initialize your project and install core packages and the compat adapter. The --interactive flag is optional.

```bash
pnpm dlx intlayer-cli init --interactive
```

```bash
pnpm add intlayer @intlayer/i18next @intlayer/sync-json-plugin
```

--------------------------------

### Use useIntlayer Hook in React Component

Source: https://github.com/aymericzip/intlayer/blob/main/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/component-react.md

Import and use the useIntlayer hook to get localized title and content for a component. Ensure 'react-intlayer' is installed and configured.

```tsx
// src/components/Component.tsx
import { useIntlayer } from "react-intlayer";

export const Component = () => {
  const { title, content } = useIntlayer("component");

  return (
    <div>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
};

```

--------------------------------

### Install Intlayer Packages (bun)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react_native+expo.md

Install the necessary Intlayer packages using bun after initialization.

```bash
bun add intlayer react-native-intlayer
```

--------------------------------

### Intlayer Build Output Example

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/releases/v6.md

This is an example of the output you can expect when running the Intlayer build command, showing the progress and status of dictionary loading and processing.

```bash
[intlayer]  Preparing Intlayer (v6.0.1)
[intlayer]  Dictionaries:
[intlayer]  ✓ Local content: 163/163
[intlayer]  ✓ Remote content: 100/100
[intlayer]   - access-key-creation-form             [local: ✔ built] [distant: ✔ imported]
[intlayer]   - access-key-form                      [local: ✔ built] [distant: ✔ imported]
[intlayer]   - ai-ab-testing-section                                 [distant: ✔ imported]
[intlayer]   - application-not-running-view         [local: ✔ built] [distant: ✔ imported]
[intlayer]   - available-techno-section             [local: ✔ built] [distant: ✔ imported]
[intlayer]   - blog-data                            [local: ✔ built]
[intlayer]   - blog-metadata                        [local: ✔ built]
[intlayer]   - blog-nav-list                        [local: ✔ built] [distant: ✔ imported]
[intlayer]   - blog-page                                             [distant: ✔ fetched]
[intlayer]   - blog-search-page                     [local: ✔ built] [distant: ✔ imported]
... 
[intlayer]  Content loaded  (Total: 8401ms - Local: 4050ms - Remote: 4222ms)
```

--------------------------------

### Consume FAQ Collection in Vue

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/collections.md

Utilize the `useIntlayer` composable to retrieve a collection of FAQ items in a Vue.js application. This example uses the `<script setup>` syntax.

```vue
<script setup>
import { useIntlayer } from "vue-intlayer";
const items = useIntlayer("faq");
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <strong>{{ item.question }}</strong>
      <p>{{ item.answer }}</p>
    </li>
  </ul>
</template>

```

--------------------------------

### Start Live Sync Server with Vite

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md

Add a script to your `package.json` to run the Intlayer Live Sync server with your Vite application. Use the `--with 'vite start'` argument for proper integration.

```json
{
  "scripts": {
    // ... other scripts
    "build": "vite build",
    "dev": "vite dev",
    "start": "npx intlayer live --with 'vite start'",
  },
}
```

--------------------------------

### Switch Application Language with useLocale Hook

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+preact.md

Use the useLocale hook to get the setLocale function and change the application's language. This example demonstrates switching to English.

```tsx
import type { FunctionalComponent } from "preact";
import { Locales } from "intlayer";
import { useLocale } from "preact-intlayer";

const LocaleSwitcher: FunctionalComponent = () => {
  const { setLocale } = useLocale();

  return (
    <button onClick={() => setLocale(Locales.ENGLISH)}>
      Change Language to English
    </button>
  );
};

export default LocaleSwitcher;
```

--------------------------------

### Install Intlayer CLI and Dependencies (yarn)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/migration_from_i18next_to_intlayer.md

Use the Intlayer CLI to initialize your project and install core packages and the compat adapter. The --interactive flag is optional.

```bash
yarn dlx intlayer-cli init --interactive
```

```bash
yarn add intlayer @intlayer/i18next @intlayer/sync-json-plugin
```

--------------------------------

### Per-Component Translation Example in Flutter

Source: https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/per-component_vs_centralized_i18n.md

Demonstrates a per-component translation setup in Flutter using the 'i18n_extension' package. Translations are defined within a Dart file alongside the component.

```dart
import 'package:i18n_extension/i18n_extension.dart';

extension Localization on String {
  static var _t = Translations.byText("en") +
      {
        "Hello": {
          "en": "Hello",
          "fr": "Bonjour",
        },
      };

  String get i18n => localize(this, _t);
}
```

--------------------------------

### Create a Server Function

Source: https://github.com/aymericzip/intlayer/blob/main/examples/tanstack-start-solid-app/README.md

Defines a server function using `createServerFn` for handling server-side logic. This example creates a GET request handler to return the current server time.

```tsx
import { createServerFn } from "@tanstack/solid-start";

const getServerTime = createServerFn({
  method: "GET",
}).handler(async () => {
  return new Date().toISOString();
});
```

--------------------------------

### Example Formatted Output

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/list_projects.md

Demonstrates the typical formatted text output when listing Intlayer projects from the git root.

```bash
$ npx intlayer projects list --git-root

Found 3 Intlayer project(s):

  - /Users/user/workspace/packages/app
  - /Users/user/workspace/packages/admin
  - /Users/user/workspace/packages/shared
```

--------------------------------

### Install Intlayer CLI

Source: https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/intlayer_with_next-intl.md

Install the Intlayer CLI to initialize your project and manage dependencies. The --interactive flag is optional.

```bash
npx intlayer-cli init --interactive
```

```bash
pnpm dlx intlayer-cli init --interactive
```

```bash
yarn dlx intlayer-cli init --interactive
```

```bash
bunx intlayer-cli init --interactive
```

--------------------------------

### Using usePathname in a Nav Item

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/vue-intlayer/usePathname.md

Use the usePathname composable to get the current pathname and determine the active navigation item. This example shows how to apply an 'aria-current' attribute for accessibility.

```vue
<script setup lang="ts">
import { usePathname } from "vue-intlayer";

const props = defineProps({
  href: String,
  label: String,
});

const pathname = usePathname();
</script>

<template>
  <a :href="href" :aria-current="pathname === href ? 'page' : undefined">
    {{ label }}
  </a>
</template>
```

--------------------------------

### Install Intlayer Dependencies with Bun

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+svelte.md

Use the Intlayer CLI to initialize the project and install necessary packages. The --interactive flag is optional.

```bash
bunx intlayer-cli init --interactive
```

```bash
bun add intlayer svelte-intlayer
bun add vite-intlayer --save-dev
```

--------------------------------

### Use Translations in Vanilla JS

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/translation.md

Manage translations in plain JavaScript applications using `vanilla-intlayer`. This example demonstrates installing the library and using `useIntlayer` with an `onChange` handler to update the DOM.

```typescript
import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
  document.getElementById("welcome-message")!.textContent = String(
    newContent.welcomeMessage
  );
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
  content.welcomeMessage
);
```

--------------------------------

### Install Core and Integration Packages

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_astro_solid.md

Manually install the necessary Intlayer packages and Astro/Solid integrations for your project.

```bash
npm install intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
```

```bash
pnpm add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
```

```bash
yarn add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
```

```bash
bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
```

--------------------------------

### Using Conditions with Intlayer

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/condition.md

Demonstrates how to install Intlayer, use its hook to get translated content, and update the UI based on conditional logic. It also shows the initial render of the content.

```typescript
import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("my_key").onChange((newContent) => {
  document.getElementById("true-content")!.textContent =
    newContent.myCondition(true);
  document.getElementById("false-content")!.textContent =
    newContent.myCondition(false);
});

// Initial render
document.getElementById("true-content")!.textContent =
  content.myCondition(true);
document.getElementById("false-content")!.textContent =
  content.myCondition(false);
```

--------------------------------

### Load JSON Plugin Configuration

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/plugins/sync-json.md

Configure the sync-json plugin in intlayer.config.ts to ingest JSON files. This example shows a basic setup for loading JSON messages from any location in the source tree.

```typescript
import { Locales, type IntlayerConfig } from "intlayer";
import { loadJSON } from "@intlayer/sync-json-plugin";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },

  plugins: [
    // Ingest JSON messages located anywhere in your source tree
    loadJSON({
      source: ({ key }) => `./src/**/${key}.i18n.json`,
      // Load a single locale per plugin instance (defaults to the config defaultLocale)
      locale: Locales.ENGLISH,
      priority: 0,
    }),
  ],
};

export default config;
```

--------------------------------

### Install Intlayer Packages

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_14.md

After initialization, install the core 'intlayer' package and the 'next-intlayer' integration package using your preferred package manager.

```bash
npm install intlayer next-intlayer
```

```bash
pnpm add intlayer next-intlayer
```

```bash
yarn add intlayer next-intlayer
```

```bash
bun add intlayer next-intlayer
```

--------------------------------

### Handle 'Get Started' Button Click Event

Source: https://github.com/aymericzip/intlayer/blob/main/temp.html

This JavaScript snippet attaches an event listener to a button with the ID 'getStartedBtn'. It prevents the default action and logs a message to the console when the button is clicked.

```javascript
document.getElementById('getStartedBtn').addEventListener('click', (e) => {
  e.preventDefault();
  console.log('Interaction captured: Get Started clicked');
  // Add interaction logic here
});
```

--------------------------------

### Install Intlayer Dependencies (bun)

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/migration_from_next-i18next_to_intlayer.md

Install the core Intlayer packages and compat adapters using bun. This step is part of the quick migration process.

```bash
bun add intlayer next-intlayer react-intlayer @intlayer/next-i18next @intlayer/react-i18next @intlayer/i18next @intlayer/sync-json-plugin
```

--------------------------------

### Client Component Example

Source: https://github.com/aymericzip/intlayer/blob/main/apps/website-tanstack/src/components/LandingPage/FeaturesSection/IDESection/content/component-next-client.md

This snippet shows a basic React client component that uses the useIntlayer hook to get localized title and content. Ensure 'use client' directive is present for client components.

```tsx
"use client";

import { useIntlayer } from "react-intlayer";

export const ClientComponentComponent = () => {
  const { title, content } = useIntlayer("client-component");

  return (
    <div>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
};

```

--------------------------------

### Install Dependencies with npm

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vite+vue.md

Install vue-router and initialize Intlayer using npm.

```bash
npm install vue-router
npx intlayer init
```

--------------------------------

### Create Bundle for Vanilla JS

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/standalone.md

This example creates an `intlayer.js` file that includes both `intlayer` and `vanilla-intlayer` packages. The bundle is minified and in ESM format, ready for browser use via a `<script>` tag.

```bash
npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
```

```bash
yarn intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
```

```bash
pnpm intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
```

```bash
bun x intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js
```

--------------------------------

### Initialize Intlayer and Set Locale Listener

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_vanilla.md

Install Intlayer and configure it to update the document's language and text direction when the locale changes. This is the basic setup for any Vanilla JS project using Intlayer.

```javascript
const { getHTMLTextDir } = window.Intlayer;
const { installIntlayer, useLocale } = window.VanillaIntlayer;

installIntlayer();

useLocale({
  onLocaleChange: (locale) => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  },
});
```

--------------------------------

### Example System Prompt for RAG Assistant

Source: https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/rag_powered_documentation_assistant.md

This prompt structure is used to guide the AI assistant by providing relevant documentation chunks alongside the user's query. It includes metadata for each chunk like document name, chunk identifier, and URL.

```txt
System prompt :

You are a helpful assistant that can answer questions about the Intlayer documentation.

Related chunks :

-----
docName: "getting-started"
docChunk: "1/3"
docUrl: "https://example.com/docs/en/getting-started"
---

# How to get started

...

-----
docName: "another-doc"
docChunk: "1/5"
docUrl: "https://example.com/docs/en/another-doc"
---

# Another doc

...

```

```txt
User query :

How to get started?

```

--------------------------------

### Intlayer Configuration Example

Source: https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md

An example Intlayer configuration file demonstrating all available options for internationalization, dictionary settings, and routing.

```typescript
import { Locales, type IntlayerConfig } from "intlayer";
import { nextjsRewrite } from "intlayer/routing";
import { syncJSON } from "@intlayer/sync-json-plugin";
import { z } from "zod";

/**
 * Example Intlayer configuration file showing all available options.
 */
const config: IntlayerConfig = {
  /**
   * Configuration for internationalization settings.
   */
  internationalization: {
    /**
     * List of supported locales in the application.
     * Default: [Locales.ENGLISH]
     */
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],

    /**
     * List of required locales that must be defined in every dictionary.
     * If empty, all locales are required in `strict` mode.
     * Default: []
     */
    requiredLocales: [Locales.ENGLISH],

    /**
     * Strictness level for internationalized content.
     * - "strict": Errors if any declared locale is missing or undeclared.
     * - "inclusive": Warnings if a declared locale is missing.
     * - "loose": Accepts any existing locale.
     * Default: "inclusive"
     */
    strictMode: "inclusive",

    /**
     * Default locale used as a fallback if the requested locale is not found.
     * Default: Locales.ENGLISH
     */
    defaultLocale: Locales.ENGLISH,
  },

  /**
   * Settings that control dictionary operations and fallback behavior.
   */
  dictionary: {
    /**
     * Controls how dictionaries are imported.
     * - "static": Statically imported at build time.
     * - "dynamic": Dynamically imported using Suspense.
     * - "fetch": Fetched dynamically via the live sync API.
     * Default: "static"
     */
    importMode: "static",

    /**
     * Strategy for auto-filling missing translations using AI.
     * Can be a boolean or a path pattern to store filled content.
     * Default: true
     */
    fill: true,

    /**
     * Physical location of the dictionary files.
     * - "local": Stored in the local filesystem.
     * - "remote": Stored in the Intlayer CMS.
     * - "hybrid": Stored in the local filesystem and the Intlayer CMS.
     * - "plugin" (or any custom string): Provided by a plugin or a custom source.
     * Default: "local"
     */
    location: "local",

    /**
     * Whether to automatically transform content (e.g., Markdown to HTML).
     * Default: false
     */
    contentAutoTransformation: false,
  },

  /**
   * Routing and middleware configuration.
   */
  routing: {
    /**
     * Locale routing strategy.
     * - "prefix-no-default": Prefix all except the default locale (e.g., /dashboard, /fr/dashboard).
     * - "prefix-all": Prefix all locales (e.g., /en/dashboard, /fr/dashboard).
     * - "no-prefix": No locale in the URL.
     * - "search-params": Use ?locale=...
     * Default: "prefix-no-default"
     */
    mode: "prefix-no-default",

    /**
     * Enables the Intlayer locale-routing proxy (middleware).
     * When enabled, the build-tool integration (e.g. the `intlayer()` Vite plugin)
     * automatically wires the locale detection / redirect / rewrite middleware in
     * development, preview and production SSR. On Next.js, the `intlayerProxy`
     * middleware becomes a pass-through when disabled.
     * Default: true
     */
    enableProxy: true,

    /**
     * Where to store the user's selected locale.
     * Options: 'cookie', 'localStorage', 'sessionStorage', 'header', or an array of these.
     * Default: ['cookie', 'header']
     */
    storage: ["cookie", "header"],

    /**
     * Base path for the application URLs.
     * Default: ""
     */
    basePath: "",

    /**
     * Custom URL rewriting rules for locale-specific paths.
     */
    rewrite: nextjsRewrite({
      "/[locale]/about": {
        en: "/[locale]/about",
        fr: "/[locale]/a-propos",
      },
    }),

    /**
     * Maps locales to domain hostnames for domain-based routing.
     * URLs for these locales will be absolute (e.g., https://intlayer.cn/).
     * The domain implies the locale, so no locale prefix is added to the path.
     * Default: undefined
     */
    domains: {
      en: "intlayer.org",
      zh: "intlayer.cn",
    },
  },
};
```