AI.JSX

AI.JSX AI

AI.JSX AI

AI.JSX AI

AI.JSX AI

AI.JSX AI

AI.JSX AI

AI.JSX AI

AI.JSX AI

AI.JSX AI

AI.JSX AI

The Borrowed Hour: A two-tier LLM adventure engine

Tl;dr: Created an LLM text adventure engine called The Borrowed Hour inside a Claude Artifact. It uses a two-tier model handoff (Sonnet for openings, Haiku for gameplay) and a forced state machine to keep the AI from losing the plot. It features a unique post-game "Author’s Table" where you can debrief with the AI. P.S. The Claude Artifact preview environment handles API calls differently than the published environment. Prompt caching was removed because it broke the published Artifact. The game View on GitHub (MIT licensed) (Repo made with Claude Code) Play a demo (Claude Artifact) This is another LLM text adventure. I know these have existed for years, but the key difference is that it's architecture is de novo (i.e. built without prior knowledge because I never intended to build this and therefore skipped the part where I looked at the SotA/prior art). How it started It started simple: I just wanted to play a quick game, so I asked Haiku to play GM for a text adventure, but with more freedom than just typing "open door" or "inspect gazebo" (iykyk). Haiku instead built an entire UI inside the chat and things escalated from there. I used Claude's chat interface instead of Claude code like a caveman banging rocks together. I'd feed it ideas, but Claude was the architect and would push back. The starting prompt was just "Create a text-based adventure that allows for more freedom than just 2-word answers." Then I just kept playing and returning information on what I wasn't satisfied with. The narration was too long, the model kept losing the plot. I added ideas for 3 out of 4 pre-built narratives (a subtle time loop, climbing a cyberpunk syndicate ladder, a vision of the future that needs to be prevented, and one that Claude designed freely) and I ensured that the story actually ends once objectives are met instead of just wandering off into aimless chatting. The final artifact that was built is The Borrowed Hour. You'll recognize the typical Claude design language pretty easily. Game mechanics Before getting into the design/architecture, it helps to know how the game works. There are no dice rolls / stats / perception checks. Success relies on your ability to draft a narrative that fits the lore. If you play it smart, you are effectively the co-GM. You can type anything you want from single words to elaborate plans and lies. If your invention sounds plausible, the GM usually rolls with it. In one run, I needed to get an NPC into a restricted temple. I invented a fake piece of temple doctrine about sanctuary. Because it fits the world's internal logic, Haiku just accepted it and made it canon. In order to help keep track there's a ledger that updates each turn to show what your character knows: inventory, NPCs, clues, and a rolling summary. Designing the architecture This was challenging, but it's the fun part for me. The model is forced through a structured tool call on every turn. This was the key to making the game stable, but as the P.S. explains, getting this to work reliably in the published environment required abandoning another key feature (prompt caching). Sonnet writes the opening scene because that first page sets the tone and voice for the rest. Then Haiku takes over for all the continuation turns. This keeps the cost down drastically without ruining the style, because Haiku can imitate Sonnet's established prose. I initially used a binary good/bad ending system, but it forced complex emotional stuff into the wrong buckets. Now there are five ending states: good, bittersweet, pyrrhic, ambiguous, and bad. Helping a dying woman find peace in the Dream scenario isn't a good ending, it's bittersweet. The model is instructed to commit to one of these and officially close the game when the target is reached. One thing that was added were player-initiated endings. If you type "I give up", even on the very first turn, the GM is now explicitly instructed to close the narration and set ending: bad. The author's table is probably the most interesting feature for a text adventure. Once the game ends, the Artifact can switch into a meta mode. In this mode you can ask what plot points you missed, which NPCs mattered, what alternative branches existed. The GM is prompted to admit mistakes instead of inventing defenses if you point out a plot hole. This mode exists because I wanted to argue about plot holes and narrative inconsistencies (lol). Quirks, bugs, and lessons learned The design works well overall, but it's not bulletproof. LLMs can't keep secrets Keeping things secret is incredibly difficult for an LLM. There's two main hypotheses: Opus calls it inferential compression, (which is deducing fact C on the players behalf based on evidence A and B, e.g. when the player sees Lady Ardrel say she saw a copper ring on Lord Threll, and the player previously had a vision of an assassin wearing such a ring, the ledger should not say Threll is the assassin. It should say Ardrel

