Skip to content

README.md

Latest commit

 

History

History
253 lines (179 loc) · 8.92 KB

README.md

File metadata and controls

253 lines (179 loc) · 8.92 KB
Raw

📝 日本語版 README はこちら

Web UI — Spec-Driven Presentation Maker

Layer 4 Web UI for Spec-Driven Presentation Maker. A React-based chat interface for creating presentations through conversational AI — design your spec, then let the agent build the slides.

Chat UI

Tech Stack

  • Next.js 16 with Turbopack (static export)
  • React 19 / TypeScript 5
  • Tailwind CSS v4 / shadcn/ui / Radix UI
  • react-oidc-context — Cognito OIDC authentication
  • react-markdown + remark-gfm — Markdown rendering
  • react-dropzone — File upload
  • sonner — Toast notifications
  • PWA — Service Worker + Web App Manifest

Prerequisites

  • Node.js 20+
  • npm

Quick Start

cd web-ui
npm ci
npm run dev     # Starts dev server with Turbopack

Open http://localhost:3000.

Note: Authentication is required by default. See the Authentication section to configure or disable it.

Local Mode (Kiro ACP backend)

Run the full Web UI on your machine with Kiro CLI over ACP (Agent Client Protocol). No AWS deployment is needed.

Install and start

The installer adds Kiro CLI and the other dependencies, builds the Web UI (keep "Browser Web UI" ticked in the "What to install" step), and creates the sdpm launcher and a desktop shortcut:

curl -fsSL https://raw.githubusercontent.com/aws-samples/sample-spec-driven-presentation-maker/main/scripts/install/dist/install.sh | bash
sdpm webui

Windows support is verified in CI only:

irm https://raw.githubusercontent.com/aws-samples/sample-spec-driven-presentation-maker/main/scripts/install/dist/install.ps1 | iex
sdpm webui

An MCP-only installation adds the Web UI later with sdpm update --with-webui.

Manual start for development

Install kiro-cli on PATH using the Kiro CLI install guide, then run:

cd web-ui
npm ci
npm run dev:local

Open http://localhost:3000 (Next.js picks the next free port if 3000 is taken).

How it works

Setting NEXT_PUBLIC_MODE=local enables the Next.js API Routes under src/app/api/ and spawns kiro-cli acp --agent sdpm-orchestrator per active deck. The canonical agent definitions live under servers/local/.kiro/acp-agents/ and share the MCP toolset from servers/local/server_acp.py.

Continue from a kiro-cli session

Any chat you had in kiro-cli on this machine can become the starting point of a deck. The empty chat shows your sessions from the last 24 hours as cards; the + menu → Continue from kiro session opens the full list grouped by project. Picking one forks the session into a new ID (the original files under ~/.kiro/sessions/cli/ are never modified), loads it into the orchestrator, and the agent immediately replies with what the work was about and one question — who the audience is and how long the talk is. A chip above the chat shows which session the deck was forked from.

Authentication

Authentication uses OIDC via Cognito User Pool. Configuration is loaded from public/aws-exports.json at runtime, with optional environment variable overrides.

Setup

  1. Copy the example config:
cp public/aws-exports.example.json public/aws-exports.json
  1. Fill in your Cognito values:
{
  "authority": "https://cognito-idp.<REGION>.amazonaws.com/<USER_POOL_ID>",
  "client_id": "<CLIENT_ID>",
  "redirect_uri": "http://localhost:3000",
  "post_logout_redirect_uri": "http://localhost:3000",
  "response_type": "code",
  "scope": "openid profile email",
  "automaticSilentRenew": true,
  "agentRuntimeArn": "arn:aws:bedrock-agentcore:<REGION>:<ACCOUNT_ID>:runtime/<NAME>",
  "apiBaseUrl": "https://<API_GW_ID>.execute-api.<REGION>.amazonaws.com/prod/",
  "awsRegion": "<REGION>"
}

Environment Variable Override

Environment variables (NEXT_PUBLIC_COGNITO_*) take priority over aws-exports.json:

