@camelai/run-vue 0.0.0 → 0.11.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 qaml-ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,31 @@
 # @camelai/run-vue
 
-Placeholder. The first release is 0.11.0, from https://github.com/qaml-ai/run.
+Vue 3 bindings for a chat with an agent on camelRun, through your server's route
+(`createAgentHandler` from `@camelai/run/server`; see the Frontend guide).
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { useAgentChat } from "@camelai/run-vue";
+
+const { messages, status, send, stop } = useAgentChat({ endpoint: "/api/agent" });
+const text = ref("");
+</script>
+
+<template>
+  <div v-for="message in messages" :key="message.id">
+    <p v-if="message.role === 'user'">{{ message.text }}</p>
+    <template v-else v-for="part in message.parts" :key="part.id">
+      <p v-if="part.type === 'text'">{{ part.text }}</p>
+      <small v-else-if="part.type === 'tool'">{{ part.name }}: {{ part.state }}</small>
+    </template>
+  </div>
+  <form @submit.prevent="send(text); text = ''"><input v-model="text" /><button>Send</button></form>
+  <button v-if="status === 'streaming'" @click="stop()">Stop</button>
+</template>
+```
+
+`useAgentChat(options | chat)` returns refs (`messages`, `status`, `inputs`, `error`, `hasOlder`,
+`snapshot`) and actions (`send`, `answer`, `decline`, `stop`, `retry`, `loadOlder`, `fileUrl`); the chat
+is connected until the component unmounts. `provideAgentChat` / `useAgent` share one chat with
+descendants. Render markdown with `parseMarkdown` from `@camelai/run/markdown`.

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Vue bindings for an agent chat: `useAgentChat` in a component's setup gives reactive refs over the
+ * chat with the user's agent (connected while the component lives) and its actions; `provideAgentChat`
+ * and `useAgent` share one chat with descendants.
+ *
+ *   const { messages, status, send, stop } = useAgentChat({ endpoint: "/api/agent" });
+ */
+import { type Ref } from "vue";
+import { type AgentChat, type AgentChatOptions, type ChatSnapshot } from "@camelai/run/chat";
+export type * from "@camelai/run/chat";
+export { answerValue, createAgentChat } from "@camelai/run/chat";
+export interface UseAgentChat {
+    chat: AgentChat;
+    snapshot: Readonly<Ref<ChatSnapshot>>;
+    messages: Readonly<Ref<ChatSnapshot["messages"]>>;
+    status: Readonly<Ref<ChatSnapshot["status"]>>;
+    inputs: Readonly<Ref<ChatSnapshot["inputs"]>>;
+    error: Readonly<Ref<ChatSnapshot["error"]>>;
+    hasOlder: Readonly<Ref<boolean>>;
+    send: AgentChat["send"];
+    answer: AgentChat["answer"];
+    decline: AgentChat["decline"];
+    stop: AgentChat["stop"];
+    retry: AgentChat["retry"];
+    loadOlder: AgentChat["loadOlder"];
+    fileUrl: AgentChat["fileUrl"];
+}
+/**
+ * Refs over a chat: `options` makes one, or pass a chat you made. One it makes connects once the
+ * component is mounted (never while rendering on the server, as in Nuxt) and is destroyed with it (or
+ * with the effect scope). Each ref changes only when its part of the snapshot does.
+ */
+export declare function useAgentChat(options: Omit<AgentChatOptions, "autoConnect"> | AgentChat): UseAgentChat;
+/** Make a chat for this component and its descendants (`useAgent()` reads it). */
+export declare function provideAgentChat(options: Omit<AgentChatOptions, "autoConnect"> | AgentChat): UseAgentChat;
+/** The chat an ancestor provided. */
+export declare function useAgent(): UseAgentChat;

package/dist/index.js

@@ -0,0 +1,62 @@
+/**
+ * Vue bindings for an agent chat: `useAgentChat` in a component's setup gives reactive refs over the
+ * chat with the user's agent (connected while the component lives) and its actions; `provideAgentChat`
+ * and `useAgent` share one chat with descendants.
+ *
+ *   const { messages, status, send, stop } = useAgentChat({ endpoint: "/api/agent" });
+ */
+import { getCurrentInstance, getCurrentScope, inject, onMounted, onScopeDispose, provide, readonly, shallowRef } from "vue";
+import { createAgentChat } from "@camelai/run/chat";
+export { answerValue, createAgentChat } from "@camelai/run/chat";
+/**
+ * Refs over a chat: `options` makes one, or pass a chat you made. One it makes connects once the
+ * component is mounted (never while rendering on the server, as in Nuxt) and is destroyed with it (or
+ * with the effect scope). Each ref changes only when its part of the snapshot does.
+ */
+export function useAgentChat(options) {
+    const own = !("getSnapshot" in options);
+    const chat = own ? createAgentChat({ ...options, autoConnect: false }) : options;
+    const snapshot = shallowRef(chat.getSnapshot());
+    const messages = shallowRef(snapshot.value.messages), status = shallowRef(snapshot.value.status), inputs = shallowRef(snapshot.value.inputs);
+    const error = shallowRef(snapshot.value.error), hasOlder = shallowRef(snapshot.value.hasOlder);
+    const unsubscribe = chat.subscribe(() => {
+        const next = chat.getSnapshot();
+        snapshot.value = next;
+        // shallowRef only triggers on a new value: unchanged parts keep their identity, so nothing re-renders for them.
+        messages.value = next.messages;
+        status.value = next.status;
+        inputs.value = next.inputs;
+        error.value = next.error;
+        hasOlder.value = next.hasOlder;
+    });
+    if (own) {
+        // In a component: once mounted, which only happens in a browser. Elsewhere: at once, in a browser only.
+        if (getCurrentInstance())
+            onMounted(() => chat.connect());
+        else if (typeof window !== "undefined")
+            chat.connect();
+    }
+    if (getCurrentScope())
+        onScopeDispose(() => { unsubscribe(); if (own)
+            chat.destroy(); });
+    return {
+        chat, snapshot: readonly(snapshot),
+        messages: readonly(messages), status: readonly(status), inputs: readonly(inputs),
+        error: readonly(error), hasOlder: readonly(hasOlder),
+        send: chat.send, answer: chat.answer, decline: chat.decline, stop: chat.stop, retry: chat.retry, loadOlder: chat.loadOlder, fileUrl: chat.fileUrl,
+    };
+}
+const KEY = Symbol("agent-chat");
+/** Make a chat for this component and its descendants (`useAgent()` reads it). */
+export function provideAgentChat(options) {
+    const value = useAgentChat(options);
+    provide(KEY, value);
+    return value;
+}
+/** The chat an ancestor provided. */
+export function useAgent() {
+    const value = inject(KEY, null);
+    if (!value)
+        throw new Error("useAgent needs an ancestor that called provideAgentChat");
+    return value;
+}

package/package.json

@@ -1 +1,39 @@
-{ "name": "@camelai/run-vue", "version": "0.0.0", "description": "Placeholder: the first release (0.11.0) comes from github.com/qaml-ai/run.", "license": "MIT", "publishConfig": { "access": "public" } }
+{
+  "name": "@camelai/run-vue",
+  "version": "0.11.1",
+  "description": "Vue bindings for chatting with agents on camelRun.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qaml-ai/run.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://run.camelai.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@camelai/run": "0.11.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  }
+}