Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ deploy/
.nx/workspace-data
tmp/
apps/website/test-results/
# Demo media is hosted on Vercel Blob, not committed (see DemoShowcase.tsx /
# apps/website/scripts/upload-demo-media.md). Keep these binaries out of git.
apps/website/public/demo/
cockpit/**/angular/test-results/
/test-results/

Expand Down
Binary file removed apps/website/public/demo/ag-ui-demo-poster.webp
Binary file not shown.
Binary file removed apps/website/public/demo/ag-ui-demo.mp4
Binary file not shown.
Binary file removed apps/website/public/demo/ag-ui-demo.webm
Binary file not shown.
Binary file removed apps/website/public/demo/langgraph-demo-poster.webp
Binary file not shown.
Binary file removed apps/website/public/demo/langgraph-demo.mp4
Binary file not shown.
Binary file removed apps/website/public/demo/langgraph-demo.webm
Binary file not shown.
42 changes: 42 additions & 0 deletions apps/website/scripts/upload-demo-media.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# Homepage demo media (Vercel Blob)

The homepage `DemoShowcase` plays short recorded loops of the LangGraph and
AG-UI demos. These are **large binaries**, so they are NOT committed to git —
they live in a public **Vercel Blob** store and are referenced by absolute URL
from `apps/website/src/components/landing/DemoShowcase.tsx` (`DEMO_CDN`).

- **Store:** `ngaf-website-assets` (id `store_ELgKDAxPSvqCrns1`), team `cacheplane`, public access.
- **Public base:** `https://elgkdaxpsvqcrns1.public.blob.vercel-storage.com/demo`
- **Files:** `{langgraph,ag-ui}-demo.mp4`, `{langgraph,ag-ui}-demo.webm`, `{langgraph,ag-ui}-demo-poster.webp`

`apps/website/public/demo/` is gitignored so these never re-enter history.

## Re-uploading (e.g. a recut)

Uploads use the same pathnames, so the URLs in `DemoShowcase.tsx` stay stable —
no code change needed unless you add/rename a file.

1. Get the store's read-write token (`BLOB_READ_WRITE_TOKEN`). It is connected to
the `threadplane` Vercel project; pull it with the Vercel API or
`vercel env pull` (CLI ≥ 37 also has `vercel blob` commands).

2. Upload each file with a stable pathname (no random suffix):

```bash
curl -X PUT "https://blob.vercel-storage.com/demo/langgraph-demo.mp4" \
-H "authorization: Bearer $BLOB_READ_WRITE_TOKEN" \
-H "x-content-type: video/mp4" \
-H "x-add-random-suffix: 0" \
-H "x-api-version: 7" \
--data-binary @langgraph-demo.mp4
# repeat for .webm (video/webm) and -poster.webp (image/webp), both runtimes
```

3. Verify: `curl -I https://elgkdaxpsvqcrns1.public.blob.vercel-storage.com/demo/langgraph-demo.mp4` → `200`.

## Producing the clips

The clips are screen recordings of the live demos captured headlessly with
Playwright (`recordVideo`), then trimmed/sped and encoded small with `ffmpeg`
(H.264 mp4 + VP9 webm, first-frame `webp` poster, 1280×800). Keep each file
well under ~1 MB.
10 changes: 8 additions & 2 deletions apps/website/src/components/landing/DemoShowcase.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@ interface DemoMedia {
href: string;
}

// Demo media is hosted on Vercel Blob (store: ngaf-website-assets) rather than
// committed to the repo — these clips are large binaries that would bloat git
// history on every recut. Re-uploading with the same pathnames keeps these URLs
// stable. See apps/website/scripts/upload-demo-media.md for the upload steps.
const DEMO_CDN = 'https://elgkdaxpsvqcrns1.public.blob.vercel-storage.com/demo';

const MEDIA: DemoMedia[] = [
{ key: 'langgraph', tabLabel: 'LangGraph', url: 'demo.threadplane.ai', videoMp4: '/demo/langgraph-demo.mp4', videoWebm: '/demo/langgraph-demo.webm', poster: '/demo/langgraph-demo-poster.webp', href: DEMOS.find((d) => d.key === 'langgraph')!.href },
{ key: 'ag-ui', tabLabel: 'AG-UI', url: 'ag-ui.threadplane.ai', videoMp4: '/demo/ag-ui-demo.mp4', videoWebm: '/demo/ag-ui-demo.webm', poster: '/demo/ag-ui-demo-poster.webp', href: DEMOS.find((d) => d.key === 'ag-ui')!.href },
{ key: 'langgraph', tabLabel: 'LangGraph', url: 'demo.threadplane.ai', videoMp4: `${DEMO_CDN}/langgraph-demo.mp4`, videoWebm: `${DEMO_CDN}/langgraph-demo.webm`, poster: `${DEMO_CDN}/langgraph-demo-poster.webp`, href: DEMOS.find((d) => d.key === 'langgraph')!.href },
{ key: 'ag-ui', tabLabel: 'AG-UI', url: 'ag-ui.threadplane.ai', videoMp4: `${DEMO_CDN}/ag-ui-demo.mp4`, videoWebm: `${DEMO_CDN}/ag-ui-demo.webm`, poster: `${DEMO_CDN}/ag-ui-demo-poster.webp`, href: DEMOS.find((d) => d.key === 'ag-ui')!.href },
];

export function DemoShowcase() {
Expand Down
Loading