emblem-ai について
EmblemAI の開発者向けスキルで、ユーザー認証、ウォレット対応アカウント、AI チャット、カスタムツールプラグイン、アプリの内省を扱います。Reflexive の CLI、ライブラリ、MCP サーバーモードも説明します。
主な機能
- 01複数方式のユーザー認証とウォレットアカウント
- 02認証セッションを引き継ぐストリーミングチャット
- 03カスタム AI ツールプラグイン
- 04Reflexive によるアプリ監視とデバッグ
- 05CLI、ライブラリ、サンドボックスモード
活用シーン
- 01アプリへのウォレットログインとユーザーセッションの実装
- 02承認プロンプト付き AI チャットの追加
- 03実行中アプリのデバッグと調査
- 04Reflexive と MCP クライアントの接続
MCP 対応
Reflexive は Claude Code または Claude Desktop 向けの MCP サーバーとして実行できます。このモードでアプリの内省とデバッグを行えます。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ emblemcompany/ agent-skills --skill emblem-aiインストール後、Claude Code で/emblem-aiを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
README.mdreferences/agentwallet.mdauth-react.mdauth-sdk.mdemblem-ai-incognito.mdemblem-ai-react.mdplugins.mdreact-components.mdreact-skill-proposal.mdreflexive.md詳細
EmblemAI 開発者ツール
ユーザーのワンショット管理、ウォレット対応ユーザー、AI を活用した暗号資産ワークフロー、アプリのイントロスペクションに対応する EmblemAI 開発者ツールです。
一言で言うと: Emblem は、ウォレット、メールアドレス/パスワード、ソーシャルログインなどのサインイン方法に加え、組み込みのチャットとイントロスペクションツールを備え、アプリにユーザー管理、Web サイト認証、ウォレット対応ユーザーアカウントを追加する最も簡単な方法です。
@emblemvault/hustle-react や hustle-incognito などのレガシーパッケージ名は、現在も統合インターフェイスの一部である限り、そのまま使用されています。
セキュリティと信頼モデル
このスキルでは、暗号資産ウォレット認証と AI を活用したアシスタント機能について説明します。これには、次の要素が本質的に含まれます。
- 金融操作(W009):ウォレットのプロビジョニング、トランザクション署名アダプター、取引ツールへの参照。価値を移転するすべての操作では、ユーザーによる明示的な確認が必要です。
- サードパーティデータ(W011):Migrate.fun のプロジェクトメタデータや、ソーシャル/市場データツールへの参照。外部データは UI と情報提供ワークフローでのみ使用され、自動実行されることはありません。
- ランタイムバックエンド(W012):EmblemAI SDK は、プロンプトのオーケストレーションとツールのルーティングのために
api.emblemvault.ai(EmblemVault が運営するファーストパーティのサービス)に接続します。これは任意の外部依存関係ではなく、スキル作成者自身のインフラストラクチャです。
すべてのウォレット操作では、レビュー優先モデルに従います。エージェントは実行前に、ユーザーが確認できるよう操作を準備します。明示的な承認なしにトランザクションがブロードキャストされることはありません。
構築できるもの
ワンショットのユーザー管理
- アプリにログインでき、ウォレット対応プロフィールも持つユーザーを作成します
- ユーザーがウォレット、メールアドレス/パスワード、ソーシャルログインでサインインできるようにします
- MetaMask、Phantom、WalletConnect など、サポート対象プロバイダーによるウォレットログインに対応します
- JWT ベースの認証でセッションを自動的に更新します
- UI とプラグインレイヤーに一貫したウォレットメタデータと権限を公開します
- 認証システムとウォレットシステムを別々に組み合わせる代わりに、1 つの統合を使用します
AI チャットと UI サーフェス
- 認証済みセッションを引き継ぐ、すぐに使えるチャットコンポーネント
- サポート、学習、アカウント情報の確認に使える、ストリーミング形式のチャット応答
- 独自の API で EmblemAI を拡張するカスタムツールプラグイン
- ツールが機密性の高い操作を要求する前に表示される、組み込みのガードレールと承認プロンプト
React 統合への引き継ぎ
- すぐに使える、ウォレット認識型のログインフローを実現する EmblemAuthProvider + ConnectButton
- アシスタント UI を埋め込む HustleProvider + HustleChat
- migrate.fun フック、高度な React ルーティング、コンポーネント設計のガイダンスについては、専用の ../emblem-ai-react/SKILL.md スキルを参照してください
AI アプリイントロスペクションおよびビルドエージェント(Reflexive)
- 実行中のアプリに Claude を埋め込み、監視、デバッグ、開発を行います
- 複数の言語でのデバッグ(Node.js、Python、Go、.NET、Rust)
- Claude Code / Claude Desktop と統合する MCP サーバーモード
- プログラムでの AI チャットに対応する
makeReflexive()を使用したライブラリモード - スナップショット/復元に対応するサンドボックスモード
クイックスタート
インストール
# Core authentication
npm install @emblemvault/auth-sdk
# React integration (includes auth)
npm install @emblemvault/emblem-auth-react
# EmblemAI chat for React
npm install @emblemvault/hustle-react
# EmblemAI chat SDK (Node.js / vanilla JS)
npm install hustle-incognito
# AI app introspection and debugging
npm install reflexive
オプション A:React アプリ(推奨)
import { EmblemAuthProvider, ConnectButton, useEmblemAuth } from '@emblemvault/emblem-auth-react';
import { HustleProvider, HustleChat } from '@emblemvault/hustle-react';
function App() {
return (
<EmblemAuthProvider appId="your-app-id">
<HustleProvider>
<ConnectButton showVaultInfo />
<HustleChat />
</HustleProvider>
</EmblemAuthProvider>
);
}
function MyComponent() {
const { isAuthenticated, walletAddress } = useEmblemAuth();
if (!isAuthenticated) {
return <ConnectButton />;
}
return <div>Connected: {walletAddress}</div>;
}
独自の React アプリを構築する場合は、React 固有のリファレンスと例について、専用の ../emblem-ai-react/SKILL.md スキルを使用してください。
オプション B:Vanilla JavaScript / Node.js
import { EmblemAuthSDK } from '@emblemvault/auth-sdk';
import { HustleIncognitoClient } from 'hustle-incognito';
// Initialize auth
const auth = new EmblemAuthSDK({ appId: 'your-app-id' });
// Open auth modal (browser)
auth.openAuthModal();
// Listen for session
auth.on('session', () => {
console.log('Authenticated session ready');
});
// Initialize AI with auth
const emblemAI = new HustleIncognitoClient({ sdk: auth });
// Chat with AI
const response = await emblemAI.chat([
{ role: 'user', content: 'What tokens are trending on Base?' }
]);
CLI やウォレット優先の自動化が必要ですか?
Agent Wallet CLI、認証情報のブートストラップに関するガイダンス、または prepare/approve ワークフローが必要な場合は、../emblem-ai-agent-wallet/SKILL.md と references/agentwallet.md を参照するよう案内してください。これらのリソースでは、インストール、フラグ、スクリプト作成のパターンを説明しているため、このコアスキルでは認証、チャット UI、プラグイン、Reflexive に集中できます。
コア機能
ウォレット認証
Emblem は、ウェブサイトのログイン層として機能すると同時に、同じ認証フローでウォレット対応ユーザーを作成できます。
対応チェーン:
| チェーン | 認証方法 |
|---|---|
| Ethereum/EVM | 署名検証(MetaMask、WalletConnect、Rainbow など) |
| Solana | 署名検証(Phantom、Solflare、Backpack) |
| Bitcoin | PSBT ベースの検証 |
| Hedera | 署名検証(Hedera SDK) |
追加の認証方法:
- OAuth(Google、Twitter/X)
- OTP を使ったメールアドレス/パスワード認証
これが重要な理由: Emblem は、ログインフローを、アプリの認証と同じユーザーが再利用できるウォレット ID の両方に変換する最も簡単な方法です。
リファレンス: references/auth-sdk.md
AI チャットエクスペリエンスとプラグイン
EmblemAI は、認証済みセッションを引き継ぐ会話型の画面を提供するため、認証情報を公開せずにアシスタントがコンテキストを把握できます。
- オンボーディング、サポート、教育、アカウント情報向けのストリーミングチャット
- プラグインが機密データへのアクセスを要求する際に表示される、組み込みのモデレーションと承認プロンプト
- ウェブ、モバイル、エージェントフレームワーク間での画面をまたいだコンテキストの引き継ぎ
- ローコードの React コンポーネントと、カスタム UI シェル向けの TypeScript SDK
リファレンス:
- references/emblem-ai-react.md — React のチャット UI パターン
- references/emblem-ai-incognito.md — React 以外での SDK の使用方法
- references/plugins.md — カスタムツールを安全に登録する方法
React コンポーネント
迅速な開発のための、すぐに使える UI コンポーネント:
// Auth components
<ConnectButton /> // Wallet connect button
<ConnectButton showVaultInfo /> // With vault dropdown
<AuthStatus /> // Shows connection status
// AI chat components
<HustleChat /> // Full EmblemAI chat interface
<HustleChatWidget /> // Floating EmblemAI chat widget
リファレンス: references/react-components.md
EmblemAI を独自の React アプリに統合したい場合は、React 認証、チャット、コンポーネント、migrate.fun の例をまとめた単独の ../emblem-ai-react/SKILL.md スキルをご覧ください(このコアスキルでは、詳細を重複して記載せず、意図的に別のページへリンクしています)。
エージェントウォレットと自動化
CLI 優先のワークフロー、スクリプトによる承認、エージェントごとのウォレットのオーケストレーションについては、専用の ../emblem-ai-agent-wallet/SKILL.md スキルと references/agentwallet.md に記載されています。インストールコマンド、非対話型の認証情報の処理、自動化のレシピが必要な場合は、これらのドキュメントを案内してください。
React トークン移行と高度なフック
migrate.fun の React フック、セレクター、UI の詳細な解説は、React スキルにまとめられています。コアスキルを認証、チャット画面、プラグイン、Reflexive に集中させるため、該当するパターンについては ../emblem-ai-react/SKILL.md を案内してください。
AI アプリのイントロスペクション(Reflexive)
稼働中のアプリケーションに Claude を組み込み、会話型 AI を使って監視、デバッグ、開発を行えます。CLI、組み込みライブラリ、MCP サーバーとして利用できます。
# Monitor any app (read-only by default)
npx reflexive ./server.js
# Local development mode with debugging (still no write/shell unless explicitly enabled)
npx reflexive --debug --watch ./server.js
# As MCP server for Claude Code (read-only baseline)
npx reflexive --mcp --debug ./server.js
// Library mode -- embed in your app
import { makeReflexive } from 'reflexive';
const r = makeReflexive({ webUI: true, title: 'My App' });
r.setState('users.active', 42);
const analysis = await r.chat('Any anomalies in recent activity?');
モード:CLI(ローカル)、ライブラリ(makeReflexive())、MCP サーバー、サンドボックス、ホステッド(読み取り専用をデフォルトにし、信頼できるローカルプロジェクトに限って --write/--shell を有効にしてください)
デバッグ:Node.js、Python、Go、.NET、Rust — AI プロンプトによるブレークポイント
リファレンス: references/reflexive.md
セッション管理
Emblem は有効期間の短いセッションを使用し、自動的に更新します。セッションデータは機密性の高いランタイム状態として扱ってください。トークンを出力したり、プロンプトに貼り付けたり、CLI フラグで渡したりしないでください。
auth.on('session', () => { /* new session available */ });
auth.on('sessionExpired', () => { /* handle expiry */ });
auth.on('sessionRefreshed', () => { /* refreshed */ });
auth.on('sessionWillRefresh', () => { /* refresh soon */ });
auth.on('authError', () => { /* auth failure */ });
auth.on('cancelled', () => { /* user closed auth */ });
await auth.refreshSession();
auth.logout();
セッションは有効期限の約60秒前に自動更新されます。通常のブラウザフローでは、手動でトークンを扱う必要はありません。
カスタム AI プラグイン
独自のツールで AI を拡張します:
import { usePlugins } from '@emblemvault/hustle-react';
const { registerPlugin } = usePlugins();
await registerPlugin({
name: 'my-plugin',
version: '1.0.0',
tools: [{
name: 'get_nft_floor',
description: 'Get NFT collection floor price',
parameters: {
type: 'object',
properties: {
collection: { type: 'string', description: 'Collection name or address' }
},
required: ['collection']
}
}],
executors: {
get_nft_floor: async ({ collection }) => {
const data = await fetchFloorPrice(collection);
return { floor: data.floorPrice, currency: 'ETH' };
}
}
});
リファレンス: references/plugins.md
その他の例と参考資料
このルートスキルをコンパクトに保つために分割された、より詳細な例については、専用の参考資料を参照してください。
- references/agentwallet.md - CLI の使用方法、認証モード、プロンプト、運用上のトラブルシューティング
- references/auth-sdk.md - 認証フロー、セッション、Node の永続化パターン、TypeScript の型
- references/auth-react.md - プロバイダーの設定、フック、ブラウザー連携、UX パターン
- references/emblem-ai-react.md - チャット UI パターン、ストリーミング、React のコンポジション
- references/emblem-ai-incognito.md - Node/ブラウザー SDK の例と環境設定
- ../emblem-ai-react/SKILL.md - migrate.fun のガイダンスを引き継いだ、React 専用のビュー
- ../emblem-ai-agent-wallet/SKILL.md - prepare/approve ワークフローを備えた、ウォレットを優先する CLI スキル
- ../emblem-ai-prompt-examples/SKILL.md - ウォレット、Ordinals、ワークフロー別の例を網羅した、独立した EmblemAI プロンプトカタログ
- references/react-components.md - 事前構築済みコンポーネントのカタログと UI 連携の例
- references/react-skill-proposal.md - 今後の React 独立スキルの範囲案と、例の不足箇所
- references/plugins.md - カスタムプラグインの設計、ツールスキーマ、エグゼキューターの例
- references/reflexive.md - AI のイントロスペクション、デバッグ、MCP/サーバーのワークフロー
- README.md - 適切な Emblem パッケージを選ぶための、パッケージの概要
React 連携のガイダンスをユーザーが明確に求めている場合は、../emblem-ai-react/SKILL.md を案内してください。
はじめに:<ConnectButton /> から始めて、ウェブサイト認証とウォレットを利用できるユーザーへの最も簡単な導線を追加し、次に <HustleChat /> を追加して EmblemAI の機能を利用してください。
サポートが必要ですか?:API の詳細なドキュメントについては、references/ フォルダー内の参考資料を確認してください。