@gui-chat-plugin/edit-html

An edit HTML plugin for MulmoChat.

Overview

This plugin allows users to edit an existing HTML page by describing the desired modifications. It sends the current HTML and modification prompt to an LLM (Claude or Gemini) to generate the updated HTML.

Installation

yarn add @gui-chat-plugin/edit-html

Usage

Vue Implementation (for MulmoChat)

// In src/tools/index.ts
import EditHtmlPlugin from "@gui-chat-plugin/edit-html/vue";

const pluginList = [
  // ... other plugins
  EditHtmlPlugin,
];

// In src/main.ts
import "@gui-chat-plugin/edit-html/style.css";

Core Only (Framework-agnostic)

import { pluginCore, TOOL_NAME } from "@gui-chat-plugin/edit-html";

Package Exports

| Export | Description | |--------|-------------| | @gui-chat-plugin/edit-html | Core (framework-agnostic) | | @gui-chat-plugin/edit-html/vue | Vue implementation | | @gui-chat-plugin/edit-html/style.css | Tailwind CSS styles |

Requirements

This plugin requires an Anthropic API key or Google API key configured in MulmoChat.

Test Prompts

First generate an HTML page, then:

1. "Change the background color to blue"
2. "Add a navigation menu at the top"
3. "Make the font larger"
4. "Add a footer with contact information"

Development

yarn install
yarn dev        # Start dev server
yarn build      # Build
yarn typecheck  # Type check
yarn lint       # Lint

License

MIT