e28eba01e1
Co-authored-by: paisley <8197966+su8su@users.noreply.github.com> Co-authored-by: zuolingxuan <zuolingxuan@bytedance.com>
407 lines
22 KiB
Markdown
407 lines
22 KiB
Markdown
|
||
<p align="center">
|
||
<img src="src/assets/logo.svg" width="128" height="128" alt="ClawX Logo" />
|
||
</p>
|
||
|
||
<h1 align="center">ClawX</h1>
|
||
|
||
<p align="center">
|
||
<strong>OpenClaw AIエージェントのためのデスクトップインターフェース</strong>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="#機能">機能</a> •
|
||
<a href="#なぜclawxなのか">なぜClawXなのか</a> •
|
||
<a href="#はじめに">はじめに</a> •
|
||
<a href="#アーキテクチャ">アーキテクチャ</a> •
|
||
<a href="#開発">開発</a> •
|
||
<a href="#コントリビューション">コントリビューション</a>
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="https://img.shields.io/badge/platform-MacOS%20%7C%20Windows%20%7C%20Linux-blue" alt="Platform" />
|
||
<img src="https://img.shields.io/badge/electron-40+-47848F?logo=electron" alt="Electron" />
|
||
<img src="https://img.shields.io/badge/react-19-61DAFB?logo=react" alt="React" />
|
||
<a href="https://discord.com/invite/84Kex3GGAh" target="_blank">
|
||
<img src="https://img.shields.io/discord/1399603591471435907?logo=discord&labelColor=%20%235462eb&logoColor=%20%23f5f5f5&color=%20%235462eb" alt="chat on Discord" />
|
||
</a>
|
||
<img src="https://img.shields.io/github/downloads/ValueCell-ai/ClawX/total?color=%23027DEB" alt="Downloads" />
|
||
<img src="https://img.shields.io/badge/license-MIT-green" alt="License" />
|
||
</p>
|
||
|
||
<p align="center">
|
||
<a href="README.md">English</a> | <a href="README.zh-CN.md">简体中文</a> | 日本語
|
||
</p>
|
||
|
||
---
|
||
|
||
## 概要
|
||
|
||
**ClawX**は、強力なAIエージェントと日常のユーザーとの間のギャップを埋めます。[OpenClaw](https://github.com/OpenClaw)をベースに構築されており、コマンドラインによるAIオーケストレーションを、アクセスしやすく美しいデスクトップ体験に変換します。ターミナルは不要です。
|
||
|
||
ワークフローの自動化、AI搭載チャネルの管理、インテリジェントなタスクのスケジューリングなど、ClawXはAIエージェントを効果的に活用するために必要なインターフェースを提供します。
|
||
|
||
ClawXはベストプラクティスのモデルプロバイダーが事前設定されており、Windowsおよび多言語設定をネイティブにサポートしています。もちろん、**設定 → 詳細設定 → 開発者モード**から高度な設定を微調整することもできます。
|
||
|
||
---
|
||
## スクリーンショット
|
||
|
||
<p align="center">
|
||
<img src="resources/screenshot/chat.png" style="width: 100%; height: auto;">
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="resources/screenshot/cron_task.png" style="width: 100%; height: auto;">
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="resources/screenshot/skills.png" style="width: 100%; height: auto;">
|
||
</p>
|
||
|
||
<!-- <p align="center">
|
||
<img src="resources/screenshot/channels.png" style="width: 100%; height: auto;">
|
||
</p> -->
|
||
|
||
<p align="center">
|
||
<img src="resources/screenshot/dashboard.png" style="width: 100%; height: auto;">
|
||
</p>
|
||
|
||
<p align="center">
|
||
<img src="resources/screenshot/settings.png" style="width: 100%; height: auto;">
|
||
</p>
|
||
|
||
---
|
||
|
||
## なぜClawXなのか
|
||
|
||
AIエージェントの構築にコマンドラインの習得は不要であるべきです。ClawXはシンプルな哲学のもとに設計されました：**強力な技術には、あなたの時間を尊重するインターフェースがふさわしい。**
|
||
|
||
| 課題 | ClawXのソリューション |
|
||
|------|----------------------|
|
||
| 複雑なCLIセットアップ | ワンクリックインストールとガイド付きセットアップウィザード |
|
||
| 設定ファイル | リアルタイムバリデーション付きのビジュアル設定 |
|
||
| プロセス管理 | ゲートウェイライフサイクルの自動管理 |
|
||
| 複数のAIプロバイダー | 統合プロバイダー設定パネル |
|
||
| スキル/プラグインのインストール | 組み込みのスキルマーケットプレイスと管理機能 |
|
||
|
||
### OpenClaw内蔵
|
||
|
||
ClawXは公式の**OpenClaw**コアを直接ベースに構築されています。別途インストールを必要とせず、アプリケーション内にランタイムを組み込むことで、シームレスな「バッテリー同梱」体験を提供します。
|
||
|
||
私たちはアップストリームのOpenClawプロジェクトとの厳密な整合性を維持することにコミットしており、公式リリースが提供する最新の機能、安定性の改善、エコシステムの互換性に常にアクセスできることを保証します。
|
||
|
||
---
|
||
|
||
## 機能
|
||
|
||
### 🎯 ゼロ設定バリア
|
||
インストールから最初のAIインタラクションまで、すべてのセットアップを直感的なグラフィカルインターフェースで完了できます。ターミナルコマンド不要、YAMLファイル不要、環境変数の探索も不要です。
|
||
|
||
### 💬 インテリジェントチャットインターフェース
|
||
モダンなチャット体験を通じてAIエージェントとコミュニケーションできます。複数の会話コンテキスト、メッセージ履歴、Markdownによるリッチコンテンツレンダリングをサポートしています。
|
||
|
||
### 📡 マルチチャネル管理
|
||
複数のAIチャネルを同時に設定・監視できます。各チャネルは独立して動作するため、異なるタスクに特化したエージェントを実行できます。
|
||
|
||
### ⏰ Cronベースの自動化
|
||
AIタスクを自動的に実行するようスケジュール設定できます。トリガーを定義し、間隔を設定することで、手動介入なしにAIエージェントを24時間稼働させることができます。
|
||
|
||
### 🧩 拡張可能なスキルシステム
|
||
事前構築されたスキルでAIエージェントを拡張できます。統合スキルパネルからスキルの閲覧、インストール、管理が可能です。パッケージマネージャーは不要です。
|
||
|
||
### 🔐 セキュアなプロバイダー統合
|
||
複数のAIプロバイダー（OpenAI、Anthropicなど）に接続でき、資格情報はシステムのネイティブキーチェーンに安全に保存されます。
|
||
|
||
### 🌙 アダプティブテーマ
|
||
ライトモード、ダークモード、またはシステム同期テーマ。ClawXはあなたの好みに自動的に適応します。
|
||
|
||
---
|
||
|
||
## はじめに
|
||
|
||
### システム要件
|
||
|
||
- **オペレーティングシステム**: macOS 11以上、Windows 10以上、またはLinux（Ubuntu 20.04以上）
|
||
- **メモリ**: 最低4GB RAM（8GB推奨）
|
||
- **ストレージ**: 1GBの空きディスク容量
|
||
|
||
### インストール
|
||
|
||
#### ビルド済みリリース（推奨）
|
||
|
||
[Releases](https://github.com/ValueCell-ai/ClawX/releases)ページから、お使いのプラットフォーム向けの最新リリースをダウンロードしてください。
|
||
|
||
#### ソースからビルド
|
||
|
||
```bash
|
||
# リポジトリをクローン
|
||
git clone https://github.com/ValueCell-ai/ClawX.git
|
||
cd ClawX
|
||
|
||
# プロジェクトの初期化
|
||
pnpm run init
|
||
|
||
# 開発モードで起動
|
||
pnpm dev
|
||
```
|
||
|
||
### 初回起動
|
||
|
||
ClawXを初めて起動すると、**セットアップウィザード**が以下の手順をガイドします：
|
||
|
||
1. **言語と地域** – 使用する言語・地域の設定
|
||
2. **AIプロバイダー** – サポートされているプロバイダーのAPIキーを入力
|
||
3. **スキルバンドル** – 一般的なユースケース向けの事前設定スキルを選択
|
||
4. **検証** – メインインターフェースに入る前に設定をテスト
|
||
|
||
### プロキシ設定
|
||
|
||
ClawXには、Electron、OpenClaw Gateway、またはTelegramなどのチャネルがローカルプロキシクライアントを介してインターネットにアクセスする必要がある環境向けに、組み込みのプロキシ設定が含まれています。
|
||
|
||
**設定 → ゲートウェイ → プロキシ**を開いて以下を設定します：
|
||
|
||
- **プロキシサーバー**: すべてのリクエストのデフォルトプロキシ
|
||
- **バイパスルール**: 直接接続すべきホスト（セミコロン、カンマ、または改行で区切る）
|
||
- **開発者モード**では、オプションで以下をオーバーライドできます：
|
||
- **HTTP プロキシ**
|
||
- **HTTPS プロキシ**
|
||
- **ALL_PROXY / SOCKS**
|
||
|
||
推奨されるローカル設定例：
|
||
|
||
```text
|
||
プロキシサーバー: http://127.0.0.1:7890
|
||
```
|
||
|
||
注意事項：
|
||
|
||
- `host:port`のみの値はHTTPとして扱われます。
|
||
- 高度なプロキシフィールドが空の場合、ClawXは`プロキシサーバー`にフォールバックします。
|
||
- プロキシ設定を保存すると、Electronのネットワーク設定が即座に再適用され、ゲートウェイが自動的に再起動されます。
|
||
- ClawXはTelegramが有効な場合、プロキシをOpenClawのTelegramチャネル設定にも同期します。
|
||
|
||
---
|
||
|
||
## アーキテクチャ
|
||
|
||
ClawXは、**デュアルプロセス + Host API 統一アクセス**構成を採用しています。Renderer は単一クライアント抽象を呼び出し、プロトコル選択とライフサイクルは Main が管理します：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ ClawX デスクトップアプリ │
|
||
│ │
|
||
│ ┌────────────────────────────────────────────────────────────┐ │
|
||
│ │ Electron メインプロセス │ │
|
||
│ │ • ウィンドウ＆アプリケーションライフサイクル管理 │ │
|
||
│ │ • ゲートウェイプロセスの監視 │ │
|
||
│ │ • システム統合（トレイ、通知、キーチェーン） │ │
|
||
│ │ • 自動アップデートオーケストレーション │ │
|
||
│ └────────────────────────────────────────────────────────────┘ │
|
||
│ │ │
|
||
│ │ IPC（権威ある制御プレーン） │
|
||
│ ▼ │
|
||
│ ┌────────────────────────────────────────────────────────────┐ │
|
||
│ │ React レンダラープロセス │ │
|
||
│ │ • モダンなコンポーネントベースUI（React 19） │ │
|
||
│ │ • Zustandによるステート管理 │ │
|
||
│ │ • 統一 host-api/api-client 呼び出し │ │
|
||
│ │ • リッチなMarkdownレンダリング │ │
|
||
│ └────────────────────────────────────────────────────────────┘ │
|
||
└──────────────────────────────┬──────────────────────────────────┘
|
||
│
|
||
│ Main管理のトランスポート戦略
|
||
│（WS優先、HTTP次点、IPCフォールバック）
|
||
▼
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Host API と Main プロキシ層 │
|
||
│ │
|
||
│ • hostapi:fetch（Mainプロキシ、CORS回避） │
|
||
│ • gateway:httpProxy（RendererはGateway HTTPに直アクセスしない） │
|
||
│ • 統一エラーマッピングとリトライ/バックオフ │
|
||
└──────────────────────────────┬──────────────────────────────────┘
|
||
│
|
||
│ WS / HTTP / IPC フォールバック
|
||
▼
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ OpenClaw ゲートウェイ │
|
||
│ │
|
||
│ • AIエージェントランタイムとオーケストレーション │
|
||
│ • メッセージチャネル管理 │
|
||
│ • スキル/プラグイン実行環境 │
|
||
│ • プロバイダー抽象化レイヤー │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### 設計原則
|
||
|
||
- **プロセス分離**: AIランタイムは別プロセスで動作し、重い計算処理中でもUIの応答性を確保します
|
||
- **フロントエンド呼び出しの単一入口**: Renderer は host-api/api-client を通じて呼び出し、下位プロトコルに依存しません
|
||
- **Mainによるトランスポート制御**: WS/HTTP の選択と IPC フォールバックを Main で一元管理します
|
||
- **グレースフルリカバリ**: 再接続・タイムアウト・バックオフで一時的障害を自動処理します
|
||
- **セキュアストレージ**: APIキーや機密データは、OSのネイティブセキュアストレージ機構を活用します
|
||
- **CORSセーフ設計**: ローカルHTTPはMainプロキシ経由とし、Renderer側CORS問題を回避します
|
||
|
||
---
|
||
|
||
## ユースケース
|
||
|
||
### 🤖 パーソナルAIアシスタント
|
||
質問への回答、メールの下書き、ドキュメントの要約、日常タスクのサポートなど、汎用的なAIエージェントを設定できます。すべてクリーンなデスクトップインターフェースから操作できます。
|
||
|
||
### 📊 自動モニタリング
|
||
ニュースフィード、価格追跡、特定イベントの監視などを行うスケジュールエージェントを設定できます。結果はお好みの通知チャネルに配信されます。
|
||
|
||
### 💻 開発者の生産性向上
|
||
AI を開発ワークフローに統合できます。エージェントを使用して、コードレビュー、ドキュメント生成、反復的なコーディングタスクの自動化が可能です。
|
||
|
||
### 🔄 ワークフロー自動化
|
||
複数のスキルを連鎖させて、高度な自動化パイプラインを作成できます。データの処理、コンテンツの変換、アクションのトリガーを、すべてビジュアルにオーケストレーションできます。
|
||
|
||
---
|
||
|
||
## 開発
|
||
|
||
### 前提条件
|
||
|
||
- **Node.js**: 22以上（LTS推奨）
|
||
- **パッケージマネージャー**: pnpm 9以上（推奨）またはnpm
|
||
|
||
### プロジェクト構成
|
||
|
||
```
|
||
ClawX/
|
||
├── electron/ # Electron メインプロセス
|
||
│ ├── main/ # アプリケーションエントリ、ウィンドウ管理
|
||
│ ├── gateway/ # OpenClaw ゲートウェイプロセスマネージャー
|
||
│ ├── preload/ # セキュアIPCブリッジスクリプト
|
||
│ └── utils/ # ユーティリティ（ストレージ、認証、パス）
|
||
├── src/ # React レンダラープロセス
|
||
│ ├── components/ # 再利用可能なUIコンポーネント
|
||
│ │ ├── ui/ # ベースコンポーネント（shadcn/ui）
|
||
│ │ ├── layout/ # レイアウトコンポーネント（サイドバー、ヘッダー）
|
||
│ │ └── common/ # 共通コンポーネント
|
||
│ ├── pages/ # アプリケーションページ
|
||
│ │ ├── Setup/ # 初期セットアップウィザード
|
||
│ │ ├── Dashboard/ # ホームダッシュボード
|
||
│ │ ├── Chat/ # AIチャットインターフェース
|
||
│ │ ├── Channels/ # チャネル管理
|
||
│ │ ├── Skills/ # スキルブラウザ＆マネージャー
|
||
│ │ ├── Cron/ # スケジュールタスク
|
||
│ │ └── Settings/ # 設定パネル
|
||
│ ├── stores/ # Zustand ステートストア
|
||
│ ├── lib/ # フロントエンドユーティリティ
|
||
│ └── types/ # TypeScript 型定義
|
||
├── resources/ # 静的アセット（アイコン、画像）
|
||
├── scripts/ # ビルド＆ユーティリティスクリプト
|
||
└── tests/ # テストスイート
|
||
```
|
||
|
||
### 利用可能なコマンド
|
||
|
||
```bash
|
||
# 開発
|
||
pnpm run init # 依存関係のインストール + uvのダウンロード
|
||
pnpm dev # ホットリロードで起動
|
||
|
||
# コード品質
|
||
pnpm lint # ESLintを実行
|
||
pnpm typecheck # TypeScriptの型チェック
|
||
|
||
# テスト
|
||
pnpm test # ユニットテストを実行
|
||
|
||
# ビルド＆パッケージ
|
||
pnpm run build:vite # フロントエンドのみビルド
|
||
pnpm build # フルプロダクションビルド（パッケージアセット含む）
|
||
pnpm package # 現在のプラットフォーム向けにパッケージ化
|
||
pnpm package:mac # macOS向けにパッケージ化
|
||
pnpm package:win # Windows向けにパッケージ化
|
||
pnpm package:linux # Linux向けにパッケージ化
|
||
```
|
||
|
||
### 技術スタック
|
||
|
||
| レイヤー | 技術 |
|
||
|---------|------|
|
||
| ランタイム | Electron 40以上 |
|
||
| UIフレームワーク | React 19 + TypeScript |
|
||
| スタイリング | Tailwind CSS + shadcn/ui |
|
||
| ステート管理 | Zustand |
|
||
| ビルド | Vite + electron-builder |
|
||
| テスト | Vitest + Playwright |
|
||
| アニメーション | Framer Motion |
|
||
| アイコン | Lucide React |
|
||
|
||
---
|
||
|
||
## コントリビューション
|
||
|
||
コミュニティからのコントリビューションを歓迎します！バグ修正、新機能、ドキュメントの改善、翻訳など、あらゆる貢献がClawXをより良くするのに役立ちます。
|
||
|
||
### コントリビューション方法
|
||
|
||
1. リポジトリを**フォーク**する
|
||
2. フィーチャーブランチを**作成**する（`git checkout -b feature/amazing-feature`）
|
||
3. 明確なメッセージで変更を**コミット**する
|
||
4. ブランチに**プッシュ**する
|
||
5. **プルリクエスト**を作成する
|
||
|
||
### ガイドライン
|
||
|
||
- 既存のコードスタイルに従う（ESLint + Prettier）
|
||
- 新機能にはテストを書く
|
||
- 必要に応じてドキュメントを更新する
|
||
- コミットはアトミックかつ説明的に保つ
|
||
|
||
---
|
||
|
||
## 謝辞
|
||
|
||
ClawXは優れたオープンソースプロジェクトの上に構築されています：
|
||
|
||
- [OpenClaw](https://github.com/OpenClaw) – AIエージェントランタイム
|
||
- [Electron](https://www.electronjs.org/) – クロスプラットフォームデスクトップフレームワーク
|
||
- [React](https://react.dev/) – UIコンポーネントライブラリ
|
||
- [shadcn/ui](https://ui.shadcn.com/) – 美しくデザインされたコンポーネント
|
||
- [Zustand](https://github.com/pmndrs/zustand) – 軽量ステート管理
|
||
|
||
---
|
||
|
||
## コミュニティ
|
||
|
||
コミュニティに参加して、他のユーザーとつながり、サポートを受け、体験を共有しましょう。
|
||
|
||
| 企業微信 | Feishuグループ | Discord |
|
||
| :---: | :---: | :---: |
|
||
| <img src="src/assets/community/wecom-qr.png" width="150" alt="WeChat QRコード" /> | <img src="src/assets/community/feishu-qr.png" width="150" alt="Feishu QRコード" /> | <img src="src/assets/community/20260212-185822.png" width="150" alt="Discord QRコード" /> |
|
||
|
||
### ClawX パートナープログラム 🚀
|
||
|
||
ClawX パートナープログラムを開始します。特に、カスタム AI エージェントや自動化ニーズを持つより多くの顧客に ClawX を紹介してくださるパートナーを募集しています。
|
||
|
||
パートナーの皆さまには、見込みユーザーや案件との接点づくりを担っていただき、ClawX チームは技術サポート、カスタマイズ、統合を全面的に提供します。
|
||
|
||
AI ツールや自動化に関心のある顧客とお仕事をされている方は、ぜひご一緒できればうれしいです。
|
||
|
||
詳細は DM いただくか、[public@valuecell.ai](mailto:public@valuecell.ai) までメールでご連絡ください。
|
||
|
||
---
|
||
|
||
## スター履歴
|
||
|
||
<p align="center">
|
||
<img src="https://api.star-history.com/svg?repos=ValueCell-ai/ClawX&type=Date" alt="スター履歴チャート" />
|
||
</p>
|
||
|
||
---
|
||
|
||
## ライセンス
|
||
|
||
ClawXは[MITライセンス](LICENSE)の下でリリースされています。本ソフトウェアの使用、変更、配布は自由に行えます。
|
||
|
||
---
|
||
|
||
<p align="center">
|
||
<sub>ValueCell Teamが❤️を込めて開発</sub>
|
||
</p>
|