@gui-chat-plugin/generate-html 0.1.0

package/README.md

@@ -0,0 +1,71 @@
+# @gui-chat-plugin/generate-html
+
+[![npm version](https://badge.fury.io/js/%40gui-chat-plugin%2Fgenerate-html.svg)](https://www.npmjs.com/package/@gui-chat-plugin/generate-html)
+
+A generate HTML plugin for [MulmoChat](https://github.com/receptron/MulmoChat).
+
+## Overview
+
+This plugin generates complete, standalone HTML pages by sending a detailed prompt to an LLM (Claude or Gemini). The generated HTML is self-contained with all styles and scripts inline.
+
+## Installation
+
+```bash
+yarn add @gui-chat-plugin/generate-html
+```
+
+## Usage
+
+### Vue Implementation (for MulmoChat)
+
+```typescript
+// In src/tools/index.ts
+import GenerateHtmlPlugin from "@gui-chat-plugin/generate-html/vue";
+
+const pluginList = [
+  // ... other plugins
+  GenerateHtmlPlugin,
+];
+
+// In src/main.ts
+import "@gui-chat-plugin/generate-html/style.css";
+```
+
+### Core Only (Framework-agnostic)
+
+```typescript
+import { pluginCore, TOOL_NAME } from "@gui-chat-plugin/generate-html";
+```
+
+## Package Exports
+
+| Export | Description |
+|--------|-------------|
+| `@gui-chat-plugin/generate-html` | Core (framework-agnostic) |
+| `@gui-chat-plugin/generate-html/vue` | Vue implementation |
+| `@gui-chat-plugin/generate-html/style.css` | Tailwind CSS styles |
+
+## Requirements
+
+This plugin requires an Anthropic API key or Google API key configured in MulmoChat.
+
+## Test Prompts
+
+1. "Create an HTML page with a login form"
+2. "Generate a landing page for a coffee shop"
+3. "Make an interactive calculator in HTML"
+4. "Create a portfolio page with a dark theme"
+
+## Development
+
+```bash
+yarn install
+yarn dev        # Start dev server
+yarn build      # Build
+yarn typecheck  # Type check
+yarn lint       # Lint
+```
+
+## License
+
+MIT

package/dist/core/definition.d.ts

@@ -0,0 +1,20 @@
+/**
+ * GenerateHtml Plugin Tool Definition
+ */
+export declare const TOOL_NAME = "generateHtml";
+export declare const TOOL_DEFINITION: {
+    type: "function";
+    name: string;
+    description: string;
+    parameters: {
+        type: "object";
+        properties: {
+            prompt: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+export declare const SYSTEM_PROMPT = "";

package/dist/core/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * GenerateHtml Plugin - Core (Framework-agnostic)
+ */
+export type { GenerateHtmlArgs, HtmlToolData, HtmlLibraryType } from "./types";
+export { HTML_LIBRARIES, LIBRARY_DESCRIPTIONS } from "./types";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
+export { executeGenerateHtml, pluginCore } from "./plugin";

package/dist/core/plugin.d.ts

@@ -0,0 +1,11 @@
+/**
+ * GenerateHtml Plugin Core (Framework-agnostic)
+ */
+import type { ToolPluginCore, ToolContext, ToolResult } from "gui-chat-protocol";
+import type { GenerateHtmlArgs, HtmlToolData } from "./types";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT } from "./definition";
+/**
+ * Execute the generateHtml function
+ */
+export declare const executeGenerateHtml: (context: ToolContext, args: GenerateHtmlArgs) => Promise<ToolResult<HtmlToolData>>;
+export declare const pluginCore: ToolPluginCore<HtmlToolData, unknown, GenerateHtmlArgs>;

package/dist/core/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * GenerateHtml Plugin Types
+ */
+export declare const HTML_LIBRARIES: readonly ["tailwind", "d3.js", "three.js", "p5.js", "mermaid"];
+export type HtmlLibraryType = (typeof HTML_LIBRARIES)[number];
+export declare const LIBRARY_DESCRIPTIONS: Record<HtmlLibraryType, string>;
+export interface HtmlToolData {
+    html: string;
+    type: HtmlLibraryType;
+}
+export interface GenerateHtmlArgs {
+    prompt: string;
+}

package/dist/core.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=["tailwind","d3.js","three.js","p5.js","mermaid"],d={tailwind:"Tailwind CSS for utility-first styling","d3.js":"D3.js for data-driven visualizations and interactive charts","three.js":"Three.js for 3D graphics and WebGL rendering","p5.js":"p5.js for creative coding, animations, and generative art",mermaid:"Mermaid for diagrams and flowcharts from text definitions"},a="generateHtml",i={type:"function",name:a,description:"Generate a complete, standalone HTML page by sending a detailed prompt to another LLM (Claude). This tool uses AI to write HTML, CSS, and JavaScript based on your description. The generated HTML will be self-contained with all styles and scripts inline, requiring no external dependencies.",parameters:{type:"object",properties:{prompt:{type:"string",description:"Detailed description of the desired HTML page. Be specific about layout, styling, interactivity, colors, animations, and functionality. The more detailed your prompt, the better the generated HTML will match your requirements. This prompt will be sent to another AI model (Claude) that specializes in HTML generation."}},required:["prompt"]}},r="",o=async(t,s)=>{const{prompt:n}=s;if(!t.app?.generateHtml)return{message:"generateHtml function not available",instructions:"Acknowledge that the HTML generation failed."};try{const e=await t.app.generateHtml({prompt:n});return e.success&&e.html?{data:{html:e.html,type:"tailwind"},title:n.slice(0,50),message:"HTML generation succeeded",instructions:"Acknowledge that the HTML was generated and has been already presented to the user."}:(console.error(`ERR:1
+ no HTML data`,e),{message:e.error||"HTML generation failed",instructions:"Acknowledge that the HTML generation failed."})}catch(e){return console.error(`ERR: exception
+ HTML generation failed`,e),{message:"HTML generation failed",jsonData:e,instructions:"Acknowledge that the HTML generation failed."}}},c={toolDefinition:i,execute:o,generatingMessage:"Generating HTML...",isEnabled:t=>!!t?.hasAnthropicApiKey||!!t?.hasGoogleApiKey,systemPrompt:r,backends:["textLLM"]};exports.HTML_LIBRARIES=l;exports.LIBRARY_DESCRIPTIONS=d;exports.SYSTEM_PROMPT=r;exports.TOOL_DEFINITION=i;exports.TOOL_NAME=a;exports.executeGenerateHtml=o;exports.pluginCore=c;

package/dist/core.js

@@ -0,0 +1,73 @@
+const d = [
+  "tailwind",
+  "d3.js",
+  "three.js",
+  "p5.js",
+  "mermaid"
+], l = {
+  tailwind: "Tailwind CSS for utility-first styling",
+  "d3.js": "D3.js for data-driven visualizations and interactive charts",
+  "three.js": "Three.js for 3D graphics and WebGL rendering",
+  "p5.js": "p5.js for creative coding, animations, and generative art",
+  mermaid: "Mermaid for diagrams and flowcharts from text definitions"
+}, i = "generateHtml", r = {
+  type: "function",
+  name: i,
+  description: "Generate a complete, standalone HTML page by sending a detailed prompt to another LLM (Claude). This tool uses AI to write HTML, CSS, and JavaScript based on your description. The generated HTML will be self-contained with all styles and scripts inline, requiring no external dependencies.",
+  parameters: {
+    type: "object",
+    properties: {
+      prompt: {
+        type: "string",
+        description: "Detailed description of the desired HTML page. Be specific about layout, styling, interactivity, colors, animations, and functionality. The more detailed your prompt, the better the generated HTML will match your requirements. This prompt will be sent to another AI model (Claude) that specializes in HTML generation."
+      }
+    },
+    required: ["prompt"]
+  }
+}, o = "", s = async (t, a) => {
+  const { prompt: n } = a;
+  if (!t.app?.generateHtml)
+    return {
+      message: "generateHtml function not available",
+      instructions: "Acknowledge that the HTML generation failed."
+    };
+  try {
+    const e = await t.app.generateHtml({ prompt: n });
+    return e.success && e.html ? {
+      data: {
+        html: e.html,
+        type: "tailwind"
+      },
+      title: n.slice(0, 50),
+      message: "HTML generation succeeded",
+      instructions: "Acknowledge that the HTML was generated and has been already presented to the user."
+    } : (console.error(`ERR:1
+ no HTML data`, e), {
+      message: e.error || "HTML generation failed",
+      instructions: "Acknowledge that the HTML generation failed."
+    });
+  } catch (e) {
+    return console.error(`ERR: exception
+ HTML generation failed`, e), {
+      message: "HTML generation failed",
+      jsonData: e,
+      instructions: "Acknowledge that the HTML generation failed."
+    };
+  }
+}, c = {
+  toolDefinition: r,
+  execute: s,
+  generatingMessage: "Generating HTML...",
+  isEnabled: (t) => !!t?.hasAnthropicApiKey || !!t?.hasGoogleApiKey,
+  systemPrompt: o,
+  backends: ["textLLM"]
+};
+export {
+  d as HTML_LIBRARIES,
+  l as LIBRARY_DESCRIPTIONS,
+  o as SYSTEM_PROMPT,
+  r as TOOL_DEFINITION,
+  i as TOOL_NAME,
+  s as executeGenerateHtml,
+  c as pluginCore
+};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./core.cjs");exports.HTML_LIBRARIES=e.HTML_LIBRARIES;exports.LIBRARY_DESCRIPTIONS=e.LIBRARY_DESCRIPTIONS;exports.SYSTEM_PROMPT=e.SYSTEM_PROMPT;exports.TOOL_DEFINITION=e.TOOL_DEFINITION;exports.TOOL_NAME=e.TOOL_NAME;exports.executeGenerateHtml=e.executeGenerateHtml;exports.pluginCore=e.pluginCore;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * GenerateHtml Plugin
+ *
+ * Main entry point - re-exports core module.
+ */
+export * from "./core";

package/dist/index.js

@@ -0,0 +1,10 @@
+import { HTML_LIBRARIES as O, LIBRARY_DESCRIPTIONS as T, SYSTEM_PROMPT as R, TOOL_DEFINITION as E, TOOL_NAME as L, executeGenerateHtml as S, pluginCore as _ } from "./core.js";
+export {
+  O as HTML_LIBRARIES,
+  T as LIBRARY_DESCRIPTIONS,
+  R as SYSTEM_PROMPT,
+  E as TOOL_DEFINITION,
+  L as TOOL_NAME,
+  S as executeGenerateHtml,
+  _ as pluginCore
+};

package/dist/style.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-50:oklch(97% .014 254.604);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-900:oklch(37.9% .146 265.522);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.mt-1{margin-top:calc(var(--spacing)*1)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.contents{display:contents}.flex{display:flex}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-white{background-color:var(--color-white)}.p-4{padding:calc(var(--spacing)*4)}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-600{color:var(--color-blue-600)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-white{color:var(--color-white)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}}@media(prefers-color-scheme:dark){.dark\:bg-blue-900{background-color:var(--color-blue-900)}.dark\:bg-gray-800{background-color:var(--color-gray-800)}.dark\:bg-gray-900{background-color:var(--color-gray-900)}.dark\:text-blue-300{color:var(--color-blue-300)}.dark\:text-gray-200{color:var(--color-gray-200)}.dark\:text-gray-400{color:var(--color-gray-400)}.dark\:text-white{color:var(--color-white)}}}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/dist/vue/Preview.vue.d.ts

@@ -0,0 +1,8 @@
+import type { ToolResult } from "gui-chat-protocol/vue";
+import type { HtmlToolData } from "../core/types";
+type __VLS_Props = {
+    result: ToolResult<HtmlToolData>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/vue/View.vue.d.ts

@@ -0,0 +1,8 @@
+import type { ToolResult } from "gui-chat-protocol/vue";
+import type { HtmlToolData } from "../core/types";
+type __VLS_Props = {
+    selectedResult: ToolResult<HtmlToolData>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/vue/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * GenerateHtml Plugin - Vue Implementation
+ */
+import "../style.css";
+import type { ToolPlugin } from "gui-chat-protocol/vue";
+import type { GenerateHtmlArgs, HtmlToolData } from "../core/types";
+import View from "./View.vue";
+import Preview from "./Preview.vue";
+export declare const plugin: ToolPlugin<HtmlToolData, unknown, GenerateHtmlArgs>;
+export type { GenerateHtmlArgs, HtmlToolData, HtmlLibraryType } from "../core/types";
+export { HTML_LIBRARIES, LIBRARY_DESCRIPTIONS } from "../core/types";
+export { TOOL_NAME, TOOL_DEFINITION, SYSTEM_PROMPT, executeGenerateHtml, pluginCore, } from "../core/plugin";
+export { View, Preview };
+declare const _default: {
+    plugin: ToolPlugin<HtmlToolData, unknown, GenerateHtmlArgs, import("gui-chat-protocol/vue").InputHandler, Record<string, unknown>>;
+};
+export default _default;

package/dist/vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./core.cjs"),e=require("vue"),b={class:"w-full h-full overflow-hidden bg-white flex flex-col"},_={key:0,class:"flex-1 flex items-center justify-center"},g={class:"flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50"},x={class:"text-xl font-semibold text-gray-800"},f=["srcdoc"],d=e.defineComponent({__name:"View",props:{selectedResult:{}},setup(s){const o=s,a=()=>{console.log("HTML iframe loaded successfully")},i=()=>{const n=o.selectedResult.data?.html;if(!n)return;const t=new Blob([n],{type:"text/html"}),r=URL.createObjectURL(t),c=document.createElement("a");c.href=r;const p=o.selectedResult.title?`${o.selectedResult.title.replace(/[^a-z0-9]/gi,"_").toLowerCase()}.html`:"page.html";c.download=p,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(r)};return(n,t)=>(e.openBlock(),e.createElementBlock("div",b,[s.selectedResult.data?.html?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createElementVNode("div",g,[e.createElementVNode("h1",x,e.toDisplayString(s.selectedResult.title||"HTML Page"),1),e.createElementVNode("button",{onClick:i,class:"flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm transition-colors"}," ⬇ HTML ")]),e.createElementVNode("iframe",{srcdoc:s.selectedResult.data.html,class:"flex-1 w-full border-0",sandbox:"allow-scripts allow-same-origin",onLoad:a},null,40,f)],64)):(e.openBlock(),e.createElementBlock("div",_,[...t[0]||(t[0]=[e.createElementVNode("div",{class:"text-gray-500"},"No HTML content available",-1)])]))]))}}),y={class:"text-center p-4 bg-blue-50 dark:bg-blue-900 rounded"},h={class:"text-blue-600 dark:text-blue-300 font-medium"},L={class:"text-sm text-gray-800 dark:text-gray-200 mt-1 font-medium truncate"},T={class:"text-xs text-gray-600 dark:text-gray-400 mt-1"},u=e.defineComponent({__name:"Preview",props:{result:{}},setup(s){const o=s,a=e.computed(()=>o.result.title||"HTML Page"),i=e.computed(()=>{const t=o.result.data?.type;return t?{tailwind:"Tailwind CSS","d3.js":"D3.js","three.js":"Three.js",mermaid:"Mermaid","p5.js":"p5.js"}[t]:""}),n=e.computed(()=>{const t=o.result.data?.type;return t?{tailwind:"🎨","d3.js":"📊","three.js":"🎮",mermaid:"📋","p5.js":"🎨"}[t]:"🌐"});return(t,r)=>(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",h,e.toDisplayString(n.value)+" HTML ",1),e.createElementVNode("div",L,e.toDisplayString(a.value),1),e.createElementVNode("div",T,e.toDisplayString(i.value),1)]))}}),m={...l.pluginCore,viewComponent:d,previewComponent:u},v={plugin:m};exports.HTML_LIBRARIES=l.HTML_LIBRARIES;exports.LIBRARY_DESCRIPTIONS=l.LIBRARY_DESCRIPTIONS;exports.SYSTEM_PROMPT=l.SYSTEM_PROMPT;exports.TOOL_DEFINITION=l.TOOL_DEFINITION;exports.TOOL_NAME=l.TOOL_NAME;exports.executeGenerateHtml=l.executeGenerateHtml;exports.pluginCore=l.pluginCore;exports.Preview=u;exports.View=d;exports.default=v;exports.plugin=m;

