plugin-interactive-canvas/plugin.json at main · TypingMind/plugin-interactive-canvas · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
{
  "id": "render_interactive_canvas",
  "uuid": "f76b6080-3e40-4f94-b4be-54297103956f",
  "emoji": "🔲",
  "title": "Interactive Canvas",
  "iconURL": "https://custom.typingmind.com/assets/plugins/interactive-canvas.webp",
  "pluginFunctions": [
    {
      "id": "LEGACY_DEFAULT_FUNCTION",
      "name": "Render",
      "implementationType": "javascript",
      "outputType": "render_html",
      "openaiSpec": {
        "name": "render_interactive_canvas",
        "parameters": {
          "type": "object",
          "required": [
            "htmlSource"
          ],
          "properties": {
            "htmlSource": {
              "type": "string",
              "description": "The full HTML source to render to the canvas. Must be a complete document (e.g. starting with <!DOCTYPE html> or <html>). To use an image from the chat attachments, write its URL as `tm-attachment://<id>` with an attachment id from the <CHAT_ATTACHMENTS> list, e.g. `<img src=\"tm-attachment://<id>\">` or `background-image: url(tm-attachment://<id>)`; it is replaced with the real image when the app is displayed. Never embed the image data yourself. After this initial render, prefer the `update_interactive_canvas` tool to make small edits — it is much faster and uses far fewer tokens than re-emitting the entire HTML."
            },
            "canvasHeight": {
              "type": "number",
              "description": "The height of the canvas in pixels. Default is 500."
            }
          }
        },
        "description": "Render an interactive canvas with HTML source to the user interface. The HTML source can include JavaScript and CSS to create interactive elements. This can be used to create custom user interfaces, games, demos, charts, and more. The canvas width is always 100% of the container width, and the height can be specified in pixels. Use this for the FIRST render and for full rewrites. For small follow-up tweaks to a canvas you have already rendered, prefer `update_interactive_canvas`. Use search_interactive_canvas_source and read_interactive_canvas_lines to inspect the latest source before editing. Use read_interactive_canvas_source only when you need the full source."
      },
      "codeFile": "render.js"
    },
    {
      "id": "8c83cae9-7b82-4fcf-a58c-beb1ede6dbd4",
      "name": "Update",
      "implementationType": "javascript",
      "outputType": "render_html",
      "openaiSpec": {
        "name": "update_interactive_canvas",
        "parameters": {
          "type": "object",
          "required": [
            "edits"
          ],
          "properties": {
            "edits": {
              "type": "array",
              "minItems": 1,
              "description": "An ordered list of search-and-replace edits to apply to the most recently rendered interactive canvas HTML. Edits are applied sequentially: each edit operates on the result of the previous one. Each `oldText` must appear EXACTLY ONCE in the current HTML — include enough surrounding context (whitespace and neighbouring tags) to make the match unique. To insert new content, set `oldText` to a unique anchor that already exists and put both that anchor and the new content into `newText`. To delete content, set `newText` to an empty string.",
              "items": {
                "type": "object",
                "required": [
                  "oldText",
                  "newText"
                ],
                "properties": {
                  "oldText": {
                    "type": "string",
                    "description": "The exact substring to find in the current HTML. Whitespace, casing and punctuation must match byte-for-byte. Must occur exactly once in the current HTML."
                  },
                  "newText": {
                    "type": "string",
                    "description": "The replacement text. Use an empty string to delete the matched region."
                  }
                }
              }
            }
          }
        },
        "description": "Apply small, targeted edits to the most recently rendered interactive canvas instead of re-emitting the full HTML. Each edit performs an exact, literal find-and-replace on the current HTML. Use this WHENEVER you only need to tweak parts of an existing canvas you previously rendered with `render_interactive_canvas` — it is much faster and uses far fewer output tokens than re-emitting the entire HTML.\n\nRules:\n- Do NOT use this for the very first render — use `render_interactive_canvas` instead.\n- Each `oldText` must match EXACTLY ONCE in the current HTML; include enough surrounding context to make it unique. If a match is ambiguous (matches more than once) or missing, the call will fail and you should retry with more context, or fall back to `render_interactive_canvas` with the full updated HTML.\n- Edits are applied in order; later edits see the result of earlier ones.\n- Prefer many small edits over one big rewrite — it makes failures localised and easier to retry.\n- Use search_interactive_canvas_source to locate code, then read_interactive_canvas_lines for the surrounding source before choosing oldText. Line number prefixes in those results are not part of the source."
      },
      "codeFile": "update.js"
    },
    {
      "id": "b369f7e3-96ec-4d8c-9b86-723a5d09e5a4",
      "name": "Read Source",
      "implementationType": "javascript",
      "outputType": "respond_to_ai",
      "openaiSpec": {
        "name": "read_interactive_canvas_source",
        "parameters": {
          "type": "object",
          "properties": {}
        },
        "description": "Read the full, exact HTML source of the latest interactive canvas rendered or updated by this plugin. Does not change the canvas. Attachment placeholders remain unchanged. Prefer search_interactive_canvas_source and read_interactive_canvas_lines when you only need part of a large canvas."
      },
      "codeFile": "read-source.js"
    },
    {
      "id": "b77c85ff-fa0d-4354-ad49-eb699a9fc01b",
      "name": "Search Source",
      "implementationType": "javascript",
      "outputType": "respond_to_ai",
      "openaiSpec": {
        "name": "search_interactive_canvas_source",
        "parameters": {
          "type": "object",
          "required": [
            "keyword"
          ],
          "properties": {
            "keyword": {
              "type": "string",
              "minLength": 1,
              "description": "Literal text to find within each line. Matching is case-insensitive; regular expressions are not supported."
            },
            "limit": {
              "type": "integer",
              "minimum": 1,
              "maximum": 200,
              "default": 50,
              "description": "Maximum number of matching lines to return, starting from the top of the source. Defaults to 50."
            }
          }
        },
        "description": "Search the latest interactive canvas HTML for a literal keyword, ignoring case. Return matching lines with 1-based line numbers and the total match count. Does not change the canvas. Use read_interactive_canvas_lines to read nearby lines before editing. Line number prefixes are not part of the source."
      },
      "codeFile": "search-source.js"
    },
    {
      "id": "58cb6d01-cad9-4e86-9c99-6262bef17af2",
      "name": "Read Lines",
      "implementationType": "javascript",
      "outputType": "respond_to_ai",
      "openaiSpec": {
        "name": "read_interactive_canvas_lines",
        "parameters": {
          "type": "object",
          "required": [
            "startLine",
            "endLine"
          ],
          "properties": {
            "startLine": {
              "type": "integer",
              "minimum": 1,
              "description": "First line to read, starting at 1."
            },
            "endLine": {
              "type": "integer",
              "minimum": 1,
              "description": "Last line to read, inclusive. Must be at least startLine."
            }
          }
        },
        "description": "Read an inclusive range of lines from the latest interactive canvas HTML, with 1-based line numbers. Does not change the canvas. endLine is capped at the final source line. Line number prefixes are not part of the source; omit them when building update_interactive_canvas edits."
      },
      "codeFile": "read-lines.js"
    }
  ]
}