Variable Description
NEXT_PUBLIC_COGNITO_REGION AWS region
NEXT_PUBLIC_COGNITO_USER_POOL_ID Cognito User Pool ID
NEXT_PUBLIC_COGNITO_CLIENT_ID Cognito App Client ID
NEXT_PUBLIC_COGNITO_REDIRECT_URI OAuth redirect URI
NEXT_PUBLIC_COGNITO_POST_LOGOUT_REDIRECT_URI Post-logout redirect URI
NEXT_PUBLIC_COGNITO_RESPONSE_TYPE OAuth response type (default: code)
NEXT_PUBLIC_COGNITO_SCOPE OAuth scopes (default: email openid profile)
NEXT_PUBLIC_COGNITO_AUTOMATIC_SILENT_RENEW Auto token renewal (true/false)

Disabling Auth for Local Development

Authentication is enforced through a Next.js Route Group. All protected pages live under src/app/(authenticated)/, which wraps children with AuthProvider in its layout.tsx:

src/app/
├── layout.tsx                    # RootLayout — no auth
└── (authenticated)/
    ├── layout.tsx                # AuthProvider wrapper
    ├── page.tsx                  # Redirects to /decks
    └── decks/page.tsx            # Main page

To bypass auth during local development, remove the AuthProvider wrapper in src/app/(authenticated)/layout.tsx:

Before:

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

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

After:

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

⚠️ This change is for local development only. Do not deploy to production.

Testing

npm test          # Unit tests (Vitest + Testing Library)
npm run test:e2e  # E2E test (Playwright — first run: npx playwright install chromium)

The E2E test starts the Web UI in Local mode against a stub ACP agent (e2e/stub-agent.mjs), so it needs no AWS and no kiro-cli. Decks and agent config are sandboxed under e2e/.tmp/ — your real ~/Documents/SDPM-Presentations and servers/local/.sdpm/ are never touched.

Project Structure

web-ui/
├── src/
│   ├── app/
│   │   ├── layout.tsx                  # RootLayout (Geist font, Toaster, PWA)
│   │   ├── globals.css
│   │   └── (authenticated)/
│   │       ├── layout.tsx              # AuthProvider wrapper
│   │       ├── page.tsx                # Root → /decks redirect
│   │       └── decks/page.tsx          # Main deck workspace
│   ├── components/
│   │   ├── ui/                         # shadcn/ui primitives
│   │   ├── auth/                       # AuthProvider, AutoSignin
│   │   ├── chat/                       # ChatPanel, ChatMessage, ToolCard, FileDropZone, etc.
│   │   ├── deck/                       # DeckCard, SlideCarousel, OutlineView, DeckListView, etc.
│   │   └── AppShell.tsx                # Header + layout shell
│   ├── hooks/                          # useAuth, useDeckList, useWorkspace, useSwipe, etc.
│   ├── lib/                            # auth.ts (Cognito config), utils.ts
│   ├── services/                       # deckService, uploadService, agentCoreService, parsers
│   └── types/
├── public/
│   ├── aws-exports.example.json        # Auth config template
│   ├── manifest.json                   # PWA manifest
│   └── sw.js                           # Service Worker
├── package.json
├── next.config.ts                      # Static export, build → build/
├── tsconfig.json
├── components.json                     # shadcn/ui config
└── postcss.config.mjs

Key Components

Chat (components/chat/)

Conversational interface for interacting with the agent. Includes message rendering with Markdown support, tool execution cards, file drag-and-drop upload, mention overlays, and slide tag references.

Deck (components/deck/)

Presentation management — deck cards with thumbnails, slide carousel viewer, outline view, spec step navigation, search results grid, and deck CRUD actions.

Auth (components/auth/)

OIDC authentication flow — AuthProvider wraps the Cognito OIDC context, AutoSignin handles automatic redirect-based sign-in.

Documentation

Document Description
Getting Started Full setup guide for all layers
Architecture 4-layer design, data flow, auth model
Recommended Deploy Recommended path for AWS deployments (CloudShell or local)

License

MIT-0