@web-applets/sdk 0.1.0 → 0.1.1

package/README.md

@@ -2,34 +2,24 @@
 
 > An open spec & SDK for creating apps that agents can use.
 
-🔗 [Applets Repo](https://github.com/unternet-co/community-applets) | 🔗 [Mailing List](https://groups.google.com/a/unternet.co/g/community) | 🔗 [Applets Chat Demo](https://github.com/unternet-co/applets-chat)
+💌 [Mailing List](https://groups.google.com/a/unternet.co/g/community)
 
 ## What is it?
 
-Web Applets is an open specification for building software that both humans and AI can understand and use together. Instead of forcing AI to operate traditional point-and-click apps built for humans, Web Applets creates a new kind of software designed for human-AI collaboration. Think of them a bit like artifacts, but they do stuff!
+**Web Applets is an open specification for building software that both humans and AI can understand and use together.** Instead of forcing AI to operate traditional point-and-click apps built for humans, Web Applets creates a new kind of software designed for human-AI collaboration.
 
-![Demo of a web applets chatbot](./docs/assets/applets-chat-demo.gif)
-
-Web Applets are modular pieces of web software that:
-
-- **Can be used directly by humans with rich, graphical interfaces**
-- **Can be understood and operated by AI through a clear protocol**
-- **Run locally in your environment, not on distant servers**
-- **Share context and state with their environment**
-- **Can be freely combined and composed**
+Think of them a bit like Claude artifacts, but they _do stuff_ & _work anywhere_!
 
-Think of any web software you use today - maps, documents, shopping, calendars - and imagine if instead of visiting these as separate websites, you could pull them into your own environment where both you and AI could use them together seamlessly.
+![Demo of a web applets chatbot](./docs/assets/applets-chat-demo.gif)
 
-## Key Features
+Think of any web software you use today - maps, documents, shopping, calendars - and imagine if instead of visiting these as separate websites, you could pull them into your own environment where both you and AI could use them together seamlessly. Web applets can do that!
 
-- **Built on Web Standards:** Create applets using familiar web technologies (HTML, CSS, JavaScript)
+- **Built on Web Standards:** Create applets using familiar web technologies (HTML, CSS, JavaScript, React, Vue, etc.)
 - **AI-Native Protocol:** Applets expose their state and actions in a way AI can understand and use
 - **Rich Interfaces:** Full support for complex graphical UIs, not just text
 - **Local-First:** Runs in your environment, keeping your data under your control
 - **Composable:** Applets can work together, sharing context and state
-- **Open Standard:** Designed for interoperability, not platform lock-in
-
-Web Applets aims to do for AI-enabled software what the web did for documents - create an open platform where anyone can build, share, and connect applications. We believe the future of software should be built on open collaboration, not tight integration with closed platforms.
+- **Open Standard:** Designed for interoperability across clients, not platform lock-in
 
 ## Example
 
@@ -75,6 +65,17 @@ context.ondata = () => {
 
 Done! If you load this up in the inspector and introduce yourself, it will respond by greeting you.
 
+To use this applet, we need to load it in our host web app using the SDK. Assuming the applet lives in our public directory, here's what that might look like:
+
+```js
+const applet = await applets.load('/helloworld.applet');
+applet.onstateupdated = (state) => console.log(state);
+applet.dispatchAction('set_name', { name: 'Web Applets' });
+// { name: 'Web Applets' }
+```
+
+For a live example you can download and play with now, check out the [applets chat demo](https://github.com/unternet-co/applets-chat).
+
 ## Getting started
 
 Create a new web app with the applets SDK installed. You can do this quickly using our CLI:
@@ -93,7 +94,7 @@ Inside the generated folder, you'll find a basic web app setup:
 
 Now if you run `npx @web-applets/inspector`, you should be able to test out your new applet directly. This applet will now work in any environment where the SDK is installed.
 
-![A screenshot showing the 'playground' editing UI, with a web applets showing 'Hello, Web Applets'](docs/assets/web-applets-playground.png)
+![A screenshot showing the 'playground' editing UI, with a web applets showing 'Hello, Web Applets'](docs/assets/web-applets-inspector.png)
 
 ## Integrating Web Applets into your client
 
@@ -136,7 +137,7 @@ applet.data = { name: 'Ada Lovelace' };
 
 This is a community project, and we're open to community members discussing the project direction, and submitting code!
 
-To join the conversation, visit the Applets mailing list at [groups.google.com/a/unternet.co/g/community](https://groups.google.com/a/unternet.co/g/community). You can also find more about the company that's kicking off this work at [unternet.co](https://unternet.co)
+To join the conversation, visit the Applets mailing list [here](https://groups.google.com/a/unternet.co/g/community). You can also find more about the company that's kicking off this work at [unternet.co](https://unternet.co)
 
 ## License
 

package/dist/core/applet.d.ts

@@ -1,4 +1,4 @@
-import { AppletAction, AppletMessage, ActionParams, AppletManifest, AppletDataEvent, AppletResizeEvent, AppletActionsEvent, AppletMessageRelay, AppletReadyEvent } from './shared';
+import { AppletAction, ActionParams, AppletManifest, AppletDataEvent, AppletResizeEvent, AppletActionsEvent, AppletMessageRelay, AppletReadyEvent } from './shared';
 export declare function load(url: string, container?: HTMLIFrameElement): Promise<Applet>;
 export interface AppletOptions {
     manifest: AppletManifest;
@@ -10,7 +10,7 @@ export declare class Applet<T = any> extends EventTarget {
     actions: AppletAction[];
     container: HTMLIFrameElement;
     constructor(manifest: AppletManifest, targetWindow: Window);
-    dispatchAction(actionId: string, params?: ActionParams): Promise<AppletMessage>;
+    dispatchAction(actionId: string, params?: ActionParams): Promise<import("./shared").AppletMessage>;
     get data(): T;
     set data(data: T);
     get manifest(): AppletManifest;

package/dist/core/shared.d.ts

@@ -91,7 +91,7 @@ export declare class AppletActionMessage extends AppletMessage {
 export declare class AppletInitMessage extends AppletMessage {
     constructor();
 }
-export type AppletMessageType = 'action' | 'actions' | 'data' | 'init' | 'ready' | 'resolve' | 'resize';
+export type AppletMessageType = 'action' | 'actions' | 'data' | 'init' | 'ready' | 'style' | 'resolve' | 'resize';
 export type AppletMessageCallback = (message: AppletMessage) => Promise<void> | void;
 export declare class AppletDataEvent extends Event {
     data: any;

package/dist/core/shared.js

@@ -9,7 +9,8 @@ export async function loadManifest(pageUrl) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(html, 'text/html');
         const linkElem = doc.querySelector('link[rel="manifest"]');
-        const manifestUrl = parseUrl(linkElem.href);
+        const href = linkElem.getAttribute('href');
+        const manifestUrl = parseUrl(href, pageUrl);
         const manifestRequest = await fetch(manifestUrl);
         manifest = await manifestRequest.json();
         // TODO: Add verification this is a valid manifest

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-applets/sdk",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "The Web Applets SDK, for creating & hosting Web Applets.",
   "author": "Rupert Manfredi <rupert@unternet.co>",
   "license": "MIT",