WordPress AI Q&A Plugin (POC)

WordPress サイトに AI 質問応答機能を提供するプラグインの POC 実装です。AWS Bedrock（Amazon Nova）と WordPress 検索を活用し、サイト内の記事情報を基に質問に回答します。

🚀 機能概要

AI チャット機能: Gutenberg ブロックとして提供される対話型 UI
WordPress 検索連携: 既存の記事データを活用したコンテキスト生成
AWS Bedrock 統合: Amazon Nova モデルによる高品質な回答生成
管理画面: AWS 認証情報の設定とプラグイン管理
REST API: セキュアな API エンドポイント
エラーハンドリング: 管理者向け通知・環境検証

📋 必要な環境

WordPress: 6.8 以上
PHP: 8.1 以上
Composer: AWS SDK PHP のインストールに必要
Node.js: 18 以上（開発時）
AWS アカウント: Bedrock Amazon Nova へのアクセス権限

🏗️ プロジェクト構造

poc-wp-rag/
├── poc-wp-rag.php                  # メインプラグインファイル
├── includes/                       # PHP クラスファイル
│   ├── class-admin.php            # 管理画面
│   ├── class-rest-controller.php  # REST API コントローラー
│   ├── class-aws-client.php       # AWS クライアント
│   ├── class-search-service.php   # 検索・コンテキスト生成
│   └── class-error-handler.php    # エラーハンドリング
├── src/poc-wp-rag/                # Gutenberg ブロック
│   ├── block.json                 # ブロック定義
│   ├── edit.js                    # エディター側コンポーネント
│   ├── save.js                    # フロントエンド側コンポーネント
│   ├── view.js                    # Interactivity API
│   └── style.scss                 # スタイル
├── build/                         # ビルド後のファイル
├── package.json
└── README.md

🔧 開発セットアップ

Composer依存関係のインストール（必須）

composer install

NPM依存関係のインストール

npm install

ブロックのビルド

npm run build

開発サーバーの起動

npm start

🧪 テスト環境構築

@wordpress/env を使用（推奨）

# まず依存関係をインストール（必須）
composer install
npm install
npm run build

# WordPress 環境を起動（PHP 8.1）
npm run env:start
# または
npx wp-env start

# ブラウザで http://localhost:8888 にアクセス

# 環境を停止
npm run env:stop

# 環境をクリーンアップ
npm run env:clean

wp-now を使用

# まず依存関係をインストール（必須）
composer install
npm install
npm run build

# wp-now をインストール
npm install -g @wp-now/wp-now

# WordPress 環境を起動
wp-now start

# ブラウザで http://localhost:8881 にアクセス
# 注意: PHP 8.0の場合、Composer依存関係エラーが発生する可能性があります

従来の方法

XAMPP/MAMP/Local by Flywheel 等を使用
WordPress をインストール
プラグインディレクトリにファイルを配置

⚙️ 設定方法

プラグインの有効化
- WordPress 管理画面 → プラグイン → 有効化

AWS 認証情報の設定

wp-config.php に以下を追加してください：

define('AWS_ACCESS_KEY_ID', 'your_access_key');
define('AWS_SECRET_ACCESS_KEY', 'your_secret_key');
define('AWS_DEFAULT_REGION', 'us-east-1');

管理画面でのAWS設定は不要です。

ブロックの使用
- 投稿/ページエディター → ブロック追加
- 「AI Q&A Chat」ブロックを選択
- 設定パネルでプレースホルダーとボタンテキストを調整

🔌 API エンドポイント

POST /wp-json/wp-ai-qa/v1/chat

質問を送信して AI から回答を取得します。

リクエスト例:

{
  "question": "このサイトについて教えてください",
  "nonce": "wp_rest_nonce_value"
}

レスポンス例:

{
  "answer": "このサイトは...",
  "sources": [
    {
      "title": "記事タイトル",
      "url": "https://example.com/post"
    }
  ],
  "timestamp": 1234567890
}

🎨 フロントエンド機能

