@lab2view/vue-email-editor 0.2.1 → 0.2.3

package/README.md

@@ -1,8 +1,4 @@
-<p align="center">
-  <img src="src/assets/logo.png" alt="@lab2view/vue-email-editor" width="200" />
-</p>
-
-<h1 align="center">@lab2view/vue-email-editor</h1>
+# Vue Email Editor
 
 <p align="center">
   <a href="https://www.npmjs.com/package/@lab2view/vue-email-editor"><img src="https://img.shields.io/npm/v/@lab2view/vue-email-editor.svg?style=flat-square" alt="npm version" /></a>
@@ -14,11 +10,15 @@
 </p>
 
 <p align="center">
-  A professional, extensible drag-and-drop email editor with <strong>AI-assisted editing</strong>, built with <strong>Vue 3</strong> and <strong>MJML</strong>.<br/>
+  A professional, extensible <strong>drag-and-drop</strong> email editor with <strong>AI-assisted editing</strong>, built with <strong>Vue 3</strong> and <strong>MJML</strong>.<br/>
   Design responsive HTML emails visually or let AI generate complete templates from a text description. 43 pre-built blocks, a plugin system, full i18n support, and a complete imperative API.<br/>
   <strong>Free and open-source alternative to Unlayer, Beefree, and Stripo.</strong>
 </p>
 
+<p align="center">
+  <a href="https://lab2view.github.io/vue-email-editor/#templates"><strong>Try the editor live &rarr;</strong></a>
+</p>
+
 ## Screenshots
 
 | Blocks & Layout | Ready-made Templates |
@@ -454,62 +454,47 @@ Insert dynamic content with merge tag variables:
 
 ## AI Template Generation
 
-Generate complete email templates from natural language prompts. The AI chat panel supports multi-turn conversations — describe your email, preview the result, then refine it through follow-up messages before applying.
+Generate complete email templates from natural language. Plug in any LLM — OpenAI, Anthropic, Google Gemini, or your own.
 
 ```vue
-<EmailEditor
-  :ai-provider="{
-    // Full template generation via chat (enables the AI sidebar tab)
-    generateTemplate: async (messages, systemPrompt) => {
-      const response = await fetch('/api/ai/chat', {
-        method: 'POST',
-        body: JSON.stringify({
-          messages: [
-            { role: 'system', content: systemPrompt },
-            ...messages,
-          ],
-        }),
-      })
-      return (await response.json()).content
-    },
-
-    // Optional: streaming for real-time generation feedback
-    async *generateTemplateStream(messages, systemPrompt) {
-      const response = await fetch('/api/ai/chat/stream', {
-        method: 'POST',
-        body: JSON.stringify({
-          messages: [{ role: 'system', content: systemPrompt }, ...messages],
-          stream: true,
-        }),
-      })
-      const reader = response.body.getReader()
-      const decoder = new TextDecoder()
-      while (true) {
-        const { done, value } = await reader.read()
-        if (done) break
-        yield decoder.decode(value)
-      }
-    },
-
-    // Inline text generation (generate, improve, shorten, expand, translate)
-    generateText: async (prompt, context) => {
-      const res = await fetch('/api/ai/generate', {
-        method: 'POST',
-        body: JSON.stringify({ prompt, context }),
-      })
-      return (await res.json()).text
-    },
-    improveText: async (text, instruction) => {
-      const res = await fetch('/api/ai/improve', {
-        method: 'POST',
-        body: JSON.stringify({ text, instruction }),
-      })
-      return (await res.json()).text
-    },
-  }"
-/>
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EmailEditor } from '@lab2view/vue-email-editor'
+import type { AiProvider } from '@lab2view/vue-email-editor'
+
+const mjml = ref('')
+
+const aiProvider: AiProvider = {
+  generateText: async (prompt, context) => {
+    const res = await fetch('/api/ai/text', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prompt, context }),
+    })
+    return (await res.json()).text
+  },
+  generateTemplate: async (messages, systemPrompt) => {
+    const res = await fetch('/api/ai/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ messages, systemPrompt }),
+    })
+    return (await res.json()).content
+  },
+}
+</script>
+
+<template>
+  <EmailEditor v-model="mjml" :ai-provider="aiProvider" />
+</template>
 ```
 
+Your backend just forwards to any LLM and returns the raw response. The editor handles JSON parsing, repair, and retry automatically.
+
+**Want to test without an API key?** Use the [mock provider](https://lab2view.github.io/vue-email-editor/guide/ai#mock-provider-for-testing) — a static `AiProvider` that returns dummy responses for development and testing.
+
+**[Full AI integration guide →](https://lab2view.github.io/vue-email-editor/guide/ai)** — complete backend examples for OpenAI, Anthropic, and Google Gemini, streaming setup, error handling, and more.
+
 ## ESP Export
 
 Export HTML pre-formatted for your email service provider:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lab2view/vue-email-editor",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Vue 3 drag-and-drop email editor with AI-assisted editing, built on MJML",
   "license": "MIT",
   "type": "module",