Web UI
May 1, 2026 · View on GitHub
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}</>
}
⚠️ この変更はローカル開発専用。本番環境にデプロイしないこと。
プロジェクト構成
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— メインのチャット UIChatMessage— メッセージの描画（Markdown 対応）ToolCard/ToolIndicator— エージェントのツール実行表示FileDropZone/AttachmentPreview— ファイルアップロード
deck
プレゼンテーションの管理・プレビュー。デッキ一覧、スライドカルーセル、アウトライン表示を提供。
DeckCard/DeckListView— デッキ一覧と検索SlideCarousel— スライドのプレビュー表示OutlineView/SpecStepNav— アウトラインとスペック進行状況WorkspaceView— ワークスペース管理
auth
Cognito OIDC 認証フロー。
AuthProvider— OIDC 設定の非同期読み込みとプロバイダーラップAutoSignin— 自動サインインとリダイレクト処理
ドキュメント
| ドキュメント | 説明 |
|---|---|
| セットアップガイド | Layer 1〜4 の構築手順 |
| アーキテクチャ | 4層設計、データフロー、認証モデル |
| 推奨デプロイ手順 | AWS デプロイの推奨手順（CloudShell・ローカル対応） |