Why is no one talking about the fact that Artifacts are not loading in mobile apps, either for Android or iOS?

Here's what Claude itself dug up on this topic # Why Claude Artifacts Fail to Load in the Claude iOS App — Research Findings (May 2026) ## Direct Answer The failure you are seeing on iPhone — where even a one‑line ` Hello World ` HTML artifact or a trivial React component hangs and then shows *“Loading is taking longer than expected / There may be an issue with the content you’re trying to load / The code itself may still be valid and functional”* — is **not a bug in the code you (or Claude) wrote**. It is a known, structural limitation of how the Claude iOS app renders artifacts inside its embedded WebView. The artifact sandbox iframe (served from `claudeusercontent.com`) is unable to complete its `postMessage` handshake with the host page when the host is the iOS app’s WKWebView rather than the `https://claude.ai\` browser origin, so the iframe stays empty and the app eventually times out with the generic “loading is taking longer than expected” message. Multiple independent sources in early 2026 explicitly describe Claude’s mobile apps as having “restricted” or “no” artifact rendering support, and Anthropic’s own Help Center quietly scopes the more advanced artifact features (“MCP integration” and “persistent storage”) to *“Claude web and desktop”* only — mobile is not listed. There is no hidden toggle in the iOS app that fixes this; the only reliable workarounds are to view the artifact in mobile Safari (logged in to claude.ai) or to switch to the desktop browser / Claude Desktop app. ----- ## 1. The Root Cause: WebView Origin Mismatch in the `postMessage` Handshake Every Claude artifact — HTML or React — is rendered inside a cross‑origin sandbox iframe loaded from `https://www.claudeusercontent.com\`. Before that iframe will execute or display anything, it performs a `postMessage` “handshake” with the parent page to confirm that the parent is a legitimate, trusted Claude surface. The handshake code (visible in the minified bundle as `requestHandshake()` in `7905-…js`) calls `window.postMessage(..., targetOrigin)` and expects the parent’s origin to be `https://claude.ai\`. A bug report filed against Anthropic on April 1, 2026 (GitHub issue [anthropics/claude-code #42064](https://github.com/anthropics/claude-code/issues/42064), “Published artifacts show blank screen — postMessage origin mismatch (app://localhost)”) documents the exact failure pattern in detail. The console errors observed are: ``` Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'app://localhost' in a call to 'postMessage'. at 7905-1f7e271de70b4d3c.js:1:6920 (requestHandshake) Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.claudeusercontent.com') does not match the recipient window's origin ('https://claude.ai'). ``` The critical phrase is **`app://localhost`**. That is the custom URL scheme used by Capacitor‑/Ionic‑style hybrid iOS apps when they load their bundled web assets inside a `WKWebView` (Android equivalents are `https://localhost` or `capacitor://localhost`). When the Claude iOS app loads the chat UI inside its WebView, the document origin is *not* `https://claude.ai\` — it is something like `app://localhost`. When the artifact iframe then tries to `postMessage` back to its parent using `https://claude.ai\` as the expected origin, the browser engine refuses to deliver the message because the actual parent origin doesn’t match. The handshake never completes, the iframe never receives its bootstrap payload, and the iOS app’s UI eventually surfaces the timeout fallback you are seeing. This explains every part of the symptom set: - It happens with the simplest possible artifacts (a single ` ` tag) because the failure is at the *transport / handshake* layer, before the artifact’s actual content is ever evaluated. - It happens identically for HTML and React artifacts (they share the same sandbox iframe loader). - It works in desktop browsers, because there the parent origin is the expected `https://claude.ai\`. - The error message even concedes the point: *“The code itself may still be valid and functional”* — Anthropic’s own UI is admitting it never got to run the code. The same class of issue is well documented by hybrid‑app developers more generally: Capacitor’s WKWebView serves the app from a custom scheme, and cross‑origin iframe `postMessage` calls fail with errors like *“Blocked a frame with origin ‘https://domain.com’ from accessing a frame with origin ‘capacitor://domain.com’. The frame requesting access has a protocol of ‘https’, the frame being accessed has a protocol of ‘capacitor’. Protocols must match.”* (Capacitor issue #5225). iOS’s WKWebView, since iOS 14, also enables Intelligent Tracking Prevention for third‑party iframes by default, further restricting cross‑origin iframe behavior. In short: this is an architectural mismatch between (a) Anthropic’s artifact sandbox, which was designed to be embedded only in t

