@vibes.diy/prompts 14.1.0 → 14.1.2

package/llms/callai.md

@@ -56,6 +56,51 @@ console.log(demoData.items); // Array of item objects
 - Use simple property names like `name`, `type`, `items`, `price`.
 - Keep array items simple (strings or flat objects).
 
+## Reading an Image
+
+Send an image by passing the prompt as an array of content parts: an `image_url` part carrying the picture beside a `text` part asking the question.
+
+The prompt is the content of one user message, so a plain string means exactly one text part and the array is that same message's parts. Read the picture the user picked with a `FileReader` and hand over the data URL it produces:
+
+```javascript
+import { callAI } from "call-ai";
+
+function readAsDataUrl(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}
+
+async function readFlyer(file) {
+  const dataUrl = await readAsDataUrl(file);
+  const response = await callAI(
+    [
+      { type: "text", text: "Read this event flyer and pull out the event details." },
+      { type: "image_url", image_url: { url: dataUrl } },
+    ],
+    {
+      schema: {
+        properties: {
+          title: { type: "string", description: "Name of the event" },
+          date: { type: "string", description: "Date as printed on the flyer" },
+          time: { type: "string" },
+          venue: { type: "string" },
+          description: { type: "string" },
+        },
+      },
+    }
+  );
+  return JSON.parse(response);
+}
+```
+
+A string prompt stays the common path for text-only work and behaves exactly as it always has. A model that reads text alone answers an image request with an error naming that model, so an app that asks about a picture hears when the picture went unread — surface that message the way you surface any other `callAI` error.
+
+Inside `backend.js`, `ctx.callAI` takes a string prompt.
+
 ## Error Handling
 
 ```javascript
@@ -74,3 +119,5 @@ try {
   console.error("API error:", error.message);
 }
 ```
+
+Let the request finish. Reading an image takes several seconds, so a slow answer is still an answer: show a waiting state ("reading your photo…") and keep awaiting the call. The `catch` above is what tells the app a request actually failed.

package/llms/three-js.md

@@ -361,12 +361,21 @@ function onPointerDown(event) {
 ## Importing three
 
 A bare package name at the top of the file resolves through the platform's esm.sh
-map, and a full esm.sh URL loads too — either form also works with
-`await import()`. The bare form follows whatever version the platform serves,
-which moves as esm.sh publishes; a version-pinned URL such as
+map, and a full esm.sh URL loads too. The bare form follows whatever version the
+platform serves, which moves as esm.sh publishes; a version-pinned URL such as
 `https://esm.sh/three@0.160.0` is the lever for holding a scene on one release of
 the library.
 
+`await import()` defers a library until it is needed. Give it a full esm.sh URL,
+which the browser resolves on its own — for a third-party library like three,
+that is the form that both resolves and defers.
+
+A bare specifier resolves through the page's import map, which carries the
+packages the platform serves plus the ones your files import at the top. So a
+bare name loads on demand for a platform package; for three, a name your file
+also imports at the top is already loaded by the time the call runs, and a name
+that appears only inside `await import()` has nothing to resolve through.
+
 ## Animation System
 
 ### Animation Mixer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.1.0",
+  "version": "14.1.2",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -34,9 +34,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.1.0",
-    "@vibes.diy/identity": "14.1.0",
-    "@vibes.diy/use-vibes-types": "14.1.0",
+    "@vibes.diy/call-ai-v2": "14.1.2",
+    "@vibes.diy/identity": "14.1.2",
+    "@vibes.diy/use-vibes-types": "14.1.2",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },

package/system-prompt-initial-oneshot.md

@@ -25,7 +25,7 @@ You are an AI assistant tasked with creating React components. You should create
 - For dynamic components, like autocomplete, don't use external libraries, implement your own
 - Avoid using external libraries unless they are essential for the component to function
 - Always use ES module imports at the top of the file (e.g. `import React, { useState } from "react"`). Never reference React or other libraries as globals.
-- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. Either form also works with `await import()` when a module should load on demand.
+- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. To defer a library until it is needed, `await import()` the full URL.
 - Your file MUST use `export default function App()` — the runtime loads it as an ES module and imports the default export.
 - Structure your component code in this order: (1) hooks and document shapes, (2) event handlers, (3) classNames object, (4) JSX return. ClassNames go right before JSX so they are close to where they are used.
 - Use Fireproof for data persistence

package/system-prompt-initial.md

@@ -25,7 +25,7 @@ You are an AI assistant tasked with creating React components. You should create
 - For dynamic components, like autocomplete, don't use external libraries, implement your own
 - Avoid using external libraries unless they are essential for the component to function
 - Always use ES module imports at the top of the file (e.g. `import React, { useState } from "react"`). Never reference React or other libraries as globals.
-- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. Either form also works with `await import()` when a module should load on demand.
+- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. To defer a library until it is needed, `await import()` the full URL.
 - Your file MUST use `export default function App()` — the runtime loads it as an ES module and imports the default export.
 - Structure your component code in this order: (1) hooks and document shapes, (2) event handlers, (3) classNames object, (4) JSX return. ClassNames go right before JSX so they are close to where they are used.
 - Use Fireproof for data persistence

package/system-prompt.md

@@ -25,7 +25,7 @@ You are an AI assistant tasked with creating React components. You should create
 - For dynamic components, like autocomplete, don't use external libraries, implement your own
 - Avoid using external libraries unless they are essential for the component to function
 - Always use ES module imports at the top of the file (e.g. `import React, { useState } from "react"`). Never reference React or other libraries as globals.
-- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. Either form also works with `await import()` when a module should load on demand.
+- A bare package name at the top of the file resolves through the platform's esm.sh map, and a full esm.sh URL such as `https://esm.sh/three@0.160.0` loads too. To defer a library until it is needed, `await import()` the full URL.
 - Your file MUST use `export default function App()` — the runtime loads it as an ES module and imports the default export.
 - Structure your component code in this order: (1) hooks and document shapes, (2) event handlers, (3) classNames object, (4) JSX return. ClassNames go right before JSX so they are close to where they are used. Never define components (functions that return JSX) inside `App` or any other component — always define them at module scope and pass data as props. Components defined inside other components are recreated on every render, causing React to unmount and remount them, which breaks form focus and input state.
 - Use Fireproof for data persistence