@gftdcojp/actor-sdk-ui
Advanced tools
React UI components for Actor API integration with full TypeScript support
Actor APIと連携したReact UIコンポーネントライブラリ。api.gftd.ai/actors APIを使用してActorの管理、実行、監視を行うための完全なTypeScriptサポート付きコンポーネント群です。
# npm
npm install @gftdcojp/actor-sdk-ui
# yarn
yarn add @gftdcojp/actor-sdk-ui
# pnpm
pnpm add @gftdcojp/actor-sdk-ui
// Next.js の場合 (app/layout.tsx または pages/_app.tsx)
import '@gftdcojp/actor-sdk-ui/styles'
// または、CSSファイルで
@import '@gftdcojp/actor-sdk-ui/styles';
Actor SDK UIは、LangChainJS + HuggingFaceTransformersEmbeddings + usearch による高速なembeddingとvector searchをサポートしています。
import { EmbeddingSDK } from '@gftdcojp/actor-sdk-ui';
import { Document } from '@langchain/core/documents';
// EmbeddingSDKの初期化
const embeddingSDK = new EmbeddingSDK({
modelName: 'Xenova/all-MiniLM-L6-v2', // デフォルトモデル
cacheDir: './cache',
});
// 初期化
await embeddingSDK.initialize();
// ドキュメントの作成
const documents = [
new Document({
pageContent: 'This is a sample document about machine learning.',
metadata: { source: 'sample1.txt', category: 'tech' },
}),
new Document({
pageContent: 'Natural language processing is a subfield of AI.',
metadata: { source: 'sample2.txt', category: 'tech' },
}),
];
// ドキュメントをインデックスに追加
const documentIds = await embeddingSDK.addDocuments(documents);
// 類似検索
const results = await embeddingSDK.search('machine learning', 5);
console.log(results);
// インデックスの保存
await embeddingSDK.saveIndex('my_index.bin');
// クリーンアップ
await embeddingSDK.cleanup();
import { VectorStore } from '@gftdcojp/actor-sdk-ui';
import { Document } from '@langchain/core/documents';
import LightningFS from '@isomorphic-git/lightning-fs';
// ファイルシステムの初期化
const fs = new LightningFS('my-vector-store');
// VectorStoreの初期化
const vectorStore = new VectorStore(fs, 384); // 384次元のベクトル
await vectorStore.initialize();
// ベクトルとドキュメントの追加
const vector = [0.1, 0.2, 0.3, /* ... 384次元のベクトル */];
const document = new Document({
pageContent: 'Sample document',
metadata: { source: 'test.txt' },
});
const id = await vectorStore.add(vector, document);
// 検索
const results = await vectorStore.search(vector, 5);
console.log(results);
// クリーンアップ
await vectorStore.cleanup();
Actor SDK UIは、GitLab APIとisomorphic-gitを使用したGit統合をサポートしています。
chat-assistant-abc123）import { ActorGitManager } from '@gftdcojp/actor-sdk-ui';
import { Document } from '@langchain/core/documents';
// ActorGitManagerの初期化
const gitManager = new ActorGitManager({
gitlab: {
url: 'https://gitlab-gftd-ai.fly.dev/',
token: 'glpat-',
defaultVisibility: 'private',
},
embedding: {
modelName: 'Xenova/all-MiniLM-L6-v2',
dimensions: 384,
},
author: {
name: 'GFTD Actor SDK',
email: 'actor-sdk@gftd.ai',
},
});
// 新しいActor（プロジェクト）を作成
const actor = await gitManager.createActor({
name: 'my-actor',
description: 'My intelligent actor',
visibility: 'private',
});
// 新しいSession（ブランチ）を作成
const embeddingSDK = await gitManager.createActorSession(
actor.id,
'session-001',
'main'
);
// ドキュメントを追加
const documents = [
new Document({
pageContent: 'Sample document content',
metadata: { source: 'sample.txt' },
}),
];
await gitManager.addDocumentsToActor(actor.id, documents, 'session-001');
// 検索
const results = await gitManager.searchInActor(
actor.id,
'search query',
5,
'session-001'
);
// ファイル保存
await gitManager.saveFileToActor(
actor.id,
'config.json',
JSON.stringify({ setting: 'value' }),
'Add configuration',
'session-001'
);
// Sessionの切り替え
await gitManager.switchActorSession(actor.id, 'session-002');
import { GitEmbeddingSDK } from '@gftdcojp/actor-sdk-ui';
// GitEmbeddingSDKの直接使用
const gitEmbeddingSDK = new GitEmbeddingSDK({
git: {
url: 'https://gitlab-gftd-ai.fly.dev/user/project.git',
token: 'your-gitlab-token',
author: {
name: 'Your Name',
email: 'your@email.com',
},
branch: 'main',
},
modelName: 'Xenova/all-MiniLM-L6-v2',
dimensions: 384,
});
await gitEmbeddingSDK.initialize();
// セッション作成
await gitEmbeddingSDK.createSession('new-session');
// ファイル操作
await gitEmbeddingSDK.saveFile('data.txt', 'content');
const content = await gitEmbeddingSDK.loadFile('data.txt');
// Git操作
await gitEmbeddingSDK.push(); // リモートにプッシュ
await gitEmbeddingSDK.pull(); // リモートからプル
// コミット履歴
const history = await gitEmbeddingSDK.getCommitHistory();
# 環境変数の設定例（.env.local）
GITLAB_URL=https://gitlab-gftd-ai.fly.dev/
GITLAB_PAT=your-gitlab-personal-access-token
AUTHOR_NAME=Your Name
AUTHOR_EMAIL=your@email.com
###実行例
# サンプルの実行
node dist/lib/git/example.js
import { ActorDashboard, useActors } from '@gftdcojp/actor-sdk-ui'
function MyApp() {
return (
<div className="min-h-screen bg-background">
<ActorDashboard />
</div>
)
}
export default MyApp
import { actorApi, Actor } from '@gftdcojp/actor-sdk-ui'
async function fetchActors() {
const response = await actorApi.getActors()
if (response.success) {
console.log('Actors:', response.data?.actors)
}
}
import { useActors, useActorMutations } from '@gftdcojp/actor-sdk-ui'
function ActorList() {
const { actors, loading, error } = useActors()
const { runActor } = useActorMutations()
const handleRunActor = async (actorId: string) => {
const result = await runActor(actorId, {
input: { message: "Hello, World!" }
})
console.log('Run result:', result)
}
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error}</div>
return (
<div>
{actors.map(actor => (
<div key={actor.id}>
<h3>{actor.name}</h3>
<button onClick={() => handleRunActor(actor.id)}>
Run Actor
</button>
</div>
))}
</div>
)
}
import { createActorSession, continueActorSession } from '@gftdcojp/actor-sdk-ui'
// 新しいセッションを開始
const session = await createActorSession(
"actor-123",
"Hello, I need help with data analysis"
)
if (session) {
console.log("Session ID:", session.session.id)
// セッションを継続
const response = await continueActorSession(
session.session.id,
"Can you analyze this dataset for me?"
)
if (response) {
console.log("Actor response:", response.message.content)
}
}
import { ActorSDK } from '@gftdcojp/actor-sdk-ui'
const sdk = new ActorSDK({ baseUrl: "/api" })
// セッション作成
const session = await sdk.createSession({
actorId: "actor-456",
message: "I want to create a web scraper",
config: {
timeout_seconds: 300,
max_messages: 50
}
})
// 会話を継続
const response = await sdk.continueSession({
sessionId: session.session.id,
message: "The target website is example.com"
})
import { useActorSession } from '@gftdcojp/actor-sdk-ui'
function ChatComponent() {
const {
session,
messages,
loading,
createSession,
continueSession,
resetSession
} = useActorSession()
const handleStartChat = async () => {
await createSession("actor-123", "Hello!")
}
const handleSendMessage = async (message: string) => {
await continueSession(message)
}
return (
<div>
{!session ? (
<button onClick={handleStartChat}>Start Chat</button>
) : (
<div>
<div>Session: {session.id}</div>
<div>Messages: {messages.length}</div>
<button onClick={() => handleSendMessage("Tell me more")}>
Send Message
</button>
<button onClick={resetSession}>New Session</button>
</div>
)}
</div>
)
}
import { createStreamingActorSession } from '@gftdcojp/actor-sdk-ui'
const stream = await createStreamingActorSession(
"actor-789",
"Generate a detailed report",
{ stream: true }
)
for await (const event of stream) {
switch (event.event.type) {
case "message_delta":
process.stdout.write(event.event.data.content)
break
case "done":
console.log("\nCompleted!")
break
}
}
.env.local ファイルを作成し、以下の環境変数を設定してください：
# Actor API設定
ACTOR_API_BASE_URL=http://api.gftd.ai
ACTOR_API_KEY=your_api_key_here
examples/ ディレクトリには、パッケージの使用方法を示すサンプルアプリケーションが含まれています。
完全なNext.jsアプリケーションのサンプル：
cd examples/nextjs-sample
pnpm install
pnpm dev
含まれる機能:
詳細は examples/README.md を参照してください。
pnpm install
# ライブラリをビルド
pnpm build
# 開発モード（ウォッチモード）
pnpm dev:lib
pnpm dev
GET /api/actors - Actor一覧取得POST /api/actors - 新しいActor作成GET /api/actors/[id] - 特定Actor詳細取得PUT /api/actors/[id] - Actor情報更新DELETE /api/actors/[id] - Actor削除POST /api/actors/[id]/run - Actor実行GET /api/actors/[id]/run - 実行履歴取得GET /api/runs/[runId] - 特定実行の詳細取得DELETE /api/runs/[runId] - 実行停止PATCH /api/runs/[runId] - 実行設定更新interface Actor {
id: string
name: string
description: string
type: string
status: "active" | "inactive" | "running" | "stopped"
version: string
created_at: string
updated_at: string
metadata?: Record<string, any>
config?: ActorConfig
}
interface ActorRunRequest {
input: Record<string, any>
config?: {
memory_mb?: number
timeout_seconds?: number
webhook_url?: string
priority?: "low" | "normal" | "high"
}
}
actor-sdk-ui/
├── app/ # Next.js App Router
│ ├── api/ # APIルート
│ │ ├── actors/ # Actor管理API
│ │ └── runs/ # 実行管理API
│ ├── globals.css # グローバルスタイル
│ ├── layout.tsx # ルートレイアウト
│ └── page.tsx # メインページ
├── components/ # UIコンポーネント
│ ├── actor-dashboard.tsx # Actorダッシュボード
│ ├── workbench.tsx # メインワークベンチ
│ └── ui/ # 基本UIコンポーネント
├── hooks/ # React Hooks
│ └── use-actors.ts # Actor API連携フック
├── lib/ # ユーティリティ
│ ├── api/ # APIクライアント
│ │ └── actor-client.ts
│ ├── types/ # 型定義
│ │ └── actor.ts
│ └── utils.ts # ヘルパー関数
└── README.md
メインページの「Actors」タブから、Actor管理ダッシュボードにアクセスできます。
「Create Actor」ボタンから新しいActorを作成できます：
各ActorカードのRunボタンから実行できます：
各Actorの実行履歴タブから、過去の実行結果を確認できます。
新しいAPIエンドポイントを追加する場合：
lib/types/actor.ts に型定義を追加lib/api/actor-client.ts にメソッドを追加hooks/use-actors.ts にHookを追加Shadcn/uiベースのコンポーネントを使用してUIを拡張できます：
pnpm dlx shadcn-ui@latest add [component-name]
サーバーサイドでIndexedDBが参照されるエラーが発生した場合、クライアントサイドでのみ実行されるように修正済みです。
ACTOR_API_BASE_URL と ACTOR_API_KEY が正しく設定されているか確認React 19の型定義との互換性問題が発生する場合がありますが、機能的には問題ありません。
ActorDashboard - Actor管理ダッシュボードactorApi - APIクライアントuseActors - Actor一覧管理HookuseActor - 単一Actor管理HookuseActorMutations - CRUD操作HookuseActorRuns - 実行履歴管理HookuseRun - 単一実行管理HookButton, Card, BadgeInput, Textarea, SelectDialog, Label, AlertTabs, ScrollArea, SkeletonToaster, useToastActor, ActorConfigActorRunRequest, ActorRunResponseActorListResponse, ActorRunListResponseActorCreateRequest, ActorUpdateRequestApiResponse, ApiErrorpnpm build
# パッケージ内容を確認
npm pack
# .npmignore ファイルを確認
# 初回公開
npm publish
# 更新版公開
npm version patch # または minor, major
npm publish
git checkout -b feature/amazing-feature)git commit -m 'Add some amazing feature')git push origin feature/amazing-feature)MIT License
FAQs
React UI components for Actor API integration with full TypeScript support
We found that @gftdcojp/actor-sdk-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching experimental protection for the Hugging Face ecosystem, scanning for malware and malicious payload injections inside model files to prevent silent AI supply chain attacks.
Research
/Security News
The Socket Threat Research Team uncovered a coordinated campaign that floods the Chrome Web Store with 131 rebranded clones of a WhatsApp Web automation extension to spam Brazilian users.
Security News
ENISA’s 2025 Threat Landscape report highlights how AI is reshaping cyber attacks, driving phishing, model poisoning, and software supply chain risks.