your code, not beside it.
Ship your entire stack in 93 languages. No translation files. Wrap strings in ct() and a single command extracts, translates, and deploys.
import { useCt, Trans } from "@ciao-tools/react";
function ProductPage() {
const ct = useCt();
return (
<div>
<h1>{ct("스토어에 오신 것을 환영합니다")}</h1>
<Trans>
<b>엄선된</b> 컬렉션 찾아보기
</Trans>
<p>{ct("{amount:currency:USD}", { amount: 49.99 })}</p>
</div>
);
}Welcome to our store
Browse our curated collection
$49.99
Works with your stack
작동 방식
글로벌 진출을 위한 세 가지 명령어
자연스럽게 작성
컴포넌트 텍스트가 진실의 원천입니다. 키를 만들거나 JSON을 동기화할 필요가 없습니다. ct() 또는 <Trans>로 문자열을 래핑하고 계속 빌드하세요.
function Hero() {
const ct = useCt();
return <h1>{ct("다시 오신 것을 환영합니다")}</h1>;
}추출 & 번역
명령어 한 번 실행. 코드베이스의 모든 번역 가능한 문자열을 찾아 번역 엔진으로 보내고 전체 문맥 인식을 통해 반환합니다. 같은 단어라도 나타나는 위치에 따라 다른 번역이 적용됩니다.
즉시 배포
번역은 글로벌 CDN에 저장됩니다. 4개의 캐싱 레이어를 통해 로드 시간이 50ms 미만으로 유지됩니다. 배포 파이프라인을 건드리지 않고 번역을 업데이트합니다.
// Generated manifest — fully typed
export const ciaoManifest = {
languages: ["en", "es", "fr", "de"] as const,
cdnUrls: { es: "https://cdn...", fr: "https://cdn..." },
} as const;AI 번역 엔진
추출, 번역, 평가.
모든 문자열은 3단계 파이프라인을 거칩니다. 각 언어 쌍에 가장 적합한 모델이 자동 선택됩니다. 공급자를 구성할 필요가 없습니다.
컨텍스트 추출
컴포넌트 트리를 읽고 각 문자열의 의미(버튼 레이블, 제목, 구조 알림)를 파악합니다.
번역
각 언어 쌍에 가장 적합한 모델이 문자열을 번역합니다. 단어 대 단어가 아닌 문맥 인식, 의미 단위 번역.
품질 평가
각 번역의 점수를 매기고 최고 품질의 결과를 선택합니다. 모델을 선택할 필요가 없습니다.
컨텍스트가 전부를 바꾼다
같은 단어라도 위치에 따라 의미가 다릅니다. AI는 주변 문자열을 읽고 의도를 파악합니다. 수동 컨텍스트 태그가 필요 없습니다.
<div>
<img src={product.image} />
<h3>{product.name}</h3>
<span>${product.price}</span>
<button onClick={saveToWishlist}>
❤️ {ct("저장")}
</button>
</div><div>
<span className="text-4xl">🦆</span>
<p>{ct("오리가 익사하고 있어요!")}</p>
<p>{ct("남은 시간:")} 00:03</p>
<button onClick={rescue}>
🛟 {ct("저장")}
</button>
</div>개발자 경험
소스 코드가 번역 카탈로그
더 이상 키 이름을 만들 필요가 없습니다. 더 이상 찾기 위해 t('homepage.hero.cta.button') 텍스트가 무엇에 매핑되는지 파악할 필요가 없습니다. 문자열은 렌더링되는 위치에서 바로 읽을 수 있는 영어입니다.
컴포넌트는 <Trans> 컴포넌트는 텍스트 번역 시 중첩된 JSX(링크, 굵게, 스팬, 모든 요소)를 보존합니다.
function CheckoutSummary({ user, items }) {
const ct = useCt();
return (
<div>
<h1>{ct("다시 오셨군요, {name}!", { name: user.name })}</h1>
<p>{ct("{count} {count:plural:item:items} 있습니다", { count: items.length })}</p>
<p>{ct("총액: {amount:currency:USD}", { amount: 129.99 })}</p>
</div>
);
}Welcome back, Sarah!
You have 3 items
Total: $129.99
The difference
Your workflow, simplified
Traditional i18n
Ciao Tools
Never think about translations again.
점진적 도입
이미 번역이 있나요? 현재 위치에서 시작하세요.
Ciao Tools는 재작성을 요구하지 않습니다. 기존 번역을 가져와 점진적으로 도입하고, 원하는 속도로 마이그레이션하세요.
import { CiaoProvider } from "@ciao-tools/react";
// Already have translations? Pass them directly
const translations = {
es: { "안녕하세요": "Hola", "가입하기": "Registrarse" },
fr: { "안녕하세요": "Bonjour", "가입하기": "S'inscrire" },
};
<CiaoProvider translations={translations}>
<App />
</CiaoProvider>// Migrate one component at a time
function OldPage() {
return <h1>{t("pages.old.title")}</h1>; // keep this
}
function NewPage() {
const ct = useCt();
return <h1>{ct("새 페이지에 오신 것을 환영합니다")}</h1>; // start here
}기존 번역 유지
CiaoProvider에 기존 번역 맵을 직접 전달하세요. 마이그레이션이 필요하지 않습니다.
컴포넌트별 마이그레이션
기존 페이지는 기존 라이브러리를 계속 사용합니다. 새 코드는 ct() 및 <Trans>를 사용합니다. 둘 다 함께 실행됩니다.
준비되면 기존 시스템 제거
Ciao Tools를 모두 사용하면 기존 설정을 삭제하세요. 번역 키는 이제 일반 영어입니다.
Features
The complete translation platform
From string extraction to CDN delivery and live updates.
Automatic extraction
OXC and Babel plugins scan your codebase and find every ct() call and <Trans> component. Your source code is the catalog.
Context-aware translation
AI translates with full component context. "Save" in a button vs. "Save" as rescue — it gets the difference.
Global CDN hosting
Translations are hosted on a global edge network and served from the nearest node. You never manage translation files.
Live hot updates
Fix a translation and it's live in seconds. No redeploy, no cache bust, no waiting for a release cycle.
Glossary & consistency
Define key terms once and enforce them across every language. Brand names and domain vocabulary stay consistent.
Full-stack, every framework
ct() works in React, React Native, Next.js server components, and Express. One API from mobile to server.
Prompt translation
ctPrompt() translates LLM system prompts while preserving template variables, JSON schemas, code blocks, and regex. Your AI agents speak every language.
Translation memory
Every translation is cached server-side. Re-syncs only translate new or changed strings, saving time and cost.
Multilingual SEO
Hreflang links, canonical URLs, og:locale tags, and XML sitemaps. CiaoHead handles it at runtime, or generate a sitemap from the CLI.
App store translations
Translate App Store and Play Store metadata with character limit validation. Names, descriptions, keywords, and release notes.
ICU MessageFormat
Plurals, ordinals, currency, dates, numbers, and percentages. Full locale-aware formatting via the ICU standard.
Fallback chains
es-MX falls back to es, then to en. Four caching layers ensure translations are always available, even offline.
성능
기본적으로 빠르고, 우연이 아니에요
Live demo
One codebase, every language
Click a language. Text, prices, dates, and plurals all update, formatted correctly for each locale.
Handcrafted Ceramic Mug
$34.99Artisan-made with natural glazes. Perfect for your morning ritual.
얼리 액세스
먼저 줄을 서세요
Ciao Tools를 소수의 초기 사용자에게 공개합니다. 대기자 명단에 참여하시면 자리가 준비되는 대로 연락드리겠습니다.
이 사이트는 reCAPTCHA와 Google에서 보호됩니다. 개인 정보 보호 정책 그리고 서비스 약관 이 적용됩니다.
