@intlayer/docs 9.0.0-canary.2 → 9.0.0-canary.4

package/docs/it/plugins/sync-json.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-13
-updatedAt: 2025-12-13
+updatedAt: 2026-06-21
 title: Plugin Sync JSON
 description: Sincronizza i dizionari Intlayer con file JSON i18n di terze parti (i18next, next-intl, react-intl, vue-i18n e altri). Mantieni il tuo i18n esistente mentre usi Intlayer per gestire, tradurre e testare i tuoi messaggi.
 keywords:
@@ -24,6 +24,9 @@ slugs:
   - sync-json
 youtubeVideo: https://www.youtube.com/watch?v=MpGMxniDHNg
 history:
+  - version: 9.0.0
+    date: 2026-06-21
+    changes: "Aggiunta l'opzione splitKeys (un dizionario per chiave namespace di primo livello) per layout a file singolo di next-intl / react-intl"
   - version: 7.5.0
     date: 2025-12-13
     changes: "Aggiunto supporto per i formati ICU e i18next"
@@ -62,7 +65,63 @@ pnpm add -D @intlayer/sync-json-plugin
 npm i -D @intlayer/sync-json-plugin
 ```
 
-## Avvio rapido
+## Plugins
+
+Questo pacchetto fornisce due plugin:
+
+- `loadJSON`: Carica file JSON nei dizionari Intlayer.
+  - Questo plugin viene utilizzato per caricare file JSON da una sorgente e verrà caricato nei dizionari Intlayer. Può scansionare l'intera codebase e cercare file JSON specifici.
+    Questo plugin può essere utilizzato
+    - se utilizzi una libreria i18n che impone una posizione specifica per il caricamento dei tuoi JSON (es: `next-intl`, `i18next`, `react-intl`, `vue-i18n`, ecc.), ma vuoi posizionare la dichiarazione del tuo contenuto dove vuoi nella tua codebase.
+    - Può anche essere utilizzato se vuoi recuperare i tuoi messaggi da una sorgente remota (es: un CMS, un'API, ecc.) e memorizzare i tuoi messaggi in file JSON.
+
+  > Sotto il cofano, questo plugin scansionerà l'intera codebase e cercherà file JSON specifici e li caricherà nei dizionari Intlayer.
+  > Nota che questo plugin non scriverà l'output e le traduzioni nei file JSON.
+
+- `syncJSON`: Sincronizza i file JSON con i dizionari Intlayer.
+  - Questo plugin viene utilizzato per sincronizzare i file JSON con i dizionari Intlayer. Può scansionare la posizione data e caricare i JSON che corrispondono al pattern per file JSON specifici. Questo plugin è utile se vuoi ottenere i benefici di Intlayer mentre usi un'altra libreria i18n.
+
+## Usare entrambi i plugin
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  // Mantieni i tuoi file JSON attuali sincronizzati con i dizionari Intlayer
+  plugins: [
+    /**
+     * Caricherà tutti i file JSON in src che corrispondono al pattern {key}.i18n json
+     */
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      locale: Locales.ENGLISH,
+      priority: 1, // Assicura che questi file JSON abbiano la precedenza sui file in `./locales/en/${key}.json`
+      format: "intlayer", // Formato del contenuto JSON
+    }),
+    /**
+     * Caricherà e scriverà l'output e le traduzioni nei file JSON nella directory locales
+     */
+    syncJSON({
+      format: "i18next",
+      source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      priority: 0,
+      format: "i18next",
+    }),
+  ],
+};
+
+export default config;
+```
+
+## `syncJSON` plugin
+
+### Avvio rapido
 
 Aggiungi il plugin al tuo `intlayer.config.ts` e indirizzalo alla tua struttura JSON esistente.
 
@@ -81,6 +140,7 @@ const config: IntlayerConfig = {
     syncJSON({
       // Layout per locale, per namespace (es. next-intl, i18next con namespaces)
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      format: "icu",
     }),
   ],
 };
@@ -91,14 +151,27 @@ export default config;
 Alternativa: file singolo per locale (comune con configurazioni i18next/react-intl):
 
 ```ts fileName="intlayer.config.ts"
-plugins: [
-  syncJSON({
-    source: ({ locale }) => `./locales/${locale}.json`,
-  }),
-];
+import { Locales, type IntlayerConfig } from "intlayer";
+import { syncJSON } from "@intlayer/sync-json-plugin";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      format: "i18next",
+      source: ({ locale }) => `./locales/${locale}.json`,
+      format: "i18next",
+    }),
+  ],
+};
+
+export default config;
 ```
 
-### Come funziona
+#### Come funziona
 
 - Lettura: il plugin individua i file JSON dal tuo builder `source` e li carica come dizionari Intlayer.
 - Scrittura: dopo le build e i riempimenti, scrive i JSON localizzati negli stessi percorsi (con una newline finale per evitare problemi di formattazione).
