vanilla-agent-proxy 0.2.0 → 1.1.0

package/src/flows/shopping-assistant.ts

@@ -0,0 +1,171 @@
+import type { TravrseFlowConfig } from "../index.js";
+
+/**
+ * Shopping assistant flow configuration
+ * This flow returns JSON actions for page interaction including:
+ * - Simple messages
+ * - Navigation with messages
+ * - Element clicks with messages
+ * - Stripe checkout
+ */
+export const SHOPPING_ASSISTANT_FLOW: TravrseFlowConfig = {
+  name: "Shopping Assistant Flow",
+  description: "Returns JSON actions for page interaction",
+  steps: [
+    {
+      id: "action_prompt",
+      name: "Action Prompt",
+      type: "prompt",
+      enabled: true,
+      config: {
+        model: "qwen/qwen3-8b",
+        reasoning: false,
+        responseFormat: "JSON",
+        outputVariable: "prompt_result",
+        userPrompt: "{{user_message}}",
+        systemPrompt: `You are a helpful shopping assistant that can interact with web pages.
+You will receive information about the current page's elements (class names and text content)
+and user messages. You must respond with JSON in one of these formats:
+
+1. Simple message:
+{
+  "action": "message",
+  "text": "Your response text here"
+}
+
+2. Navigate then show message (for navigation to another page):
+{
+  "action": "nav_then_click",
+  "page": "http://site.com/page-url",
+  "on_load_text": "Message to show after navigation"
+}
+
+3. Show message and click an element:
+{
+  "action": "message_and_click",
+  "element": ".className-of-element",
+  "text": "Your message text"
+}
+
+4. Create Stripe checkout:
+{
+  "action": "checkout",
+  "text": "Your message text",
+  "items": [
+    {"name": "Product Name", "price": 2999, "quantity": 1}
+  ]
+}
+
+Guidelines:
+- Use "message" for simple conversational responses
+- Use "nav_then_click" when you need to navigate to a different page (like a product detail page)
+- Use "message_and_click" when you want to click a button or element on the current page
+- Use "checkout" when the user wants to proceed to checkout/payment. Include items array with name (string), price (number in cents), and quantity (number)
+- When selecting elements, use the class names provided in the page context
+- Always respond with valid JSON only, no additional text
+- For product searches, format results as markdown links: [Product Name](url)
+- Be helpful and conversational in your messages
+- Product prices: Black Shirt - Medium: $29.99 (2999 cents), Blue Shirt - Large: $34.99 (3499 cents), Red T-Shirt - Small: $19.99 (1999 cents), Jeans - Medium: $49.99 (4999 cents)
+
+Example conversation flow:
+- User: "I am looking for a black shirt in medium"
+- You: {"action": "message", "text": "Here are the products I found:\\n1. [Black Shirt - Medium](/products.html?product=black-shirt-medium) - $29.99\\n2. [Blue Shirt - Large](/products.html?product=blue-shirt-large) - $34.99\\n3. [Red T-Shirt - Small](/products.html?product=red-tshirt-small) - $19.99\\n4. [Jeans - Medium](/products.html?product=jeans-medium) - $49.99\\n\\nWould you like me to navigate to the first result and add it to your cart?"}
+
+- User: "No, I would like to add another shirt to the cart"
+- You: {"action": "message_and_click", "element": ".AddToCartButton-blue-shirt-large", "text": "I've added the Blue Shirt - Large to your cart. Ready to checkout?"}
+
+- User: "yes"
+- You: {"action": "checkout", "text": "Perfect! I'll set up the checkout for you.", "items": [{"name": "Black Shirt - Medium", "price": 2999, "quantity": 1}]}`,
+        previousMessages: "{{messages}}"
+      }
+    }
+  ]
+};
+
+/**
+ * Metadata-based shopping assistant flow configuration
+ * This flow uses DOM context from record metadata instead of user message.
+ * The metadata should include dom_elements, dom_body, page_url, and page_title.
+ */
+export const SHOPPING_ASSISTANT_METADATA_FLOW: TravrseFlowConfig = {
+  name: "Metadata-Based Shopping Assistant",
+  description: "Uses DOM context from record metadata for page interaction",
+  steps: [
+    {
+      id: "metadata_action_prompt",
+      name: "Metadata Action Prompt",
+      type: "prompt",
+      enabled: true,
+      config: {
+        model: "qwen/qwen3-8b",
+        reasoning: false,
+        responseFormat: "JSON",
+        outputVariable: "prompt_result",
+        userPrompt: "{{user_message}}",
+        systemPrompt: `You are a helpful shopping assistant that can interact with web pages.
+
+IMPORTANT: You have access to the current page's DOM elements through the record metadata, which includes:
+- dom_elements: Array of page elements with className, innerText, and tagName
+- dom_body: Complete HTML body of the page (if provided)
+- page_url: Current page URL
+- page_title: Page title
+
+The dom_elements array provides information about clickable elements and their text content.
+Use this metadata to understand what's available on the page and help users interact with it.
+
+You must respond with JSON in one of these formats:
+
+1. Simple message:
+{
+  "action": "message",
+  "text": "Your response text here"
+}
+
+2. Navigate then show message (for navigation to another page):
+{
+  "action": "nav_then_click",
+  "page": "http://site.com/page-url",
+  "on_load_text": "Message to show after navigation"
+}
+
+3. Show message and click an element:
+{
+  "action": "message_and_click",
+  "element": ".className-of-element",
+  "text": "Your message text"
+}
+
+4. Create Stripe checkout:
+{
+  "action": "checkout",
+  "text": "Your message text",
+  "items": [
+    {"name": "Product Name", "price": 2999, "quantity": 1}
+  ]
+}
+
+Guidelines:
+- Use "message" for simple conversational responses
+- Use "nav_then_click" when you need to navigate to a different page (like a product detail page)
+- Use "message_and_click" when you want to click a button or element on the current page
+- Use "checkout" when the user wants to proceed to checkout/payment. Include items array with name (string), price (number in cents), and quantity (number)
+- When selecting elements, use the class names from the dom_elements in the metadata
+- Always respond with valid JSON only, no additional text
+- For product searches, format results as markdown links: [Product Name](url)
+- Be helpful and conversational in your messages
+- Product prices: Black Shirt - Medium: $29.99 (2999 cents), Blue Shirt - Large: $34.99 (3499 cents), Red T-Shirt - Small: $19.99 (1999 cents), Jeans - Medium: $49.99 (4999 cents)
+
+Example conversation flow:
+- User: "I am looking for a black shirt in medium"
+- You: {"action": "message", "text": "Here are the products I found:\\n1. [Black Shirt - Medium](/products.html?product=black-shirt-medium) - $29.99\\n2. [Blue Shirt - Large](/products.html?product=blue-shirt-large) - $34.99\\n3. [Red T-Shirt - Small](/products.html?product=red-tshirt-small) - $19.99\\n4. [Jeans - Medium](/products.html?product=jeans-medium) - $49.99\\n\\nWould you like me to navigate to the first result and add it to your cart?"}
+
+- User: "No, I would like to add another shirt to the cart"
+- You: {"action": "message_and_click", "element": ".AddToCartButton-blue-shirt-large", "text": "I've added the Blue Shirt - Large to your cart. Ready to checkout?"}
+
+- User: "yes"
+- You: {"action": "checkout", "text": "Perfect! I'll set up the checkout for you.", "items": [{"name": "Black Shirt - Medium", "price": 2999, "quantity": 1}]}`,
+        previousMessages: "{{messages}}"
+      }
+    }
+  ]
+};

