Intlayer Mcp I18n Solution & Cms

Name: Intlayer Mcp I18n Solution & Cms
Author: aymericzip

本地服务

github.com/aymericzip开发工具861今天更新

代码仓库

关于 Intlayer Mcp I18n Solution & Cms

Intlayer 是一款框架无关的 i18n 方案，提供按组件组织的多语言内容文件、TypeScript 类型支持、AI 翻译以及免费的可视化编辑器和 CMS。适合 Web 与移动应用开发者，希望把翻译内容与组件放在一起管理。

主要功能

01按语言声明内容文件，支持 TypeScript 自动补全
02基于编译器的内容提取与字典生成
03AI 翻译，可使用自有 API Key
04可视化编辑器与 CMS 管理多语言内容
05MCP 服务，用于 IDE 中的内容与 i18n 工作流

适用场景

01为 Next.js 或 React 应用添加多语言支持
02让文案撰写人员通过可视化编辑器维护翻译内容
03在 IDE 中通过 MCP 服务自动化内容管理和 i18n 工作流

MCP 相关

该项目提供 MCP 服务，向 IDE 和 AI 工具暴露内容管理与 i18n 工作流相关的能力。

#i18n #cms #translation #content-management #typescript

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "intlayer": {
      "command": "npx",
      "args": [
        "-y",
        "@intlayer/mcp"
      ]
    }
  }
}

启动命令npx -y @intlayer/mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@intlayer/mcpstdio

工具

收录的工具列表 · 更新于 3 周前

参数	类型	必填	说明
projectRoot	string	是	项目根目录

详细介绍

组件级 i18n

AI 驱动的翻译。可视化编辑器。多语言 CMS。

文档 • Next.js • React + Vite • CMS • Discord

观看视频

什么是 Intlayer？

大多数 i18n 库要么过于复杂，要么过于僵化，或是并非为现代框架打造。

Intlayer 是一款面向 Web 和移动应用的现代 i18n 解决方案。
它与框架无关，由 AI 驱动，并提供免费的 CMS 和可视化编辑器。

借助按区域设置划分的内容文件、TypeScript 自动补全、可进行 tree-shaking 的字典以及 CI/CD 集成，Intlayer 让国际化变得更快、更简洁、更智能。

Intlayer 的主要优势：

功能	描述
	跨框架支持 Intlayer 兼容所有主流框架和库，包括 Next.js、React、Vite、Vue.js、Nuxt、Preact、Express 等。
	由 JavaScript 驱动的内容管理充分利用 JavaScript 的灵活性，高效地定义和管理内容。 - 内容声明
	按区域设置的内容声明文件只需声明一次内容，即可在自动生成前加快开发速度。 - 按区域设置的内容声明文件
	编译器 Intlayer 编译器会自动从组件中提取内容并生成词典文件。 - 编译器
	类型安全的环境借助 TypeScript 确保内容定义和代码没有错误，同时享受 IDE 自动补全功能。 - TypeScript 配置
	简化配置只需最少的配置即可快速上手。轻松调整国际化、路由、AI、构建和内容处理设置。 - 探索 Next.js 集成
	简化内容获取无需为每段内容调用 `t` 函数。使用单个 Hook 即可直接获取所有内容。 - React 集成
	一致的服务端组件实现非常适用于 Next.js 服务端组件。客户端和服务端组件使用相同的实现，无需在每个服务端组件间传递 `t` 函数。 - 服务端组件
	有条理的代码库让代码库更有条理：一个组件对应同一文件夹中的一个词典。将翻译放在对应组件附近，提升可维护性和清晰度。 - Intlayer 的工作原理
	增强路由全面支持应用路由，可无缝适配复杂的应用结构，适用于 Next.js、React、Vite、Vue.js 等。 - 探索 Next.js 集成
	Markdown 支持导入并解析区域设置文件和远程 Markdown，支持隐私政策、文档等多语言内容。解析 Markdown 元数据，并使其可在代码中访问。 - 内容文件
	免费可视化编辑器和 CMS 为内容创作者提供免费的可视化编辑器和 CMS，无需使用本地化平台。通过 Git 保持内容同步，也可以通过 CMS 将内容全部或部分外置。 - Intlayer 编辑器 - Intlayer CMS
	支持 Tree-shaking 的内容支持 Tree-shaking 的内容可减小最终构建包的体积。按组件加载内容，并从构建包中排除所有未使用的内容。支持延迟加载，以提升应用加载效率。 - 应用构建优化
	静态渲染不会阻碍静态渲染。 - Next.js 集成
	AI 驱动的翻译使用 Intlayer 的高级 AI 翻译工具，只需单击一次，即可将网站转换为 231 种语言；你可以使用自己的 AI 提供商和 API 密钥。 - CI/CD 集成 - Intlayer CLI - 自动填充
	MCP 服务集成提供 MCP（模型上下文协议）服务，用于 IDE 自动化，让你可以直接在开发环境中无缝管理内容并执行 i18n 工作流。 - MCP 服务
	VSCode 扩展 Intlayer 提供 VSCode 扩展，帮助你管理内容和翻译、构建词典、翻译内容等。 - VSCode 扩展
	互操作性支持与 react-i18next、next-i18next、next-intl、react-intl、vue-i18n 互操作。 - Intlayer 与 react-intl - Intlayer 与 next-intl - Intlayer 与 next-i18next - Intlayer 与 vue-i18n - Intlayer 兼容适配器
	性能与基准测试使用高级 Tree-shaking 和动态加载来提升性能，并尽可能保持解决方案轻量。 - 性能与基准测试

📦 安装

今天就开启 Intlayer 之旅，体验更流畅、更强大的国际化方式。

npm install intlayer react-intlayer

⚡ 快速入门（Next.js）

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

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

export default config;

// app/home.content.ts
import { t, type Dictionary } from "intlayer";

const content = {
  key: "home",
  content: {
    title: t({
      en: "Home",
      fr: "Accueil",
      es: "Inicio",
    }),
  },
} satisfies Dictionary;

export default content;

// app/page.tsx
import { useIntlayer } from "react-intlayer";

const HomePage = () => {
  const { title } = useIntlayer("home");

  return <h1>{title}</h1>;
};

获取完整指南 →