@@ -112,6 +185,7 @@ syncJSON({
   location?: string, // etichetta opzionale, predefinito: "plugin"
   priority?: number, // priorità opzionale per la risoluzione dei conflitti, predefinito: 0
   format?: 'intlayer' | 'icu' | 'i18next', // formattatore opzionale, usato per la compatibilità con il runtime Intlayer
+  splitKeys?: boolean, // opzionale, divide un singolo file in un dizionario per chiave di primo livello (rilevamento automatico)
 });
 ```
 
@@ -136,17 +210,49 @@ syncJSON({
 }),
 ```
 
-## Più sorgenti JSON e priorità
+#### `splitKeys` (boolean)
+
+Controlla se un singolo file JSON le cui **chiavi di primo livello sono namespace** debba diventare un dizionario per ogni chiave di primo livello, invece di un singolo dizionario che contiene l'intero file.
+
+Questo corrisponde al modello di namespace di librerie come `next-intl` e `react-intl`, dove un file `messages/{locale}.json` raggruppa diversi namespace tramite le sue chiavi di primo livello, ciascuna indirizzata indipendentemente (ad esempio `useTranslations('Hero')` si risolve nel dizionario `Hero`).
+
+- `undefined` (predefinito): **rilevamento automatico** — il file viene diviso quando il pattern `source` non ha un segmento `{key}` (un file contiene ogni namespace), e mantenuto come un singolo dizionario altrimenti (un file per chiave).
+- `true`: divide sempre ogni chiave di primo livello nel proprio dizionario.
+- `false`: non divide mai; l'intero file diventa un singolo dizionario.
+
+Dato un singolo file `messages/{locale}.json`:
+
+```json fileName="messages/en.json"
+{
+  "Hero": { "title": "Full-stack developer" },
+  "Nav": { "work": "Work", "about": "About" },
+  "About": { "lead": "I build apps end to end." }
+}
+```
+
+```ts fileName="intlayer.config.ts"
+syncJSON({
+  format: "icu",
+  source: ({ locale }) => `./messages/${locale}.json`,
+  // splitKeys: true, // implicito perché il pattern non ha un segmento `{key}`
+}),
+```
+
+Questo produce tre dizionari — `Hero`, `Nav` e `About` — quindi `useTranslations('Hero')` (next-intl) si risolve correttamente. Durante la riscrittura, tutti i namespace vengono riassemblati nello stesso file per locale.
+
+> Quando mantieni il segmento `{key}` esplicito nel tuo `source` (ad esempio `./locales/${locale}/${key}.json`), ogni file è già un namespace, quindi la divisione è disabilitata per impostazione predefinita.
+
+### Multiple JSON sources and priority
 
 Puoi aggiungere più plugin `syncJSON` per sincronizzare diverse sorgenti JSON. Questo è utile quando hai più librerie i18n o diverse strutture JSON nel tuo progetto.
 
-### Sistema di priorità
+#### Sistema di priorità
 
 Quando più plugin puntano alla stessa chiave del dizionario, il parametro `priority` determina quale plugin ha la precedenza:
 
 - I numeri di priorità più alti prevalgono su quelli più bassi
 - La priorità predefinita dei file `.content` è `0`
-- La priorità predefinita dei file di contenuto dei plugin è `-1`
+- La priorità predefinita dei plugin è `0`
 - I plugin con la stessa priorità vengono elaborati nell'ordine in cui appaiono nella configurazione
 
 ```ts fileName="intlayer.config.ts"
@@ -189,73 +295,140 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Risoluzione dei conflitti
+## Load JSON plugin
 
-Quando la stessa chiave di traduzione esiste in più sorgenti JSON:
+### Quick start
 
-1. Il plugin con la priorità più alta determina il valore finale
-2. Le sorgenti con priorità inferiore vengono usate come fallback per le chiavi mancanti
-3. Questo permette di mantenere le traduzioni legacy mentre si migra gradualmente verso nuove strutture
+Aggiungi il plugin al tuo `intlayer.config.ts` per importare i file JSON esistenti come dizionari Intlayer. Questo plugin è di sola lettura (nessuna scrittura su disco):
 
-## Integrazioni
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON } from "@intlayer/sync-json-plugin";
 
-Di seguito sono riportate le mappature comuni. Mantieni il tuo runtime intatto; aggiungi solo il plugin.
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+
+  plugins: [
+    // Ingerisci messaggi JSON situati ovunque nel tuo albero sorgente
+    loadJSON({
+      source: ({ key }) => `./src/**/${key}.i18n.json`,
+      // Carica una singola locale per istanza del plugin (predefinito alla defaultLocale della configurazione)
+      locale: Locales.ENGLISH,
+      priority: 0,
+    }),
+  ],
+};
 
-### i18next
+export default config;
+```
 
