-
Notifications
You must be signed in to change notification settings - Fork 0
/
use_webdraw_ai.html
173 lines (146 loc) · 7.26 KB
/
use_webdraw_ai.html
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webdraw AI</title>
<meta name="description" content="Add AI capabilities to your application.">
<meta name="icon" content="<svg width='48' height='48' viewBox='0 0 16 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.51722 14C4.37238 14 4.2368 13.967 4.11047 13.901C3.9843 13.835 3.88597 13.7315 3.81547 13.5905L2.05772 10.423H3.31547L4.23847 12.1923H6.24997V11.423H4.70372L3.78072 9.65375H1.62297L0.351966 7.40375C0.318632 7.33325 0.292633 7.266 0.273966 7.202C0.255466 7.13783 0.246216 7.0705 0.246216 7C0.246216 6.959 0.281466 6.82442 0.351966 6.59625L1.62297 4.34625H3.78072L4.70372 2.577H6.24997V1.80775H4.23847L3.31547 3.577H2.05772L3.81547 0.4095C3.88597 0.2685 3.9843 0.165001 4.11047 0.0990006C4.2368 0.0330005 4.37238 0 4.51722 0H6.80772C7.03972 0 7.2323 0.0765834 7.38547 0.22975C7.5388 0.382917 7.61547 0.575583 7.61547 0.80775V4.423H6.09622L5.32697 5.19225H7.61547V7.923H5.64622L4.76147 6.173H2.90372L2.13447 6.94225H4.29622L5.18072 8.69225H7.61547V13.1923C7.61547 13.4244 7.5388 13.6171 7.38547 13.7703C7.2323 13.9234 7.03972 14 6.80772 14H4.51722ZM9.19222 14C8.96022 14 8.76763 13.9234 8.61447 13.7703C8.46113 13.6171 8.38447 13.4244 8.38447 13.1923V8.69225H10.8192L11.7037 6.94225H13.8655L13.0962 6.173H11.2385L10.3345 7.923H8.38447V5.19225H10.673L9.90372 4.423H8.38447V0.80775C8.38447 0.575583 8.46113 0.382917 8.61447 0.22975C8.76763 0.0765834 8.96022 0 9.19222 0H11.4827C11.6275 0 11.7631 0.0330005 11.8895 0.0990006C12.0156 0.165001 12.114 0.2685 12.1845 0.4095L13.9422 3.577H12.6845L11.7615 1.80775H9.74997V2.577H11.2962L12.2 4.34625H14.377L15.648 6.59625C15.6813 6.66675 15.7073 6.734 15.726 6.798C15.7445 6.86217 15.7537 6.9295 15.7537 7C15.7537 7.041 15.7185 7.17558 15.648 7.40375L14.377 9.65375H12.2L11.2962 11.423H9.74997V12.1923H11.7615L12.6845 10.423H13.9422L12.1845 13.5905C12.114 13.7315 12.0156 13.835 11.8895 13.901C11.7631 13.967 11.6275 14 11.4827 14H9.19222Z' fill='#18181B'/></svg>">
<meta name="examples" content="">
<meta name="metadata" content="This widget indicates that the generated code will use the AI
SDK. The generated code will be run inside an iframe which implements
the SDK via postMessage.
To use the SDK, import it like this.
import { getSDK } from "https://webdraw.com/webdraw-sdk"
inside of a <script type="module"
This is the code of this SDK:
import { WindowPostMessageProxy } from "https://esm.sh/[email protected]";
const SDK = Promise.withResolvers();
const channel = new WindowPostMessageProxy();
export const getSDK = () => SDK.promise;
// In case we aren't inside webdraw
if (globalThis.parent === globalThis) {
SDK.resolve(null);
} else {
SDK.resolve(
channel.postMessage(globalThis.parent, { type: "webdraw@sdk" })
.then(({ payload }) =>
new Function(
"channel",
`return (${payload})(channel);`,
)(channel)
)
.catch((error) => {
console.error(error);
return null;
}),
);
}
And these are the APIs available:
const createIframeSDK = (channel: WindowPostMessageProxy) => {
const fs = {
read: async (filepath: string): Promise<FileEntry> => {
const response = await channel.postMessage<{ payload: FileEntry }>(
globalThis.parent,
{ type: "webdraw@fs:read", payload: filepath },
);
return response.payload;
},
write: async (filepath: string, text: string): Promise<void> => {
await channel.postMessage(
globalThis.parent,
{ type: "webdraw@fs:write", payload: { filepath, text } },
);
},
list: async (): Promise<string[]> => {
const response = await channel.postMessage<{ payload: string[] }>(
globalThis.parent,
{ type: "webdraw@fs:list" },
);
return response.payload;
},
remove: (filepath: string): Promise<void> => {
return channel.postMessage(
globalThis.parent,
{ type: "webdraw@fs:remove", payload: { filepath } },
);
},
onChange: (cb: (event: FileChangeInfo) => void) => {
channel.addHandler({
test: (message) => message.type === "webdraw@fs:change",
handle: (message) => {
cb(message.payload);
return { status: "success" };
},
});
},
};
const ai = {
message: async (chat: ChatWithTools): Promise<ChatMessage> => {
const response = await channel.postMessage<{ payload: ChatMessage }>(
globalThis.parent,
{ type: "webdraw@ai:message", payload: chat },
);
return response.payload;
},
genImage: async (prompt: GenImagePrompt): Promise<{ url: string }> => {
const response = await channel.postMessage<{ payload: { url: string } }>(
globalThis.parent,
{ type: "webdraw@ai:image_gen", payload: prompt },
);
return response.payload;
},
};
return { fs, ai };
};
If the required task is better suited with AI returning structured data,
use "tools" option from Claude API
This is a sample tool declaration
{
name: "createFile",
description: "Creates a file with the given name and content",
input_schema: {
type: "object",
properties: {
filename: {
type: "string",
description: "Name of the file to create"
},
content: {
type: "string",
description: "Content of the file"
}
},
required: ["filename", "content"]
}
}
Remember to pass the schema in input_schema
This is an example return from the API:
{
"id": "msg_01Gp4rD47wCbQytrtCkyGhjr",
"type": "message",
"role": "assistant",
"model": "claude-3-5-sonnet-20241022",
"content": [
{
"type": "text",
"text": "Vou ajudar você a gerar marcos para aterrar a linha vermelha. Vou criar uma sequência lógica de milestones para esse objetivo."
},
{
"type": "tool_use",
"id": "toolu_01JJkvKc2KG4xkGCRVgixNc3",
"name": "generate_milestones",
"input": {
"milestones": [
{
"title": "Análise inicial da linha vermelha",
"duration": "1 semana",
"description": "Fazer levantamento completo da situação atual da linha vermelha, identificando pontos críticos e necessidades específicas de aterramento"
}
]
}
}
]
}">
</head>
</html>