HTML Editor with Claude 3.5

\n {edits.map((edit) => (\n \n {edit.content}\n

\n ))}\n

\n {isLoading && (\n

AI is thinking...

\n )}\n

HTML Output

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/api/chat\") {\n const { Anthropic } = await import(\"https://esm.sh/@anthropic-ai/sdk@0.17.1\");\n const { messages } = await request.json();\n\n const SYSTEM_NEW = `You are a helpful assistant. \n Respond only with HTML code wrapped in \\`\\`\\`html \\`\\`\\` code fences. \n The HTML should be a complete, \n valid document including , , , and tags.\n `\n\n const SYSTEM_DIFF = `Your task is to replace lines in the given content according to the User Query and provide an Output.\nThe JSON output format is:\n{\n\"response\": \"Response to the user with explanation\",\n\"replacements\": [\n{\n\"full_start_line\": \"initial line of the text to be replaced\",\n\"full_end_line\": \"final line of the text to be replaced\",\n\"new_content_without_line_nums\": \"new content without line numbers\"\n}\n]\n}\nRemember the following:\n\nTo delete or remove, simply set new_content_without_line_nums as an empty character \"\" after selecting the appropriate lines.\nWhen adding/replacing content, the new_content should be able to make a smooth transition 'without overwriting' the existing text.\nDo not escape newline characters.`\n \n const anthropic = new Anthropic();\n try {\n const response = await anthropic.messages.create({\n system: messages.length === 1 ? SYSTEM_NEW : SYSTEM_DIFF,\n messages,\n model: MODEL,\n max_tokens: 4096\n });\n\n return new Response(JSON.stringify({ content: response.content[0].text }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Error:\", error);\n return new Response(JSON.stringify({ error: \"Failed to get AI response\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n Chat with Claude 3.5\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n }\n );\n}\n\nexport default server;","deleted","label",[99],"permalink","https://www.val.town/x/stevekrouse/honEmeraldSnail/code/main.tsx","extension","actionData","errors"]