-Layout tipico dei file: `./public/locales/{locale}/{namespace}.json` o `./locales/{locale}/{namespace}.json`.
+Alternativa: layout per locale, ancora di sola lettura (viene caricata solo la locale selezionata):
 
 ```ts fileName="intlayer.config.ts"
-import { syncJSON } from "@intlayer/sync-json-plugin";
+import { Locales, type IntlayerConfig } from "intlayer";
+import { loadJSON } from "@intlayer/sync-json-plugin";
 
-export default {
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
   plugins: [
-    syncJSON({
-      format: "i18next",
+    loadJSON({
+      // Solo i file per Locales.FRENCH verranno caricati da questo pattern
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+      locale: Locales.FRENCH,
     }),
   ],
 };
+
+export default config;
 ```
 
-### next-intl
+### How it works
 
-Messaggi JSON per locale (spesso `./messages/{locale}.json`) o per namespace.
+- Scopri: costruisce un glob dal tuo builder `source` e raccoglie i file JSON corrispondenti.
+- Ingerisci: carica ogni file JSON come dizionario Intlayer con la `locale` fornita.
+- Sola lettura: non scrive né formatta i file di output; usa `syncJSON` se hai bisogno di una sincronizzazione bidirezionale.
+- Pronto per l'auto-fill: definisce un pattern `fill` in modo che `intlayer content fill` possa popolare le chiavi mancanti.
 
-```ts fileName="intlayer.config.ts"
-plugins: [
-  syncJSON({
-    source: ({ locale, key }) => `./messages/${locale}/${key}.json`,
-  }),
-];
+### API
+
+```ts
+loadJSON({
+  // Costruisci i percorsi ai tuoi JSON. `locale` è opzionale se la tua struttura non ha un segmento locale
+  source: ({ key, locale }) => string,
+
+  // Locale di destinazione per i dizionari caricati da questa istanza del plugin
+  // Predefinito a configuration.internationalization.defaultLocale
+  locale?: Locale,
+
+  // Etichetta opzionale per identificare la sorgente
+  location?: string, // predefinito: "plugin"
+
+  // Priorità utilizzata per la risoluzione dei conflitti contro altre sorgenti
+  priority?: number, // predefinito: 0
+
+  // Formattatore opzionale per il contenuto JSON
+  format?: 'intlayer' | 'icu' | 'i18next', // predefinito: 'intlayer'
+
+  // Divide un singolo file in un dizionario per chiave di primo livello (rilevamento automatico)
+  splitKeys?: boolean,
+});
 ```
 
-Vedi anche: `docs/it/intlayer_with_next-intl.md`.
+#### `format` ('intlayer' | 'icu' | 'i18next')
 
-### react-intl
+Specifica il formattatore da utilizzare per il contenuto del dizionario durante il caricamento dei file JSON. Ciò consente di utilizzare diverse sintassi di formattazione dei messaggi compatibili con varie librerie i18n.
 
-È comune un singolo JSON per locale:
+- `'intlayer'`: Il formattatore Intlayer predefinito (predefinito).
+- `'icu'`: Utilizza la formattazione dei messaggi ICU (compatibile con librerie come react-intl, vue-i18n).
+- `'i18next'`: Utilizza la formattazione dei messaggi i18next (compatibile con i18next, next-i18next, Solid-i18next).
 
-```ts fileName="intlayer.config.ts"
-plugins: [
-  syncJSON({
-    source: ({ locale }) => `./locales/${locale}.json`,
-  }),
-];
+**Esempio:**
+
+```ts
+loadJSON({
+  source: ({ key }) => `./src/**/${key}.i18n.json`,
+  locale: Locales.ENGLISH,
+  format: "icu", // Usa la formattazione ICU per la compatibilità
+}),
 ```
 
-### vue-i18n
+#### `splitKeys` (boolean)
 
