Web UI

📝 English README

Spec-Driven Presentation Maker の Layer 4 Web UI コンポーネント。 チャットベースの対話でプレゼンテーションの設計・生成・プレビューを行う React アプリケーション。

---

技術スタック

カテゴリ	技術
フレームワーク	Next.js 16 (Turbopack) / React 19 / TypeScript 5
スタイリング	Tailwind CSS v4 / shadcn/ui / Radix UI
認証	react-oidc-context (Cognito User Pool)
その他	react-markdown, react-dropzone, Lucide React, sonner
ビルド	Static export (output: "export", distDir: "build")

---

前提条件

• Node.js 20+
• npm

---

クイックスタート

cd web-ui
npm ci
npm run dev

http://localhost:3000 をブラウザで開く。

---

実験的機能: ローカルモード（Kiro ACP バックエンド）

⚠️ 実験段階の機能です。 API やフラグ、挙動は予告なく変更・破壊される可能性があります。

AWS にデプロイされた Agent / Runtime の代わりに、Kiro CLI を ACP（Agent Client Protocol）経由でバックエンドとして使用し、Web UI をすべてローカル環境で動かせます。Layer 3/4 をセットアップせずに Web UI を試したいときに便利です。

前提条件

• kiro-cli がインストール済みで PATH に通っていること — Kiro CLI インストールガイド

起動

cd web-ui
npm ci
npm run dev:local

http://localhost:3000 をブラウザで開く（3000 が使用中の場合は Next.js が自動で空きポートを選びます）。

動作の仕組み

NEXT_PUBLIC_MODE=local が設定され、src/app/api/ 以下の Next.js API Routes が有効化され、アクティブなデッキごとに kiro-cli acp --agent sdpm-spec を子プロセスとして起動します。Agent 定義は mcp-local/.kiro/agents/ に、MCP ツールは mcp-local/server_acp.py に格納されています。

---

認証

認証設定

認証は public/aws-exports.json から読み込まれる。public/aws-exports.example.json をコピーして設定する。

cp public/aws-exports.example.json public/aws-exports.json

環境変数で個別に上書きも可能（優先度: 環境変数 > aws-exports.json）:

export NEXT_PUBLIC_COGNITO_REGION=ap-northeast-1
export NEXT_PUBLIC_COGNITO_USER_POOL_ID=ap-northeast-1_XXXXXXX
export NEXT_PUBLIC_COGNITO_CLIENT_ID=xxxxxxxxxxxxxxxxxxxxxxxxxx
export NEXT_PUBLIC_COGNITO_REDIRECT_URI=http://localhost:3000

認証の構造

認証は Next.js の Route Group (authenticated) で制御されている。

src/app/
├── layout.tsx                  # RootLayout（認証なし）
└── (authenticated)/
    ├── layout.tsx              # AuthProvider でラップ
    ├── page.tsx                # / → /decks にリダイレクト
    └── decks/page.tsx          # メインページ

• RootLayout (src/app/layout.tsx) には AuthProvider は含まれない
• AuthProvider は src/app/(authenticated)/layout.tsx にのみ配置
• (authenticated) 配下の全ページが自動的に認証必須になる

ローカル開発での認証無効化

認証なしで UI を開発する場合は、src/app/(authenticated)/layout.tsx の AuthProvider ラッパーを外す。

変更前:

import { AuthProvider } from "@/components/auth/AuthProvider"

export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
  return <AuthProvider>{children}</AuthProvider>
}

変更後:

export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
  return <>{children}</>
}

⚠️ この変更はローカル開発専用。本番環境にデプロイしないこと。

---

テスト

npm test          # ユニットテスト（Vitest + Testing Library）
npm run test:e2e  # E2E テスト（Playwright — 初回は npx playwright install chromium）

E2E テストはスタブ ACP エージェント（e2e/stub-agent.mjs）を使って Web UI を ローカルモードで起動するため、AWS も kiro-cli も不要。デッキとエージェント設定は e2e/.tmp/ 配下にサンドボックス化され、実際の ~/Documents/SDPM-Presentations や mcp-local/.sdpm/ には触れない。

---

プロジェクト構成

web-ui/
├── src/
│   ├── app/
│   │   ├── layout.tsx              # RootLayout（認証なし）
│   │   ├── globals.css
│   │   └── (authenticated)/
│   │       ├── layout.tsx          # AuthProvider ラッパー
│   │       ├── page.tsx            # / → /decks リダイレクト
│   │       └── decks/page.tsx      # メインページ
│   ├── components/
│   │   ├── ui/                     # shadcn/ui コンポーネント
│   │   ├── auth/                   # AuthProvider, AutoSignin
│   │   ├── chat/                   # ChatPanel, ChatMessage, ToolCard 等
│   │   ├── deck/                   # DeckCard, SlideCarousel, OutlineView 等
│   │   └── AppShell.tsx            # ヘッダー付きレイアウトシェル
│   ├── hooks/                      # useAuth, useDeckList, useWorkspace 等
│   ├── lib/                        # auth.ts（Cognito設定）, utils.ts
│   ├── services/                   # deckService, uploadService, agentCoreService
│   └── types/
├── public/
│   ├── aws-exports.example.json    # 認証設定テンプレート
│   ├── manifest.json               # PWA マニフェスト
│   └── sw.js                       # Service Worker
├── package.json
├── next.config.ts
├── tsconfig.json
├── components.json                 # shadcn/ui 設定
└── postcss.config.mjs

---

主要コンポーネント

chat

チャットインターフェース。ユーザーとエージェントの対話、ファイルアップロード、ツール実行状況の表示を担当。

• ChatPanel — メインのチャット UI
• ChatMessage — メッセージの描画（Markdown 対応）
• ToolCard / ToolIndicator — エージェントのツール実行表示
• FileDropZone / AttachmentPreview — ファイルアップロード

deck

プレゼンテーションの管理・プレビュー。デッキ一覧、スライドカルーセル、アウトライン表示を提供。

• DeckCard / DeckListView — デッキ一覧と検索
• SlideCarousel — スライドのプレビュー表示
• OutlineView / SpecStepNav — アウトラインとスペック進行状況
• WorkspaceView — ワークスペース管理

auth

Cognito OIDC 認証フロー。

• AuthProvider — OIDC 設定の非同期読み込みとプロバイダーラップ
• AutoSignin — 自動サインインとリダイレクト処理

---

ドキュメント

ドキュメント	説明
セットアップガイド	Layer 1〜4 の構築手順
アーキテクチャ	4層設計、データフロー、認証モデル
推奨デプロイ手順	AWS デプロイの推奨手順（CloudShell・ローカル対応）

---

ライセンス

MIT-0