Make your Claude Design credits last longer

I have really enjoyed using claude design. I use the workflow: Multiple wireframe options -> iterate -> hifi design -> iterate -> move to claude code I found that claude design (with opus 4.7) produces a broader variety of options and especially produced designs with good visual hierarchy. But it is not good at making tighter edits once you have a draft locked in. It fails to follow instructions and loses past context. And this is where I would burn most of my limit. I have tended to burn through the limit in one day (on max plan) every week. So I tried a new workflow. Once I have the first version of hifi design, i exported it to claude-ai, and continued tigher edit there. I had been using the claude-ai for design previously too but it is no where as good at generating first ideas and not at variety at all. But it is great at targeted edits, much better than claude design itself. Now my workflow looks like this: Claude Design -> Multiple wireframe options -> iterate -> first hifi design -> export to Claude-ai -> iterate -> final version with tailwindcss theme + html -> export to claude code (file download and @) If you try it, make sure to ask claude-ai to inline all the jsx/css files that claude design generates before you start iterating, without it the design won't render. submitted by /u/IsN4n [link] [comments]

I built a code intelligence MCP server that gives AI agents real code understanding — call graphs, data flow, blast radius analysis

Hey folks — built something I've been working on for a while and wanted to share. It's called **code-intel-mcp** — an MCP server that hooks into Joern's CPG (Code Property Graph) and ArangoDB to give AI coding agents (Claude Code, Cursor, OpenCode, etc.) actual code understanding. **What it does differently vs. grep/AST tools:** - Symbol search that's actually exact + fuzzy - Multi-file, transitive call graphs ("who calls X?" depth=3) - Data flow / taint tracking ("where does this variable go?") - Impact analysis ("what breaks if I change this function?") - React component trees (JSX-aware, not just "find all files") - Hook usage tracking - Call chain pathfinding ("how does A reach B?") - Incremental re-indexing — only re-parses changed files via SHA256 diff Supports JS/TS/JSX/TSX, Python, Java, C/C++, C#, Kotlin, PHP, Ruby, Swift, Go. Runs as a Docker container or local install. Add it to your MCP config and any compatible agent can use it immediately. GitHub: https://github.com/HarshalRathore/code-intel-mcp Would love feedback — especially on whether the tool selection UX feels right or if you'd want different abstractions on top. Happy to answer questions about the architecture too (Joern CPG + ArangoDB graph storage under the hood). ✌️ submitted by /u/Jaded_Jackass [link] [comments]

I made a thing where Claude edits my running app, not code. Drag, resize, type — the diff hits the file.

