Generate GrapesJS sections with an LLM, safely

npm install @anthropic-ai/sdk

import Anthropic from '@anthropic-ai/sdk';

const SYSTEM_PROMPT = `You generate sections for a visual page builder (GrapesJS).
Return one HTML fragment inside a single \`\`\`html code block and nothing else.
Rules:
- Semantic HTML only: section, header, h1-h3, p, ul, li, a, img, button, div.
- Put styles in one <style> element at the end of the fragment, using class selectors.
- No <script>, no inline event handlers, no external stylesheets or fonts.
- Images use https://placehold.co URLs with explicit width and height attributes.
- Write real, specific copy for the product described. No lorem ipsum.`;

const MAX_PROMPT_CHARS = 2000;

/** The HTML inside the first ```html fence, or the whole text if the model skipped the fence. */
export function extractHtml(text) {
  const fenced = /```html\s*([\s\S]*?)```/i.exec(text);
  return (fenced ? fenced[1] : text).trim();
}

/**
 * POST /api/generate-section  ← { prompt }  → { html }
 *
 * The API key stays on the server. `client` is injectable so the verifier can run the real
 * SDK against a recorded response instead of the network.
 */
export function createGenerateRoute({ client = new Anthropic(), model = 'claude-opus-5' } = {}) {
  return async function handleGenerate(req, res) {
    if (req.method !== 'POST' || new URL(req.url ?? '/', 'http://local').pathname !== '/api/generate-section') return false;

    const send = (status, body) => {
      res.writeHead(status, { 'content-type': 'application/json' });
      res.end(JSON.stringify(body));
    };

    // Authenticate and rate-limit here: every call costs money.

    let prompt;
    try {
      const chunks = [];
      for await (const chunk of req) chunks.push(chunk);
      prompt = JSON.parse(Buffer.concat(chunks).toString('utf8'))?.prompt;
    } catch {
      send(400, { error: 'Expected a JSON body' });
      return true;
    }
    if (typeof prompt !== 'string' || !prompt.trim() || prompt.length > MAX_PROMPT_CHARS) {
      send(400, { error: `prompt must be 1–${MAX_PROMPT_CHARS} characters` });
      return true;
    }

    try {
      const message = await client.messages.create({
        model,
        max_tokens: 16000,
        system: SYSTEM_PROMPT,
        messages: [{ role: 'user', content: prompt }],
      });

      if (message.stop_reason === 'refusal') {
        send(422, { error: 'The model declined this request.' });
        return true;
      }
      if (message.stop_reason === 'max_tokens') {
        send(502, { error: 'The generated section was cut off. Try a smaller request.' });
        return true;
      }

      const text = message.content
        .filter((block) => block.type === 'text')
        .map((block) => block.text)
        .join('\n');
      const html = extractHtml(text);
      if (!html) {
        send(502, { error: 'The model returned no HTML.' });
        return true;
      }
      send(200, { html });
    } catch (error) {
      if (error instanceof Anthropic.RateLimitError) send(429, { error: 'Rate limited, try again shortly.' });
      else if (error instanceof Anthropic.APIError) {
        console.error('Claude API error', error.status, error.message);
        send(502, { error: 'Generation failed.' });
      } else {
        console.error('generation failed', error);
        send(500, { error: 'Generation failed.' });
      }
    }
    return true;
  };
}

import grapesjs, { type Component } from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container: '#gjs',
  height: 'calc(100vh - 48px)',
  storageManager: false,
  projectData: { pages: [{ component: '<main class="page"></main>' }] },
});

const form = document.querySelector<HTMLFormElement>('#generate');
const status = document.querySelector<HTMLOutputElement>('#generate-status');

async function generateSection(prompt: string): Promise<Component[]> {
  const response = await fetch('/api/generate-section', {
    method: 'POST',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ prompt }),
  });
  const body: { html?: string; error?: string } = await response.json();
  if (!response.ok || !body.html) throw new Error(body.error ?? `Request failed (${response.status})`);

  // Model output is untrusted input. GrapesJS's parser drops <script> elements, on* handler
  // attributes and javascript: URLs by default (parser options allowScripts, allowUnsafeAttr,
  // allowUnsafeAttrValue) — leave those defaults alone. <style> content becomes CSS rules.
  const added = editor.addComponents(body.html);
  const [first] = added;
  if (first) editor.select(first);
  return added;
}

form?.addEventListener('submit', async (event) => {
  event.preventDefault();
  const prompt = new FormData(form).get('prompt');
  if (typeof prompt !== 'string' || !prompt.trim()) return;
  const button = form.querySelector('button');
  if (button) button.disabled = true;
  if (status) status.textContent = 'Generating…';
  try {
    const added = await generateSection(prompt);
    if (status) status.textContent = `Added ${added.length} component(s). Undo removes them.`;
  } catch (error) {
    if (status) status.textContent = error instanceof Error ? error.message : 'Generation failed';
  } finally {
    if (button) button.disabled = false;
  }
});

// Exposed for the test harness.
Object.assign(window, { editor });