Sarashina × PWA

Sarashina Mercury

Sarashina を、あなたの手元で。API キーひとつで動く国産 LLM の PWA クライアントです。 チャット・翻訳・RAG・Guard を、サーバーに鍵を預けず、オフラインでも使える単一アプリにまとめました。

v0.1.3 React 19 TypeScript Vite Tailwind CSS v4 PWA
アプリを開く GitHub 設計ガイド

Sarashina Mercury とは

Sarashina は SB Intuitions が提供する国産の大規模言語モデルです。 sarashina-mercury は、その Sarashina API をブラウザから直接利用するための非公式の PWA クライアント。 ユーザー自身の API キーをローカル（ブラウザ）に保存し、チャット・翻訳・RAG・Guard を、 インストール可能なひとつのアプリにまとめました。

なぜ「Mercury」なのか

Sarashina API は「日本語らしさ」を体現するモデルです。婉曲表現・省略・文脈推論といった日本語の豊かさを、 単なる機能の羅列ではなく編集体験として昇華させる――その手本とするのが Mercury Editor です。 sarashina-mercury は、API キーをサーバーに預けず、ブラウザと Sarashina API だけを直接つなぐことで、 データ主権を保ったまま快適な PWA を目指します。

UX/UI の設計原則

原則 一

日本語の「間」を尊重する

省略や婉曲を前提とし、完全な文の強制より意図の補完を支援します。

原則 二

敬語レベルを可視化する

丁寧語・謙譲語・尊敬語のトーンを選択し、翻訳の前にプレビューできます。

原則 三

遅延を設計する

ストリーミング表示と進行状況の可視化で、待機の不安を軽減します。

原則 四

安全性の透明性を保つ

Guard の判定は威圧的でなく、前向きな回復導線として提示します。

何ができるか

対話する・翻訳する・根拠を探す・安全を確かめる。Sarashina のモデル群を、日常の言葉で使える UI にしました。

Chat Completions

対話する

sarashina3-mini / sarashina3-nano を切り替えられるストリーミングチャット。Markdown と GFM をそのまま描画し、生成中は「停止」でいつでも中断できます。

Translate

翻訳する

方向（日→英 / 英→日）とトーン（business-formal / business-casual / technical / marketing）を選び、原文と訳文を並べて編集できる対訳エディタ。段落をホバーすると対応箇所を強調し、訳文はその場で編集・コピーでき、翻訳中はいつでも停止できます。

Embeddings + Rerank

根拠を探す

Embeddings と Rerank で文書を関連度順に並べ、引用元を本文からたどれる根拠付きの回答を返します。回答生成は中断でき、任意で出力を Guard でチェックできます。

Guard

安全を確かめる

入力・出力テキストの安全性を sarashina3-guard で判定。設定で送信前・応答後の自動チェックを有効化でき、威圧せず、前向きな回復導線として提示します。

Installable

オフラインで使う

vite-plugin-pwa と Workbox によるインストール可能な PWA。端末のホーム画面からアプリとして起動できます。

Data sovereignty

鍵を持ち歩く

API キーはブラウザの localStorage にのみ保存。サーバーへは送らず、リクエストごとに直接利用します。

対応モデル

モデル ID コンテキスト 主な用途 API カテゴリ
sarashina3-mini128k tokens標準対話、Tool-calling、数学・コーディングChat Completions
sarashina3-nano128k tokens高速バッチ処理（抽出・要約・分類）Chat Completions
sarashina3-guard64k tokens入出力の安全性判定・モデレーションChat Completions
sarashina3-embedding8,000 tokensテキストベクトル化、RAG 候補抽出Embeddings
sarashina3-rerank8,000 tokensクエリと文書の関連度スコアリングRerank
sarashina3-translate5,000 文字日英・英日訳（文脈・トーン考慮）Translate

アーキテクチャ

サーバーを介さず、ブラウザから Sarashina API を直接呼び出すシンプルな SPA です。 CORS は薄い Cloudflare Worker プロキシで補います。

ブラウザPWA / React SPA
→
WorkerCORS プロキシ
→
Sarashina APIapi.sarashina.ai/v1
項目内容
FRAMEWORKVite + React 19
LANGUAGETypeScript
STYLINGTailwind CSS v4
STATEzustand + persist
STORAGElocalStorage（API キー） / IndexedDB（会話履歴）
PWAvite-plugin-pwa + Workbox
STREAMINGSSE over fetch（AbortSignal による中断対応）
PROXYCloudflare Worker（worker/）
CORS とプロキシ Sarashina API は CORS ヘッダーを返さないため、ブラウザから直接呼び出すとブロックされます。 本リポジトリの薄い Worker プロキシがリクエストを中継します。API キーはブラウザ側に保存され、 リクエストごとに Authorization ヘッダーで素通しされます（プロキシはキーを保存しません）。

はじめ方

ローカルで動かすのは 3 ステップです。API キーはアプリの「設定」から登録します。

git clone https://github.com/watanabe3tipapa/sarashina-mercury.git
cd sarashina-mercury
pnpm install

pnpm dev     # 開発サーバーを起動
pnpm build   # 型チェック + 本番ビルド → dist/
セキュリティ API キーは localStorage に保存され、Sarashina API 以外へ送信されません。 公開端末での利用は避け、必要に応じてキーをローテーションしてください。
公開アプリの設定 GitHub Pages で公開したアプリを動作させるには、リポジトリの Settings → Secrets and variables → Actions → Variables で変数 SARASHINA_API_BASE に Cloudflare Worker の URL（例: https://sarashina-proxy.<your-subdomain>.workers.dev/v1）を設定してください。 ビルド時に VITE_SARASHINA_API_BASE として注入され、公開アプリから Sarashina API に到達できるようになります。
プロキシの URL は非公開です 実際に稼働しているプロキシの URL は本公開ページでは開示していません。各自の環境で用意してください。