Plainbuilt
All projects

Maple Café

A lofi.cafe-style ambient player that streams MapleStory background music, with selectable maps and full playback controls.

View live View source 7 prompts totalViteReactTypeScriptreact-playerVercelClaude Opus 4.7GPT-5.5vibe-codedweb app
Maple Café screenshot

Maple Café is a lofi.cafe-style ambient listening app — except instead of lofi beats, it streams the background music from MapleStory. You can switch between different map themes and use the full set of player controls: play/pause, shuffle, previous/next, and volume. Sprite and scene assets are sourced from maplestory.io, with generated artwork filling the gaps. It was built end to end with an AI coding agent and deployed free on Vercel.

The prompts

Every prompt from the build session, in order, exactly as typed. Nothing edited out — the long browser console dumps from the debugging prompts are tucked into scrollable boxes but copy in full. Use the Copy button on any block to grab it verbatim.

Prompt 1 — Kick off the buildClaude Opus 4.7thinking: xhighplan mode
I would like to create a webapp with the same overall concept and feel as https://www.lofi.cafe/, except plays maplestory background music. The user should be able to select between different background settings (maps) and similar controls (pause/play, shuffle, prev, next, volume, etc) to lofi.cafe. source assets from maplestory.io and where assets aren't available or you want to be inventitive, utilise codex image2.
Prompt 2 — Check inClaude Opus 4.7thinking: xhigh
how'd you go
Prompt 3 — Check in againClaude Opus 4.7thinking: xhigh
How is the generating going?
Prompt 4 — Blank screen on first runClaude Opus 4.7thinking: xhigh
I navigated to localhost:5173, but got a blank screen. console log errors:
Browser console — HiddenPlayer render error · scroll
react-dom_client.js?v=f3baad3c:2816 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `HiddenPlayer`.
    at createFiberFromTypeAndProps (react-dom_client.js?v=f3baad3c:2816:21)
    at createFiberFromElement (react-dom_client.js?v=f3baad3c:2827:11)
    at reconcileChildFibersImpl (react-dom_client.js?v=f3baad3c:3812:373)
    at react-dom_client.js?v=f3baad3c:3868:28
    at reconcileChildren (react-dom_client.js?v=f3baad3c:5385:46)
    at beginWork (react-dom_client.js?v=f3baad3c:6199:1569)
    at runWithFiberInDEV (react-dom_client.js?v=f3baad3c:850:66)
    at performUnitOfWork (react-dom_client.js?v=f3baad3c:8428:92)
    at workLoopSync (react-dom_client.js?v=f3baad3c:8324:37)
    at renderRootSync (react-dom_client.js?v=f3baad3c:8308:6)