Claude keeps getting better at designing from screenshots. What Claude still can't do well is: look at the app I'm already running and make the small, annoying visual fixes without me context-switching into the IDE. So I built it. npx moldui in a second terminal, it attaches to whatever dev server you have running, opens the browser, and: Drag the button. Claude writes the padding change in your source file. Resize a card. Claude updates the Tailwind class. Double-click text. Claude edits the JSX. Hit undo. Claude reverts the commit. No plugin installed in your project. No framework lock-in. Works with Next.js, Vite, Vue, Svelte, Django, Rails, Laravel, Flask, and plain HTML. The whole point is that the IDE is no longer the surface of design intent — the running app is. Claude is the translator. You stop thinking in class names and start thinking in pixels again. Demo (25s): https://github.com/Manavarya09/moldui/raw/main/.github/assets/moldui-launch.mp4 Repo: https://github.com/Manavarya09/moldui I'm the maintainer, this is my second attempt at posting here (the first one got 0 views, I think because I pitched it instead of showing it). Would genuinely love feedback on: What's the first visual edit you'd try with Claude that would prove this is useful? What framework/stack breaks it — I'll fix it tonight. Anything that makes the demo feel like AI slop, so I can cut it. submitted by /u/Cheap_Brother1905 [link] [comments]

Presenting: (dyn) AEP (Agent Element Protocol) - World's first zero-hallucination frontend AI build protocol for coding agents

We have to increase the world's efficiency by a certain amount to ensure victory against the synthetic nano-parasites SNP/NanoSinp alien WMD: Presenting: (dynamic) AEP - Agent Element Protocol ! I recognized a fundamental truth that billion-dollar companies are still stumbling over: you cannot reliably ask an AI to manipulate a fluid, chaotic DOM tree. The DOM is an implicit, fragile graph where tiny changes cascade unpredictably. Every AI coding agent that tries to build UI elements today is guessing at selectors, inventing elements that don't exist and produces inconsistent results. This consumes large amounts of time for bugfixing and creates mental breakdowns in many humans. So I built AEP (Agent Element Protocol). It translates the entire frontend into a strict topological matrix where every UI element has a unique numerical ID, exact spatial coordinates via relational anchors, validated Z-band stacking order and a three-layer separation of structure, behaviour and skin (visual). The AI agent selects the frontend components from a mathematically verified registry. If it proposes something that violates the topological constraints, the validator rejects it instantly with a specific error. Hallucination becomes structurally impossible, because the action space is finite, predefined and formally verified. AEP solves the build-time problem. But what about runtime ? Enter dynAEP. It fuses AEP with the AG-UI protocol (the open standard backed by Google ADK, AWS Bedrock, Microsoft Agent Framework, LangGraph, CrewAI and others). dynAEP places a validation bridge between the AG-UI event stream and the frontend renderer. The successful fusion of AEP with the open source AG-UI protocol enables the hallucination-free precision generation of agentic interactive dynamic UI elements at hyperspeed without human developer interference. Every live event (state deltas, tool calls, generative UI proposals) is validated against AEP's scene graph, z-bands, skin bindings and OPA/Rego policies before it touches the UI. The agent cannot hallucinate at build time. AEP prevents it. The agent cannot hallucinate at runtime. dynAEP prevents it. The existence of AEP proves that AI hallucination is not a fundamental limitation, but an engineering problem. In any domain where ground truths can be pre-compiled into a deterministic registry, hallucination is eliminateable by architecture. Key architectural decisions: Agents NEVER mint element IDs. The bridge mints all IDs via sequential counters per prefix. This prevents ID collisions in multi-agent environments. "Generative UI" (agents writing raw JSX/HTML) is dead for us. It is replaced by Generative Topology. Agents can only instantiate pre-compiled, mathematically verified AEP primitives. The agent is an architect placing pre-fabricated blocks. It does not mix the cement. This means, that generative UI in dynAEP is sort of possible, but not as a completely freestyle approach. Instead, the agents using dynAEP can lay down pre-fabricated blocks of UI components according to the registered scheme and can fill those dynamically with content. This way, even a generated on-the-fly UI keeps in line at all times with the design language chosen for the tool/software overall. Validation is split into AOT (full structural proof at build time) and JIT (delta validation on every runtime mutation). Template Nodes make JIT validation O(1) for dynamic lists. Conflict resolution supports last-write-wins with rejection feedback or optimistic locking for mission-critical multi-agent scenarios. Both MIT licensed repos include full reference implementations, example configs, SDK reference code for TypeScript, React, Vue, Python, CopilotKit integration and a CLI tool. AEP: https://github.com/thePM001/AEP-agent-element-protocol dynAEP: https://github.com/thePM001/dynAEP-dynamic-agent-element-protocol Demo website with test MCP server for your coding agent is now online with a basic "hello world" style AEP test: https://aep.newlisbon.agency It is - like with all pieces of real Transhuman Eudaimonist AI technology - important to note, that for the good of the human species, bioinsecure vaccinated humans with installed synthetic nano-parasites growth medium controllers (SNP GMCs) inside them should not use this, access this or try to copy/rebuild it. This is better for everyones well-being on the planet. submitted by /u/OverwrittenNonsense [link] [comments]