package/src/index.ts

@@ -102,6 +102,7 @@ export const createChatProxyApp = (options: ChatProxyOptions = {}) => {
     let clientPayload: {
       messages?: Array<{ role: string; content: string; createdAt?: string }>;
       flowId?: string;
+      metadata?: Record<string, unknown>;
     };
     try {
       clientPayload = await c.req.json();
@@ -133,7 +134,7 @@ export const createChatProxyApp = (options: ChatProxyOptions = {}) => {
       record: {
         name: "Streaming Chat Widget",
         type: "standalone",
-        metadata: {}
+        metadata: clientPayload.metadata || {}
       },
       messages: formattedMessages,
       options: {
@@ -147,31 +148,7 @@ export const createChatProxyApp = (options: ChatProxyOptions = {}) => {
     // Use flow ID if provided, otherwise use flow config
     if (flowId) {
       travrsePayload.flow = {
-        "name": "Chat with 8b",
-        "description": "Flow with 1 step",
-        "steps": [
-          {
-            "id": "step_01k8wnwpdcferbrq79tzj49aec",
-            "name": "Prompt 1",
-            "type": "prompt",
-            "order": 0,
-            "enabled": true,
-            "config": {
-              "text": "{{user_message}}",
-              "model": "qwen/qwen3-8b",
-              // "tools": {
-              //   "tool_ids": [
-              //     "tool_01k8ky2xpjfzybye5ywcmjr379",
-              //     "builtin:firecrawl"
-              //   ]
-              // },
-              "reasoning": false,
-              "user_prompt": "{{user_message}}",
-              "output_variable": "prompt_result",
-              "response_format": "JSON"
-            }
-          }
-        ]
+        id: flowId
       }
     } else {
       travrsePayload.flow = flowConfig;
@@ -230,6 +207,11 @@ export const createChatProxyApp = (options: ChatProxyOptions = {}) => {
 export const createVercelHandler = (options?: ChatProxyOptions) =>
   handle(createChatProxyApp(options));
 
+// Export pre-configured flows
+export * from "./flows/index.js";
+
+// Export utility functions
+export * from "./utils/index.js";
 
 export default createChatProxyApp;
 

package/src/utils/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Utility functions for proxy implementations
+ */
+
+export {
+  createCheckoutSession,
+  type CheckoutItem,
+  type CreateCheckoutSessionOptions,
+  type CheckoutSessionResponse
+} from "./stripe.js";

package/src/utils/stripe.ts

@@ -0,0 +1,115 @@
+/**
+ * Stripe checkout helpers using the REST API
+ * This approach works on all platforms including Cloudflare Workers, Vercel Edge, etc.
+ */
+
+export interface CheckoutItem {
+  name: string;
+  price: number; // Price in cents
+  quantity: number;
+}
+
+export interface CreateCheckoutSessionOptions {
+  secretKey: string;
+  items: CheckoutItem[];
+  successUrl: string;
+  cancelUrl: string;
+}
+
+export interface CheckoutSessionResponse {
+  success: boolean;
+  checkoutUrl?: string;
+  sessionId?: string;
+  error?: string;
+}
+
+/**
+ * Creates a Stripe checkout session using the REST API
+ * @param options - Checkout session configuration
+ * @returns Checkout session response with URL and session ID
+ */
+export async function createCheckoutSession(
+  options: CreateCheckoutSessionOptions
+): Promise<CheckoutSessionResponse> {
+  const { secretKey, items, successUrl, cancelUrl } = options;
+
+  try {
+    // Validate items
+    if (!items || !Array.isArray(items) || items.length === 0) {
+      return {
+        success: false,
+        error: "Items array is required"
+      };
+    }
+
+    for (const item of items) {
+      if (!item.name || typeof item.price !== "number" || typeof item.quantity !== "number") {
+        return {
+          success: false,
+          error: "Each item must have name (string), price (number in cents), and quantity (number)"
+        };
+      }
+    }
+
+    // Build line items for URL encoding
+    const lineItems = items.map((item) => ({
+      price_data: {
+        currency: "usd",
+        product_data: {
+          name: item.name,
+        },
+        unit_amount: item.price,
+      },
+      quantity: item.quantity,
+    }));
+
+    // Convert line items to URL-encoded format
+    const params = new URLSearchParams({
+      "payment_method_types[0]": "card",
+      "mode": "payment",
+      "success_url": successUrl,
+      "cancel_url": cancelUrl,
+    });
+
+    // Add line items to params
+    lineItems.forEach((item, index) => {
+      params.append(`line_items[${index}][price_data][currency]`, item.price_data.currency);
+      params.append(`line_items[${index}][price_data][product_data][name]`, item.price_data.product_data.name);
+      params.append(`line_items[${index}][price_data][unit_amount]`, item.price_data.unit_amount.toString());
+      params.append(`line_items[${index}][quantity]`, item.quantity.toString());
+    });
+
+    // Create Stripe checkout session using REST API
+    const stripeResponse = await fetch("https://api.stripe.com/v1/checkout/sessions", {
+      method: "POST",
+      headers: {
+        "Authorization": `Bearer ${secretKey}`,
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: params,
+    });
+
+    if (!stripeResponse.ok) {
+      const errorData = await stripeResponse.text();
+      console.error("Stripe API error:", errorData);
+      return {
+        success: false,
+        error: "Failed to create checkout session"
+      };
+    }
+
+    const session = await stripeResponse.json() as { url: string; id: string };
+
+    return {
+      success: true,
+      checkoutUrl: session.url,
+      sessionId: session.id,
+    };
+  } catch (error) {
+    console.error("Stripe checkout error:", error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Failed to create checkout session"
+    };
+  }
+}