createFiberFromTypeAndProps @ react-dom_client.js?v=f3baad3c:2816
createFiberFromElement @ react-dom_client.js?v=f3baad3c:2827
reconcileChildFibersImpl @ react-dom_client.js?v=f3baad3c:3812
(anonymous) @ react-dom_client.js?v=f3baad3c:3868
reconcileChildren @ react-dom_client.js?v=f3baad3c:5385
beginWork @ react-dom_client.js?v=f3baad3c:6199
runWithFiberInDEV @ react-dom_client.js?v=f3baad3c:850
performUnitOfWork @ react-dom_client.js?v=f3baad3c:8428
workLoopSync @ react-dom_client.js?v=f3baad3c:8324
renderRootSync @ react-dom_client.js?v=f3baad3c:8308
performWorkOnRoot @ react-dom_client.js?v=f3baad3c:7993
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=f3baad3c:9058
performWorkUntilDeadline @ react-dom_client.js?v=f3baad3c:35
<div>
exports.jsxDEV @ react_jsx-dev-runtime.js?v=d5147fb5:192
HiddenPlayer @ HiddenPlayer.tsx:27
react_stack_bottom_frame @ react-dom_client.js?v=f3baad3c:12867
renderWithHooksAgain @ react-dom_client.js?v=f3baad3c:4267
renderWithHooks @ react-dom_client.js?v=f3baad3c:4218
updateFunctionComponent @ react-dom_client.js?v=f3baad3c:5568
beginWork @ react-dom_client.js?v=f3baad3c:6139
runWithFiberInDEV @ react-dom_client.js?v=f3baad3c:850
performUnitOfWork @ react-dom_client.js?v=f3baad3c:8428
workLoopSync @ react-dom_client.js?v=f3baad3c:8324
renderRootSync @ react-dom_client.js?v=f3baad3c:8308
performWorkOnRoot @ react-dom_client.js?v=f3baad3c:7993
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=f3baad3c:9058
performWorkUntilDeadline @ react-dom_client.js?v=f3baad3c:35
<HiddenPlayer>
exports.jsxDEV @ react_jsx-dev-runtime.js?v=d5147fb5:192
App @ App.tsx:44
react_stack_bottom_frame @ react-dom_client.js?v=f3baad3c:12867
renderWithHooksAgain @ react-dom_client.js?v=f3baad3c:4267
renderWithHooks @ react-dom_client.js?v=f3baad3c:4218
updateFunctionComponent @ react-dom_client.js?v=f3baad3c:5568
beginWork @ react-dom_client.js?v=f3baad3c:6139
runWithFiberInDEV @ react-dom_client.js?v=f3baad3c:850
performUnitOfWork @ react-dom_client.js?v=f3baad3c:8428
workLoopSync @ react-dom_client.js?v=f3baad3c:8324
renderRootSync @ react-dom_client.js?v=f3baad3c:8308
performWorkOnRoot @ react-dom_client.js?v=f3baad3c:7956
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=f3baad3c:9058
performWorkUntilDeadline @ react-dom_client.js?v=f3baad3c:35
<App>
exports.jsxDEV @ react_jsx-dev-runtime.js?v=d5147fb5:192
(anonymous) @ main.tsx:8
client:510 An error occurred in the <div> component.

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
Prompt 5 — Mostly working, residual console noiseClaude Opus 4.7thinking: xhigh
Great, i think everything is mostly in order of what i expected. I just see these in the console logs:
Browser console — YouTube postMessage / blocked requests · scroll
www-widgetapi.js:210 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:5173').
n.sendMessage @ www-widgetapi.js:210
Eb @ www-widgetapi.js:206
n.Z @ www-widgetapi.js:205
setInterval
Ab @ www-widgetapi.js:207
X @ www-widgetapi.js:197
(anonymous) @ react-player_youtube.js?v=bfba0d9f:1063
Promise.then
load @ react-player_youtube.js?v=bfba0d9f:1061
(anonymous) @ react-player_youtube.js?v=bfba0d9f:474
componentDidMount @ react-player_youtube.js?v=bfba0d9f:1039
react_stack_bottom_frame @ react-dom_client.js?v=bfba0d9f:12881
runWithFiberInDEV @ react-dom_client.js?v=bfba0d9f:850
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6962
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6961
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:7040
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:7029
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6995
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6961
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6995
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6957
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6995
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6957
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:7046
recursivelyTraverseLayoutEffects @ react-dom_client.js?v=bfba0d9f:7478
commitLayoutEffectOnFiber @ react-dom_client.js?v=bfba0d9f:6974
flushLayoutEffects @ react-dom_client.js?v=bfba0d9f:8670
commitRoot @ react-dom_client.js?v=bfba0d9f:8583
commitRootWhenReady @ react-dom_client.js?v=bfba0d9f:8078
performWorkOnRoot @ react-dom_client.js?v=bfba0d9f:8050
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=bfba0d9f:9058
performWorkUntilDeadline @ react-dom_client.js?v=bfba0d9f:35
<YouTube>
exports.createElement @ react-BRYbbeEC.js?v=bfba0d9f:639
render @ react-player_youtube.js?v=bfba0d9f:636
react_stack_bottom_frame @ react-dom_client.js?v=bfba0d9f:12875
updateClassComponent @ react-dom_client.js?v=bfba0d9f:5728
beginWork @ react-dom_client.js?v=bfba0d9f:6140
runWithFiberInDEV @ react-dom_client.js?v=bfba0d9f:850
performUnitOfWork @ react-dom_client.js?v=bfba0d9f:8428
workLoopSync @ react-dom_client.js?v=bfba0d9f:8324
renderRootSync @ react-dom_client.js?v=bfba0d9f:8308
performWorkOnRoot @ react-dom_client.js?v=bfba0d9f:7956
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=bfba0d9f:9058
performWorkUntilDeadline @ react-dom_client.js?v=bfba0d9f:35
<Player>
exports.createElement @ react-BRYbbeEC.js?v=bfba0d9f:639
(anonymous) @ react-player_youtube.js?v=bfba0d9f:776
render @ react-player_youtube.js?v=bfba0d9f:820
react_stack_bottom_frame @ react-dom_client.js?v=bfba0d9f:12875
updateClassComponent @ react-dom_client.js?v=bfba0d9f:5728
beginWork @ react-dom_client.js?v=bfba0d9f:6140
runWithFiberInDEV @ react-dom_client.js?v=bfba0d9f:850
performUnitOfWork @ react-dom_client.js?v=bfba0d9f:8428
workLoopSync @ react-dom_client.js?v=bfba0d9f:8324
renderRootSync @ react-dom_client.js?v=bfba0d9f:8308
performWorkOnRoot @ react-dom_client.js?v=bfba0d9f:7956
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=bfba0d9f:9058
performWorkUntilDeadline @ react-dom_client.js?v=bfba0d9f:35
<ReactPlayer>
exports.jsxDEV @ react_jsx-dev-runtime.js?v=bfba0d9f:192
HiddenPlayer @ HiddenPlayer.tsx:28
react_stack_bottom_frame @ react-dom_client.js?v=bfba0d9f:12867
renderWithHooksAgain @ react-dom_client.js?v=bfba0d9f:4267
renderWithHooks @ react-dom_client.js?v=bfba0d9f:4218
updateFunctionComponent @ react-dom_client.js?v=bfba0d9f:5568
beginWork @ react-dom_client.js?v=bfba0d9f:6139
runWithFiberInDEV @ react-dom_client.js?v=bfba0d9f:850
performUnitOfWork @ react-dom_client.js?v=bfba0d9f:8428
workLoopSync @ react-dom_client.js?v=bfba0d9f:8324
renderRootSync @ react-dom_client.js?v=bfba0d9f:8308
performWorkOnRoot @ react-dom_client.js?v=bfba0d9f:7956
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=bfba0d9f:9058
performWorkUntilDeadline @ react-dom_client.js?v=bfba0d9f:35
<HiddenPlayer>
exports.jsxDEV @ react_jsx-dev-runtime.js?v=bfba0d9f:192
App @ App.tsx:44
react_stack_bottom_frame @ react-dom_client.js?v=bfba0d9f:12867
renderWithHooksAgain @ react-dom_client.js?v=bfba0d9f:4267
renderWithHooks @ react-dom_client.js?v=bfba0d9f:4218
updateFunctionComponent @ react-dom_client.js?v=bfba0d9f:5568
beginWork @ react-dom_client.js?v=bfba0d9f:6139
runWithFiberInDEV @ react-dom_client.js?v=bfba0d9f:850
performUnitOfWork @ react-dom_client.js?v=bfba0d9f:8428
workLoopSync @ react-dom_client.js?v=bfba0d9f:8324
renderRootSync @ react-dom_client.js?v=bfba0d9f:8308
performWorkOnRoot @ react-dom_client.js?v=bfba0d9f:7956
performWorkOnRootViaSchedulerTask @ react-dom_client.js?v=bfba0d9f:9058
performWorkUntilDeadline @ react-dom_client.js?v=bfba0d9f:35
<App>
exports.jsxDEV @ react_jsx-dev-runtime.js?v=bfba0d9f:192
(anonymous) @ main.tsx:8
lockdown-install.js:1 SES Removing unpermitted intrinsics
VM704:461  GET https://www.youtube.com/ptracking?html5=1&video_id=XYtHWyrVm30&cpn=AOFW-ZFBtJG8EIsm&ei=JvkLauSbBLmj9fwP2NzvgQE&ptk=youtube_none&pltype=contentugc net::ERR_BLOCKED_BY_CLIENT
applyHandler @ VM704:461
apply @ VM704:1758
apply @ VM704:2095
apply @ VM704:5895
applyHandler @ VM704:6623
apply @ VM704:6965
applyHandler @ VM704:9480
wE2 @ base.js:1004
Of @ base.js:3134
(anonymous) @ base.js:3403
then @ base.js:4413
Jl @ base.js:3403
S @ base.js:5211
S @ base.js:5215
BU @ base.js:5331
YL @ base.js:3634
C3 @ base.js:5325
(anonymous) @ base.js:967
Sc @ base.js:576
g.x.dispatchEvent @ base.js:4192
dispatchEvent @ base.js:5189
listener @ base.js:5421
www.youtube.com/generate_204?yDriZg:1  GET https://www.youtube.com/generate_204?yDriZg net::ERR_BLOCKED_BY_CLIENT
Prompt 6 — Hosting questionClaude Opus 4.7thinking: xhigh
could this project be hosted on vercel? free?
Prompt 7 — Go aheadClaude Opus 4.7thinking: xhigh
please.