-Può essere un singolo file per locale o per namespace:
+Stesso comportamento di [`syncJSON`](#splitkeys-boolean): quando un singolo file JSON raggruppa diversi namespace tramite le sue chiavi di primo livello, ogni chiave di primo livello diventa il proprio dizionario.
 
-```ts fileName="intlayer.config.ts"
-plugins: [
-  syncJSON({
-    source: ({ key, locale }) => `./src/locales/${locale}/${key}.json`,
-  }),
-];
+- `undefined` (predefinito): **rilevamento automatico** — divide quando il pattern `source` non ha un segmento `{key}`, singolo dizionario altrimenti.
+- `true` / `false`: forza o disabilita la divisione.
+
+```ts
+loadJSON({
+  source: ({ locale }) => `./messages/${locale}.json`,
+  format: "icu",
+  // splitKeys auto-enabled: `Hero`, `Nav`, `About`, … ciascuno diventa un dizionario
+}),
 ```
 
+### Behavior and conventions
+
+- Se la tua maschera `source` include un segnaposto per la locale, vengono ingeriti solo i file per la `locale` selezionata.
+- Se non c'è un segmento `{key}` nella tua maschera, ogni chiave di primo livello del file diventa il proprio dizionario per impostazione predefinita (vedi [`splitKeys`](#splitkeys-boolean)). Imposta `splitKeys: false` per caricare invece l'intero file come un singolo dizionario `index`.
+- Le chiavi sono derivate dai percorsi dei file sostituendo il segnaposto `{key}` nel tuo builder `source`.
+- Il plugin utilizza solo i file scoperti e non fabbrica locali o chiavi mancanti.
+- Il percorso `fill` è inferito dal tuo `source` e utilizzato per aggiornare i valori mancanti tramite CLI quando scegli di farlo.
+
+## Conflict resolution
+
+Quando la stessa chiave di traduzione esiste in più sorgenti JSON:
+
+1. Il plugin con la priorità più alta determina il valore finale
+2. Le sorgenti con priorità inferiore vengono usate come fallback per le chiavi mancanti
+3. Questo permette di mantenere le traduzioni legacy mentre si migra gradualmente verso nuove strutture
+
 ## CLI
 
 I file JSON sincronizzati saranno considerati come altri file `.content`. Ciò significa che tutti i comandi di intlayer saranno disponibili per i file JSON sincronizzati. Inclusi:
@@ -268,13 +441,13 @@ I file JSON sincronizzati saranno considerati come altri file `.content`. Ciò s
 
 Vedi [Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/cli/index.md) per maggiori dettagli.
 
-## Limitazioni (attuali)
+## Limitations (current)
 
 - Nessun supporto per inserimenti o plurali/ICU quando si utilizzano librerie di terze parti.
 - L'editor visuale non è ancora disponibile per runtime non Intlayer.
 - Sincronizzazione solo di file JSON; i formati di catalogo non JSON non sono supportati.
 
-## Perché è importante
+## Why this matters
 
 - Possiamo raccomandare soluzioni i18n consolidate e posizionare Intlayer come un componente aggiuntivo.
 - Sfruttiamo la loro SEO/parole chiave con tutorial che terminano suggerendo Intlayer per gestire JSON.

package/docs/ja/intlayer_with_adonisjs.md

@@ -59,24 +59,40 @@ See [Application Template](https://github.com/aymericzip/intlayer-adonis-templat
 
 `adonis-intlayer` の使用を開始するには、npm を使用してパッケージをインストールします。
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
+
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
+
 ```bash packageManager="npm"
 npm install intlayer adonis-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer adonis-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer adonis-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer adonis-intlayer
-bun x intlayer init
 ```
 
 ### 設定

package/docs/ja/intlayer_with_analog.md

@@ -101,24 +101,40 @@ GitHubで[アプリケーションテンプレート](https://github.com/aymeric
 
 npmを使用して必要なパッケージをインストールします：
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
+
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer vite-intlayer
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer vite-intlayer
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer vite-intlayer
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer vite-intlayer
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/ja/intlayer_with_angular_19.md

@@ -104,28 +104,44 @@ GitHubで [アプリケーションテンプレート](https://github.com/aymeri
 
 npmを使用して必要なパッケージをインストールします：
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
+
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-webpack --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-webpack --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-webpack --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-webpack --dev
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/ja/intlayer_with_angular_21.md

@@ -106,28 +106,44 @@ GitHubで[アプリケーションテンプレート](https://github.com/aymeric
 
 npmを使用して必要なパッケージをインストールします：
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
+
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
+
 ```bash packageManager="npm"
 npm install intlayer angular-intlayer
 npm install @angular-builders/custom-esbuild --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer angular-intlayer
 pnpm add @angular-builders/custom-esbuild --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer angular-intlayer
 yarn add @angular-builders/custom-esbuild --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer angular-intlayer
 bun add @angular-builders/custom-esbuild --dev
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/ja/intlayer_with_astro_lit.md

@@ -105,27 +105,39 @@ GitHubで[アプリケーションテンプレート](https://github.com/aymeric
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
 ```bash packageManager="npm"
-npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
 
-npx intlayer init
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
-
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
-
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
-
-bun x intlayer init
 ```
 
 - **intlayer**

package/docs/ja/intlayer_with_astro_preact.md

@@ -104,27 +104,39 @@ GitHubで[アプリケーションテンプレート](https://github.com/aymeric
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
 ```bash packageManager="npm"
-npm install intlayer astro-intlayer preact preact-intlayer @astrojs/preact
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> `--interactive` フラグはオプションです。AI エージェントの場合は `intlayer-cli init` を使用してください。
 
-npx intlayer init
+> このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
-
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
-
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
-
-bun x intlayer init
 ```
 
 - **intlayer**