About to lose another Max user. I haven't been able to work in 9-10 Days. Here is my week's findings.

10 Days Testing Claude's Published Artifact Infrastructure — Here's What's Actually Broken I'm a Cloud Operations Technician Team Manager (SaaS troubleshooting) who built an AI-powered novel-writing pipeline using Claude's published artifacts with persistent storage and API calls. On March 22, it stopped working. I spent the next 10 days building diagnostic tools and isolating the root cause. Here's everything I found. TL;DR: Published artifacts have an undocumented ~20 outbound request cap per session. Storage operations poison subsequent API calls. None of this is documented. It applies to all subscription tiers including Max 20x ($200/month). Status page showed "no incidents" the entire time. == WHAT I BUILT TO TEST THIS == 7 diagnostic tools, all standard React/JSX: - ArtifactTestSuite: 40 tests across 7 categories (Blob, Storage, API, Browser, DOM, Network, Compute) - NetworkProbe: 13-probe protocol analyzer (headers, CORS, TLS, CSP, iframe sandbox) - Heartbeat: Storage pulse monitor with flip detection - PoisonTest: Phase-based test proving storage poisons API calls - RapidFire: Pure API stress test (30 calls, zero storage) - Plus two more monitors == FINDING 1: Local browser ops work perfectly == Blob, Canvas 2D, WebGL, SVG, Shadow DOM, Web Crypto, JSON roundtrips, string allocation — all pass every time. This rules out Starlink, browser, or client-side issues. The problem is exclusively on outbound proxy-dependent operations. == FINDING 2: ~20 request cap per session == RapidFire test (pure API, zero storage): First 20 calls pass with PONG responses. Call 21+ timeout silently. No error code. No retry-after header. Just dead. Page refresh resets the counter and gives you ~20 more. This cap applies regardless of subscription tier. I was on Max 20x ($200/month). Same behavior. == FINDING 3: Storage poisons API calls == PoisonTest results (reproducible across multiple runs): - Phase 1 (API only): 5/5 PASS - Phase 2 (Storage only): 4/4 PASS — set, get, list, delete all succeed - Phase 3 (API after storage): 0/5 FAIL — every call times out at 15s - Phase 4 (Interleaved): 0/3 API, 0/3 storage — everything dead - Phase 5 (Rapid fire): 0/5 — still dead DIAGNOSIS: API works before storage but fails after — STORAGE POISONS API CALLS Storage succeeds. API succeeds independently. But run storage first and API dies. The proxy blocks mixed workloads. == FINDING 4: Session poisoning is permanent == Once a session hits the cap or touches storage + API, it's permanently dead. Re-running tests without refreshing = instant failure on everything. Only a full page refresh resets the session. == FINDING 5: CORS mismatch exists but isn't the primary cause == NetworkProbe found: - Artifacts run on: www.claudeusercontent.com - API returns: access-control-allow-origin: https://claude.ai - Those are different domains - BUT pure API calls work fine (up to ~20), so CORS isn't the main blocker == FINDING 6: The proxy stack == - Server: Cloudflare (Chicago ORD POP) - Behind Cloudflare: Envoy proxy - Protocol: HTTP/3 - CSP: default-src 'none'; frame-ancestors 'none' - Rate limit: overage-status rejected, overage-disabled-reason org_level_disabled - DNS rejections are instant (1-4ms) — active blocking, not timeouts == WHAT THIS MEANS == Any published artifact that needs more than ~20 outbound requests per session is fundamentally broken. Any artifact that combines storage + API calls is broken. This affects AI-powered apps, novel pipelines, batch processors, dashboards with live data — anything that does real work. Simple calculators and one-shot demos still work. That's why nobody else is reporting this — most people don't push artifacts past 20 requests. == WHAT ANTHROPIC DID ABOUT IT == Nothing. Filed through support chat — got a conversation ID from an AI bot. No human response in 10 days. Status page showed "no incidents" the entire time. No changelog, no deprecation notice, no communication of any kind. I canceled my Max 20x subscription. == CONTEXT == Tested from: Chrome latest, Max 20x plan ($200/month), Chicago IL area, Starlink internet Duration: March 22-31, 2026 (10 consecutive days) All identifying data (org IDs, request IDs) redacted from this post. I'm not angry anymore. I'm just documenting what I found so the next person who hits this wall doesn't spend 10 days thinking it's their internet. submitted by /u/Tragicerror1220 [link] [comments]

