# To use the CLI (global)
npm install -g i1n

# To use the SDK + types (in your app)
npm install i1n

# Local CLI usage (optional)
npm install -D i1n

# 1. Initialize (auth + auto-detect setup)
i1n init

# 2. Push your translation keys
i1n push

# 3. Pull translations + auto-generated TypeScript types
i1n pull

# Add to Claude Code
claude mcp add i1n -- npx i1n mcp

# Or add to .mcp.json / cursor config

{
  "mcpServers": {
    "i1n": {
      "command": "npx",
      "args": ["i1n", "mcp"]
    }
  }
}

import { init, t, setLocale } from "i1n";

// Load your translation resources
init({
  locale: "en_us",
  resources: {
    en_us: {
      auth: { login: "Login", title: "Welcome back, {user}" },
      items_one: "One item",
      items_other: "{count} items",
    },
    es_es: {
      auth: { login: "Entrar", title: "Bienvenido de nuevo, {user}" },
      items_one: "Un elemento",
      items_other: "{count} elementos",
    },
  },
});

// Autocomplete and type-safety work out of the box after 'i1n pull'
t("auth.login"); // "Login"

// Support for default values (useful during development)
t("new.key", { defaultValue: "Coming soon..." }); // "Coming soon..."

// Variables & Plurals
t("auth.title", { user: "Fran" }); // "Welcome back, Fran"
t("items", { count: 5 }); // "5 items"

// Switch language at runtime
setLocale("es_es");
t("auth.login"); // "Entrar"

import i18next from "i18next";
import { registerI1n, t } from "i1n";

// Set up i18next as usual
await i18next.init({
  lng: "en",
  resources: {
    /* ... */
  },
});

// Connect to i1n — one line
registerI1n((key, params) => i18next.t(key, params));

// Now t() uses i18next under the hood, but with strict type checking
t("common.greeting", { name: "World" }); // Powered by i18next, typed by i1n

// In your translation files:
// "items_zero": "No items"
// "items_one": "One item"
// "items_other": "{count} items"

t("items", { count: 0 }); // "No items"
t("items", { count: 1 }); // "One item"
t("items", { count: 5 }); // "5 items"

import { init, t } from "i1n";
init({ locale: "en_us", resources: { en_us: { greeting: "Hello {name}" } } });
t("greeting", { name: "World" }); // "Hello World"

import { createContext, useContext, useState, useEffect } from "react";
import { init, t, getLocale, setLocale as sdkSetLocale } from "i1n";

// 1. Initialize with wordings
// (In a real app, you'd probably import these from your locales folder)
init({
  locale: "en_us",
  resources: {
    /* ... */
  },
});

const STORAGE_KEY = "i1n-locale";
const I1nContext = createContext({
  locale: "en_us",
  setLocale: (l: string) => {},
});

// 2. Persistent Provider
export function I1nProvider({ children, defaultLocale = "en_us" }) {
  const [locale, setLocaleState] = useState(() => {
    return localStorage.getItem(STORAGE_KEY) || defaultLocale;
  });

  // Keep SDK in sync
  useEffect(() => {
    sdkSetLocale(locale);
  }, [locale]);

  const setLocale = (newLocale: string) => {
    localStorage.setItem(STORAGE_KEY, newLocale);
    setLocaleState(newLocale);
  };

  return (
    <I1nContext.Provider value={{ locale, setLocale }}>
      {children}
    </I1nContext.Provider>
  );
}

// 3. Simple Hook
export const useI1n = () => ({ t, ...useContext(I1nContext) });

const { t, setLocale } = useI1n();

return (
  <div>
    <h1>{t("auth.title", { user: "Fran" })}</h1>
    <button onClick={() => setLocale("es_es")}>Español</button>
  </div>
);

import { t } from "i1n";

// Full autocomplete & compile-time checking
t("auth.login.title");

// ERROR: Argument of type '"auth.login.titlse"' is not assignable...
t("auth.login.titlse");