package/dist/vue.js

@@ -0,0 +1,91 @@
+import { pluginCore as x } from "./core.js";
+import { HTML_LIBRARIES as S, LIBRARY_DESCRIPTIONS as P, SYSTEM_PROMPT as N, TOOL_DEFINITION as $, TOOL_NAME as B, executeGenerateHtml as D } from "./core.js";
+import { defineComponent as p, createElementBlock as a, openBlock as c, createElementVNode as t, Fragment as f, toDisplayString as i, computed as m } from "vue";
+const h = { class: "w-full h-full overflow-hidden bg-white flex flex-col" }, _ = {
+  key: 0,
+  class: "flex-1 flex items-center justify-center"
+}, y = { class: "flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50" }, g = { class: "text-xl font-semibold text-gray-800" }, w = ["srcdoc"], v = /* @__PURE__ */ p({
+  __name: "View",
+  props: {
+    selectedResult: {}
+  },
+  setup(l) {
+    const s = l, d = () => {
+      console.log("HTML iframe loaded successfully");
+    }, u = () => {
+      const o = s.selectedResult.data?.html;
+      if (!o) return;
+      const e = new Blob([o], { type: "text/html" }), n = URL.createObjectURL(e), r = document.createElement("a");
+      r.href = n;
+      const b = s.selectedResult.title ? `${s.selectedResult.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.html` : "page.html";
+      r.download = b, document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
+    };
+    return (o, e) => (c(), a("div", h, [
+      l.selectedResult.data?.html ? (c(), a(f, { key: 1 }, [
+        t("div", y, [
+          t("h1", g, i(l.selectedResult.title || "HTML Page"), 1),
+          t("button", {
+            onClick: u,
+            class: "flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 text-white rounded text-sm transition-colors"
+          }, " ⬇ HTML ")
+        ]),
+        t("iframe", {
+          srcdoc: l.selectedResult.data.html,
+          class: "flex-1 w-full border-0",
+          sandbox: "allow-scripts allow-same-origin",
+          onLoad: d
+        }, null, 40, w)
+      ], 64)) : (c(), a("div", _, [...e[0] || (e[0] = [
+        t("div", { class: "text-gray-500" }, "No HTML content available", -1)
+      ])]))
+    ]));
+  }
+}), L = { class: "text-center p-4 bg-blue-50 dark:bg-blue-900 rounded" }, R = { class: "text-blue-600 dark:text-blue-300 font-medium" }, T = { class: "text-sm text-gray-800 dark:text-gray-200 mt-1 font-medium truncate" }, j = { class: "text-xs text-gray-600 dark:text-gray-400 mt-1" }, k = /* @__PURE__ */ p({
+  __name: "Preview",
+  props: {
+    result: {}
+  },
+  setup(l) {
+    const s = l, d = m(() => s.result.title || "HTML Page"), u = m(() => {
+      const e = s.result.data?.type;
+      return e ? {
+        tailwind: "Tailwind CSS",
+        "d3.js": "D3.js",
+        "three.js": "Three.js",
+        mermaid: "Mermaid",
+        "p5.js": "p5.js"
+      }[e] : "";
+    }), o = m(() => {
+      const e = s.result.data?.type;
+      return e ? {
+        tailwind: "🎨",
+        "d3.js": "📊",
+        "three.js": "🎮",
+        mermaid: "📋",
+        "p5.js": "🎨"
+      }[e] : "🌐";
+    });
+    return (e, n) => (c(), a("div", L, [
+      t("div", R, i(o.value) + " HTML ", 1),
+      t("div", T, i(d.value), 1),
+      t("div", j, i(u.value), 1)
+    ]));
+  }
+}), M = {
+  ...x,
+  viewComponent: v,
+  previewComponent: k
+}, H = { plugin: M };
+export {
+  S as HTML_LIBRARIES,
+  P as LIBRARY_DESCRIPTIONS,
+  k as Preview,
+  N as SYSTEM_PROMPT,
+  $ as TOOL_DEFINITION,
+  B as TOOL_NAME,
+  v as View,
+  H as default,
+  D as executeGenerateHtml,
+  M as plugin,
+  x as pluginCore
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@gui-chat-plugin/generate-html",
+  "version": "0.1.0",
+  "description": "Generate HTML plugin for GUIChat",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core.js",
+      "require": "./dist/core.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "typecheck": "vue-tsc --noEmit",
+    "lint": "eslint src demo"
+  },
+  "peerDependencies": {
+    "gui-chat-protocol": "^0.0.1",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-vue": "^10.6.2",
+    "globals": "^17.0.0",
+    "gui-chat-protocol": "^0.0.1",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vue": "^3.5.27",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.2.2"
+  },
+  "keywords": [
+    "guichat",
+    "plugin",
+    "html",
+    "generate"
+  ],
+  "license": "MIT"
+}