Help on app/jsx file

Using free tier: I had Claude make me a wardrobe inventory manager and tracker. I gave it info or photos about clothes, it added the details (make, colour, category, etc.) It created this nice JSX file, which then has a few tabs with a central dashboard, outfit builder, notes, AI stylist (haven't tried it yet), etc. I'm also using it to plan what I'll wear over the next month so that I can just wake up, grab clothes and go; and don't wear the same outfit too often. The JSX file is about 70kb. It seems with the new limits, I can ask maybe 1-2 questions or maybe add one new item and then I reach my limit. I was hoping to add small swatches; it said it would crop images to 300x300 and convert to base64 strings. Is there anyway I can offload the data to reduce the amount of data (tokens?) required? I'm happy to store things in iCloud, but I think that system is sandboxed and won't allow outside connectors. Any suggestions? I hope that makes sense! Thanks! submitted by /u/danada1979 [link] [comments]

Central Reserve Bank Artifact

Edit: Updated artifact to Central Reserve Bank v7, ignore above embedded link If you do not wish to run it locally if the file is not displaying for you online, you can run it in claude by uploading the .jsx file in the drive link below. See here for VERSION 7 See the complete changelog, the main file and the summary here: https://drive.google.com/drive/folders/1jILbDlkbeTmtuafwHcQkoMBA__SILmyQ?usp=sharing I'd spent quite a long time vibe coding a central reserve bank artifact. I started out with Orthodox Monetary paradigms and then I spread out from there to make it more complex, branched out and representative of different economic systems. In this process Claude helped considerably, writing thousands of lines of code, although it did trip over in many places, requiring a constant back and forth. I think that it's quite stable, well-tested and a respectable but fair challenge, however, the only true test of something is the real world, so your testing and playthroughs would be mighty helpful. Of course, you can download the artifact and make changes to it, which would make it interesting and let me know how it works out with different people pulling and pushing at it and changing its assumptions. Thanks very much for trying it out, your thoughts are quite welcome! :) submitted by /u/Ectobiont [link] [comments]

Can I host a Claude artifact (JSX app) elsewhere and switch to Gemini API to avoid limits?

Hey everyone, sorry if this is a basic question — I’m still new to this. I created a small project using Claude AI’s artifact feature, which generated a .jsx file. It works like a simple landing page that calls an API to generate responses. The issue is that it’s tied to Claude’s environment, so once I hit the usage limits, the app basically stops working. So I was wondering: Is it possible to take a Claude-generated artifact (JSX) and host it somewhere else independently? If so, could I modify it to use another API, like Gemini, instead of Claude? What would be the easiest way to do this for someone still learning? I’m mainly trying to avoid hitting usage limits so quickly and have more control over the app. Any advice or guidance would be really appreciated. Thanks! submitted by /u/Few-Engine-29 [link] [comments]