[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81618":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":12,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":15,"starSnapshotCount":15,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},81618,"svelte-edge","acoyfellow\u002Fsvelte-edge","acoyfellow","Agent-generated Svelte 5 UI compiled on Cloudflare Workers into inline edge bundles","https:\u002F\u002Fsvelte-edge.coey.dev",null,"TypeScript",22,1,7,0,40.9,"MIT License",false,"main",true,[22,23,24,25,26,27,28,29],"ai-agents","cloudflare-workers","edge-computing","generative-ui","hono","svelte","svelte5","workers-ai","2026-06-12 04:01:34","# svelte-edge\n\nAgents can write Svelte now.\n\n`svelte-edge` is a Cloudflare Workers demo where a chat agent generates Svelte 5, the Worker compiles it at the edge, and the live component appears inline in the conversation. The component can send structured data back to the host page with `postMessage`, so the agent can continue the workflow.\n\nLive demo:\n\n- https:\u002F\u002Fsvelte-edge.coy.workers.dev\n- Target custom domain: https:\u002F\u002Fsvelte-edge.coey.dev\n\nRepo:\n\n- https:\u002F\u002Fgithub.com\u002Facoyfellow\u002Fsvelte-edge\n\n## What it demonstrates\n\n- **Agent-generated UI** — Kimi K2.6 via Workers AI writes Svelte 5 source.\n- **Edge compile** — the Worker compiles generated source with `svelte\u002Fcompiler`.\n- **Inline components** — the browser mounts the compiled component inside the chat.\n- **Structured return path** — generated UI can call `parent.postMessage(...)` to hand data back to the agent.\n- **Edge bundles** — source can be turned into stable bundle URLs: `client.js`, `server.js`, `style.css`, `preview.html`, and `manifest.json`.\n\n## Quick start\n\n```sh\nnpm install\nnpm run dev\n```\n\nOpen:\n\n```txt\nhttp:\u002F\u002Flocalhost:8787\n```\n\nUseful routes:\n\n```txt\n\u002F                         agent-first homepage\n\u002Fplayground               source editor + preview + bundle inspector\n\u002Fexamples                 curated Svelte 5 examples\n\u002Fdocs                     docs\n\u002Fhealth                   health check\n```\n\n## API\n\nCompile client or server output directly:\n\n```sh\ncurl -sX POST 'http:\u002F\u002Flocalhost:8787\u002Fcompile?mode=client' \\\n  -H 'content-type: text\u002Fplain' \\\n  --data '\u003Cscript>let count = $state(0);\u003C\u002Fscript>\u003Cbutton onclick={() => count += 1}>{count}\u003C\u002Fbutton>'\n```\n\nCreate an edge bundle:\n\n```sh\ncurl -sX POST 'http:\u002F\u002Flocalhost:8787\u002Fbundles' \\\n  -H 'content-type: text\u002Fplain' \\\n  --data '\u003Cscript>let count = $state(0);\u003C\u002Fscript>\u003Cbutton onclick={() => count += 1}>{count}\u003C\u002Fbutton>'\n```\n\nGenerate UI with Workers AI:\n\n```sh\ncurl -sX POST 'http:\u002F\u002Flocalhost:8787\u002Fagent\u002Fgenerate-ui' \\\n  -H 'content-type: application\u002Fjson' \\\n  --data '{\"prompt\":\"Make a pricing plan picker with Starter, Pro, and Business options\"}'\n```\n\n## Bundle routes\n\n```txt\nPOST \u002Fbundles\nGET  \u002Fbundles\u002F:hash\u002Fclient.js\nGET  \u002Fbundles\u002F:hash\u002Fserver.js\nGET  \u002Fbundles\u002F:hash\u002Fstyle.css\nGET  \u002Fbundles\u002F:hash\u002Fpreview.html\nGET  \u002Fbundles\u002F:hash\u002Fmanifest.json\n```\n\n`\u002Fartifacts` still exists as a compatibility alias, but public docs and UI use **bundles** to avoid confusion with Cloudflare Artifacts.\n\n## Workers AI model\n\nThe agent endpoint uses:\n\n```txt\n@cf\u002Fmoonshotai\u002Fkimi-k2.6\n```\n\nWrangler binding:\n\n```toml\n[ai]\nbinding = \"AI\"\n```\n\n## Cache \u002F stable bundle URLs\n\nThe Worker can run without KV, but stable `GET \u002Fbundles\u002F:hash\u002F...` retrieval needs a KV namespace:\n\n```sh\nwrangler kv namespace create SVELTE_EDGE_CACHE\n```\n\nThen add the generated binding to `wrangler.toml`:\n\n```toml\n[[kv_namespaces]]\nbinding = \"SVELTE_EDGE_CACHE\"\nid = \"...\"\n```\n\n## Development commands\n\n```sh\nnpm run check       # generate CSS\u002FOG assets + typecheck\nnpm run build       # dry-run Wrangler build\nnpm run deploy      # deploy Worker\nnpm run bench:local # local compiler baseline\nnpm run bench:http  # deployed\u002Flocal HTTP benchmark\n```\n\n## Notes\n\n- This is a demo\u002Fprototype, not a replacement for the Svelte Playground.\n- The SSR path is experimental because `new Function` style evaluation is restricted in `workerd`.\n- The main product idea is: **chat → Svelte 5 source → edge bundle → inline UI → structured result back to the agent**.\n","svelte-edge 项目展示了一个由 AI 代理生成的 Svelte 5 UI，并通过 Cloudflare Workers 在边缘编译成内联组件。其核心功能包括利用 AI 代理（如 Kimi K2.6）生成 Svelte 代码，然后在边缘进行编译，最终将组件嵌入到聊天界面中，同时支持通过 `postMessage` 将结构化数据传递回主机页面。该项目适用于需要在实时对话环境中动态生成和渲染用户界面的场景，比如客服系统、在线教育平台等。此外，它还提供了稳定且可访问的捆绑 URL 来存储生成的组件资源。",2,"2026-06-11 04:05:43","CREATED_QUERY"]