Interactivity API によるリアルタイムチャット
状態管理（メッセージ履歴、ローディング状態）
エラーハンドリング
質問入力・送信・回答表示・ローディング・エラー表示

🔒 セキュリティ機能

Nonce 検証: CSRF 攻撃防止
入力サニタイズ: XSS 攻撃防止
レート制限: 1 分間に 10 リクエストまで
文字数制限: 質問は 500 文字まで
権限チェック: 適切な権限管理

🚧 現在の実装状況

✅ 完了済み

✅ 完了済み機能

AWS SDK PHP の統合
Bedrock Amazon Nova との連携
WordPress 検索機能の活用
コンテキスト生成機能
エラーハンドリングの強化
環境検証機能
管理者向けエラー通知

🔄 今後の実装予定

レスポンスキャッシュ機能
国際化対応
統計情報とログ表示
パフォーマンス最適化

📝 開発メモ

技術スタック

フロントエンド: React, WordPress Interactivity API
バックエンド: WordPress REST API, PHP, AWS SDK PHP
AI: AWS Bedrock Amazon Nova Pro
検索: WordPress WP_Query
スタイル: SCSS
ビルド: @wordpress/scripts

設計思想

WordPress 標準機能を最大限活用
シンプルで拡張性のあるアーキテクチャ
セキュリティとパフォーマンスを重視
ユーザビリティを考慮した UI/UX
実用的なエラーハンドリングとログ機能

アーキテクチャ概要

質問入力 → 検索実行 → コンテキスト生成 → Bedrock API → AI回答 → 表示
    ↓         ↓           ↓              ↓         ↓        ↓
   UI     WP_Query    Search Service   AWS SDK   Claude   Frontend

主要クラス

POC_WP_RAG_REST_Controller: API エンドポイント
POC_WP_RAG_Search_Service: 検索とコンテキスト生成
POC_WP_RAG_AWS_Client: Bedrock API 連携
POC_WP_RAG_Error_Handler: エラーハンドリング
POC_WP_RAG_Admin: 管理画面

🚀 セットアップ手順

1. AWS認証情報の設定

wp-config.phpに以下の行を追加:

// AWS Bedrock configuration
define('AWS_ACCESS_KEY_ID', 'your_access_key_id');
define('AWS_SECRET_ACCESS_KEY', 'your_secret_access_key');
define('AWS_DEFAULT_REGION', 'us-east-1');

2. 依存関係のインストール（必須）

# Composer で AWS SDK をインストール（必須）
composer install

# NPM で開発依存関係をインストール
npm install

# ブロックをビルド
npm run build

3. プラグインの有効化

WordPress 管理画面でプラグインを有効化
管理画面 → AI Q&A で設定を確認

4. 必要な AWS 権限

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "bedrock:InvokeModel",
        "bedrock:GetFoundationModel",
        "bedrock:ListFoundationModels"
      ],
      "Resource": "*"
    }
  ]
}

🐛 トラブルシューティング

よくある問題

プラグイン有効化時のエラー
- 必ず composer install を先に実行してください
- AWS SDK がインストールされていないとプラグインが動作しません
AWS認証エラー
- wp-config.php の AWS認証情報を確認
- IAM権限を確認
Composer依存関係エラー
- composer install を実行
- PHP 7.4以上（推奨: 8.1）
プラグイン設定エラー
- 管理画面でエラー通知を確認
- PHP エラーログを確認

🤝 コントリビューション

このプロジェクトは POC として開発されています。フィードバックや改善提案は歓迎します。

📄 ライセンス

GPL-2.0-or-later

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
includes		includes
src/poc-wp-rag		src/poc-wp-rag
.editorconfig		.editorconfig
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
README.md		README.md
composer.json		composer.json
composer.lock		composer.lock
package-lock.json		package-lock.json
package.json		package.json
poc-plan.md		poc-plan.md
poc-wp-rag.php		poc-wp-rag.php
readme.txt		readme.txt
wp-config-sample.php		wp-config-sample.php

hidetaka-dc/demo-wp-rag-block

Folders and files

Latest commit

History

Repository files navigation