🚀 11名のエンジニアで、1ヶ月半で0から社内商用展開まで実現
satto workspaceの技術責任者の田口（@yuki_taguchi）です。
私たちは生成AIプロダクト「satto workspace」を、11名のエンジニアが1ヶ月半で社内商用PoCまで実現しました。
他の社内システムは使用せずフロントエンド、バックエンド、インフラのすべてを、私たちのチームで作り上げました。
このたび、satto開発チームでZennのPublicationを始めました。最初の記事として、satto workspaceを支える技術基盤の全体像をご紹介します。
なぜこの記事を書くのか？
今後、担当メンバーが各技術について詳しく発信していきます。この記事はその導入として、全体像をお伝えします。
🏗️ satto workspaceを支える4つの技術基盤
私たちが1ヶ月半でここまで開発できた理由は、以下の4つの技術基盤があったからです。
📊 技術基盤の全体像
| 基盤 | 役割 | 主要技術 |
|---|---|---|
| 🌐 Multi Cloud | インフラ・可用性 | AWS + GCP + Azure, サーバーレス |
| ⚙️ Modern Framework | 開発効率・型安全性 | TypeScript, React, Hono, SST |
| 🤖 Development Process | AI活用開発 | Claude Code, Cursor + MCP, GitHub Actions |
| 🧠 RAG Architecture | AI機能の中核 | Gemini + OpenAI, OpenSearch, Mastra Agent |
それでは、1つずつ詳しく見ていきましょう。
🌐 1. Multi Cloud - 最新技術をすぐに取り入れる文化
Multi Cloudにした理由
satto workspaceでは、インフラをマルチクラウドで構成しています。メインはAWS、サブにGoogle CloudとAzureを利用しています。
基本的にはサーバーレス構成で、クラウドの進化にすぐ追随できる設計です。
🚀 新機能はまず試す、が基本
新技術を素早く評価し、安全にプロダクションへ組み込む設計と運用の仕組みがあるからこそ実現できています。
🔒 セキュリティも考慮した設計
クラウド間の接続はネットワーク層のIP制限を敷き、認証はOpenID Connectを用いた安全な接続に統一。可用性とセキュリティを両立しながら、コストも抑える設計です。
⚙️ 2. Modern Framework - 開発者体験を重視した技術選択
技術選定の基準
satto workspaceでは、型安全でセキュア、開発者体験が良く、生産性も高いことを軸に技術を選定しています。
🏗️ 全レイヤーをTypeScriptで統一
// 実際のmonorepo構成
satto-workspace/
├── apps/
│ ├── bff/ # Backend (Hono + Mastra)
│ ├── web/ # Frontend (React + TanStack Router)
│ └── newrelic/ # 監視・ログ
├── packages/
│ ├── common/ # 共通ユーティリティ
│ ├── drizzle/ # DB ORM
│ ├── sst/ # インフラ設定
│ └── typescript-config/ # TS設定共通化
└── mcp/ # Model Context Protocol
すべてのレイヤーをTypeScriptで開発するため、monorepoを採用し、pnpm workspaceで効率的なパッケージ管理とローカル開発を実現しています。
🔍 使ってる技術の詳細。
🎨 Frontend (apps/web/)
apps/web/
├── src/
│ ├── main.tsx # エントリーポイント
│ ├── components/ # UIコンポーネント群
│ ├── hooks/ # カスタムフック
│ ├── routes/ # ルーティング定義
│ ├── stores/ # 状態管理
│ ├── types/ # 型定義
│ └── utils/ # ユーティリティ関数
主な技術スタック:
- React + TanStack Router で型安全なルーティング
- TanStack Query でデータフェッチ
- Tailwind CSS でスタイリング
- @satto-workspace/sakutto-ui （独自デザインシステム）
- orval でAPI型自動生成
トレンドを取り入れつつ、型安全で快適な開発環境を整えています。
⚡ Backend (apps/bff/)
apps/bff/
├── src/
│ ├── server.ts # メインサーバー
│ ├── server-ws.ts # WebSocketサーバー
│ ├── server-stream.ts # ストリーミングサーバー
│ ├── domain/ # ドメインロジック
│ ├── handlers/ # リクエストハンドラー
│ ├── infrastructure/ # インフラ層（DB、外部API）
│ ├── middleware/ # ミドルウェア群
│ ├── routes/ # APIルート定義
│ ├── tasks/ # バックグラウンドタスク
│ ├── usecase/ # ビジネスロジック
│ └── utils/ # ユーティリティ関数
主な技術スタック:
- Hono - 日本発の軽量フレームワーク
- @mastra/core + mastra - Agent Framework
- hono-openapi + @hono/zod-openapi でスキーマファーストAPI
- Drizzle ORM + PostgreSQL でデータベース
- OpenSearch でVector Store
- AI SDK - Azure OpenAI + Google Vertex AI (Gemini)
hono-openapi と orval を併用し、TanStack向けのAPIクライアントを自動生成しています。
🏗️ Infrastructure (infra/)
infra/
├── bff/
│ ├── bff.ts # BFFサーバー設定
│ ├── bff-ws.ts # WebSocketサーバー設定
│ ├── bff-stream.ts # ストリーミングサーバー設定
│ ├── alb.ts # ロードバランサー設定
│ ├── bff-vpc.ts # VPC設定
│ ├── dynamo.ts # DynamoDB設定
│ ├── opensearch.ts # OpenSearch設定
│ ├── rds.ts # RDS設定
│ └── queues/ # SQSキュー設定
├── web/ # フロントエンドインフラ
└── newrelic/ # モニタリング設定
インフラは、SST（PulumiベースのサーバレスIaCフレームワーク）を採用し、TypeScriptで記述しています。
⚡ 開発効率化の仕組み
turborepo を採用し、turbo cache でキャッシュの効いたローカル開発を実現しています。
# 実際に使ってるコマンド
bun build # turbo buildが実行される
bun dev # 全アプリ並列開発
bun format-and-lint # Biome実行
bun typecheck # 全パッケージ型チェック
bun knip # 未使用コード検出
commit hook は lefthook を採用し、pre-commitで以下を並列実行：
- format-and-lint: Biomeでフォーマット・リント
- typecheck: TypeScript型チェック
- knip: 未使用コード検出
- secretlint: シークレット情報漏洩チェック
安全性を高めつつ、後続のActionsによる自動化にもつながる運用にしています。
🤖 3. Development Process - 開発でも生成AI使い倒し
💡 生成AIを使わないのはナンセンス
satto workspaceでは、生成AIプロダクトを作るのに開発する側が生成AIを使用できないのはナンセンスです。また、生成AIを使い倒さないとエンジニアとしてもプロダクトの先の技術イメージを描けないので開発プロセスにもAIを取り入れてます。
これが1ヶ月半での高速開発を実現した重要な要因の1つです。
🔄 実際の開発フロー
🛠️ 具体的にどうやってるか。
1️⃣ 企画と実装計画
まずはPO、PMがissueを作成し、issueコメントで**@satto この機能の実装計画を提案して**などと送信すると、GitHub Actionsが動き、Claude CodeのGitHub Actionsが動きます。
# GitHub Issueでのメンション例
@satto この機能の実装計画を提案して
リポジトリをコンテキストとしてissue内容の実装計画と注意点や、修正ファイル、新規作成を推奨されるファイルなどを調査してまとめてコメントをつけてくれます。
それを見てPO、PMが、実際の企画状況や、ユーザーヒアリング状況を元に計画を立てやすくしているのと、エンジニアが開発イメージを持てるようにしてます。
2️⃣ Agenticなコーディング
実際に開発する際は、issueのラベルに合わせた命名規則でブランチを切っていきます。
// Cursor + MCPによる開発例
const WorkspaceCard = ({ workspace }: Props) => {
// Figma MCPからデザイン情報を自動参照
// sakkuto-ui MCPからコンポーネント仕様を取得
return <Card className="workspace-card">...</Card>
}
そのブランチでissueの実装計画を参考にしつつ、CursorでFigma MCP や、デザインシステムである@satto-workspace/sakutto-ui のMCPを利用しながら、Agenticなコーディングをします。また、Auto Completeの機能を使いながら開発を効率的に行ってます。
修正後コミットメッセージもdiffを元にCursorで作成し、PRを作成する際もGitHub MCPを利用しています。
3️⃣ レビューとデプロイ
# GitHub Actionsによる自動化例
- name: AI Code Review
run: claude-code review --context=full-repo
- name: Infrastructure Diff
run: sst diff
- name: Auto Deploy
run: sst deploy --stage=prod
PRが作成されたら、各GitHub Actionsが動き、PRのレビュー、CIの自動チェック、インフラの差分チェック 、PRのラベル付を自動で行います。
その後、レビューやCIの確認がOKならマージをし、GitHub ActionsからCI/CDによりOpen ID Connectを使用してsst deployをするようになってます。
🚀 さらなる開発者体験を追い求めて
このように開発のプロセス自体を生成AI時代にそった効率化や高度化をしており、日々エンジニアの開発者体験を上げています。よりプロダクトの機能作成や価値部分へ貢献できる仕組みにこだわっています。
さらなる開発者体験を追い求めて、今週からClaude Code、Claude Code ActionsやJulesなどの導入を始めてます。
🧠 4. RAG Architecture Design - 企業のデータを活用
🎯 satto workspaceのメイン機能
satto workspaceでは、企業が持つさまざまなデータを対象にKnowledge Baseを作成します。
📊 データ処理の流れ
そのため各ドキュメント形式から、あるObjectへETL処理を行って、更にそれをGeminiでクレンジングをし、適切なチャンキングを経てembeddingをしData Storeに格納してます。
| ステップ | やってること |
|---|---|
| 1. ETL処理 | 各ドキュメント形式から共通のObjectへ変換 |
| 2. Geminiクレンジング | データの品質向上・正規化 |
| 3. チャンキング | 適切な粒度に分割 |
| 4. Data Store格納 | embedding後にデータストアへ保存 |
💡 なぜ「Data Store」と呼んでるか。
このDataStoreと呼んでいるのも、Vector Dataだけではなく工夫して保存しているのでDataStore（クラウド）と呼んでます。
Vector Dataだけじゃなく、いろいろと工夫したデータを入れてます。
🤖 Agentがツールを使い分ける
// Agentによるツール選択の例
const sample = new Agent({
name: "Sample Agent",
instructions: ({
runtimeContext,
}: {
runtimeContext: RuntimeContext<ResearchManagerContext>;
}) => {
return runtimeContext.get("samplePrompt");
},
model: vertex("gemini-2.5-flash"),
memory,
tools: {
webSearcher,
cloudFileSearcher,
},
});
Userからのインプットがあると、satto workspaceのAgentが各Toolを持っており、Web検索、クラウドからのKnowledge Base検索などを行います。Agentがqueryに対してTool選択をしGeminiやOpenAIと連携し、精度がよい回答を生成してuserへ返答します。
使ってるLLM: Google Vertex AI (Gemini) + Azure OpenAI
🎯 なぜシングルエージェントにしたか
しかし、マルチエージェントが未来であることは間違いありません。
そのため、現在チーム内で絶賛研究中であり、コストとパフォーマンスのバランスが取れたより高度なアーキテクチャの実現に向けてプロトタイピングを進めています。
これらのRAGやAIのアーキテクチャについては我々もまだ研究中です。
🎉 最後に
🏆 実際にやったこと振り返り
最後になりますが、satto workspaceの基盤を支える裏側には様々なモダンな技術やフレームワーク、インフラ技術にAI技術とたくさんの最先端で支えられています。
それを判断でき、開発を迅速に進めつつ、日々進化できるスーパーなエンジニア達が揃っています。
🚀 これから書いていく記事
これから開発メンバーが各技術について、色々発信していきます！
こんなの書いてくよ:
- neverthrowとDDD、クリーンアーキテクチャでの関数型プログラミング
- SST (Serverless Stack) でのInfrastructure as Code
- Claude Code Actions使ったAI開発プロセス
- RAGについて
- Cursor + MCP でのAgentプログラミング実践
- 日々のやっていく上でのTipsなどなど
📚 フォローしてください！
各記事では、実際のコード例や設定ファイル、運用のコツなどできるだけ具体的に書いていく予定です。
satto workspaceの技術に興味を持ってくれた方は、ぜひフォローしてお待ちください！
執筆者: 田口（@yuki_taguchi） - satto workspace 技術責任者
satto workspace: https://workspace.satto.me
Discussion