@appinternalleads/ui 0.3.0 → 0.4.1

package/tools/ask/mcp.mjs

@@ -614,6 +614,84 @@ const CHECK_COMPONENT_CONFIG = {
 
 const COMPONENT_TOOLS = ['search_components', 'describe_component', 'check_render_request', 'list_components', 'check_component_config'];
 
+/* ── motion templates: animations authored once, filled with content ──────── */
+
+/**
+ * **Animations an agent fills, never writes.** A motion template (`@appinternalleads/ui/motion`) is
+ * authored once in Remotion; its timing, easing, layout and type are fixed. An agent sends
+ * `{ schema: "motion/1", template, content }` — text slots within their word limits, optional theme
+ * colours, optional scenes — and gets back either slot-level errors or a link that plays it.
+ */
+const LIST_ANIMATIONS = {
+  name: 'list_animations',
+  title: 'List the animation templates',
+  description:
+    'Every motion template: id, title, what it shows, canvas size and length. Animations are fixed; '
+    + 'you choose one and fill its content. Then call describe_animation.',
+  inputSchema: { type: 'object', properties: {} },
+};
+
+const DESCRIBE_ANIMATION = {
+  name: 'describe_animation',
+  title: 'The content contract of one animation',
+  description:
+    'For one template: every text slot with maxWords and maxChars (text wider than a slot is scaled '
+    + 'down automatically), the theme colour tokens with defaults (hex #rrggbb), which scenes are '
+    + 'optional (omit them or set null), what is NOT configurable, and a complete example request. '
+    + 'Sequence templates (e.g. word-motion) take a LIST of scenes instead: `sequence` '
+    + 'gives its length limits and each item\'s choices (enums such as layout, theme, transition), and '
+    + '`aspectRatio` the canvases (9:16, 16:9). To change words, change only `text`/`line2`; never invent motion. '
+    + 'Build a motion/1 request from it and check it with check_animation_request.',
+  inputSchema: {
+    type: 'object',
+    properties: { template: { type: 'string', description: 'A template id from list_animations, e.g. hey-template or word-motion.' } },
+    required: ['template'],
+  },
+};
+
+const CHECK_ANIMATION_REQUEST = {
+  name: 'check_animation_request',
+  title: 'Check an animation request and get a preview link',
+  description:
+    'Validate { schema: "motion/1", template, content }. Valid → { valid: true, seconds, previewUrl, previewFormat } '
+    + '(the link plays it live as HTML + CSS on the CompPack site; the same request renders to MP4 (H.264) with Remotion). '
+    + 'Invalid → { valid: false, errors: [{ path, message }] } — fix each slot and check again. Never '
+    + 'send timing, positions, fonts, CSS or markup: they are rejected.',
+  inputSchema: {
+    type: 'object',
+    properties: { request: { type: 'object', description: 'The motion/1 request.' } },
+    required: ['request'],
+  },
+};
+
+const ANIMATION_TOOLS = ['list_animations', 'describe_animation', 'check_animation_request'];
+const SITE_URL = process.env.COMPPACK_SITE_URL || 'https://comppack.vercel.app';
+
+async function animationTool(id, name, args) {
+  let m;
+  try { m = await componentsModule(); } catch (e) {
+    return toolError(id, `The animation catalogue did not load (run \`npm run ask:build\`): ${e.message}`);
+  }
+  if (name === 'list_animations') {
+    const list = m.listMotionTemplates();
+    return answer(id, { animations: list }, JSON.stringify(list, null, 2));
+  }
+  if (name === 'describe_animation') {
+    const d = m.describeMotionTemplate(args?.template);
+    if (!d) return toolError(id, `No animation template called ${JSON.stringify(args?.template)}. Available: ${m.listMotionTemplates().map(t => t.template).join(', ')}.`);
+    /* The JSON Schema is for validators; an agent reads the contract. */
+    const contract = { ...d };
+    delete contract.schema;
+    return answer(id, contract, JSON.stringify(contract, null, 2));
+  }
+  const r = m.validateMotionRequest(args?.request);
+  if (!r.valid) {
+    return answer(id, r, `Not valid — ${r.errors.length} ${r.errors.length === 1 ? 'problem' : 'problems'}:\n${r.errors.map(e => `  ${e.path || '(request)'}: ${e.message}`).join('\n')}`, true);
+  }
+  const previewUrl = m.motionPreviewUrl(r.request, SITE_URL);
+  return answer(id, { valid: true, seconds: r.seconds, previewUrl, previewFormat: 'HTML + CSS (DOM), played live in the browser', request: r.request }, `Valid — ${r.seconds}s of ${r.request.template}. Preview (live HTML + CSS in the browser, not a video file): ${previewUrl}. The same request renders to MP4 (H.264) with Remotion.`);
+}
+
 const answer = (id, structured, text, isError = false) =>
   ok(id, { content: [{ type: 'text', text }], structuredContent: structured, ...(isError ? { isError: true } : {}) });
 
@@ -667,13 +745,14 @@ const HANDLERS = {
   }),
   'notifications/initialized': () => {},
   ping: id => ok(id, {}),
-  'tools/list': id => ok(id, { tools: [ASK, VALIDATE, ELICIT, SEARCH_COMPONENTS, DESCRIBE_COMPONENT, CHECK_RENDER_REQUEST, LIST_COMPONENTS, CHECK_COMPONENT_CONFIG] }),
+  'tools/list': id => ok(id, { tools: [ASK, VALIDATE, ELICIT, SEARCH_COMPONENTS, DESCRIBE_COMPONENT, CHECK_RENDER_REQUEST, LIST_COMPONENTS, CHECK_COMPONENT_CONFIG, LIST_ANIMATIONS, DESCRIBE_ANIMATION, CHECK_ANIMATION_REQUEST] }),
   'tools/call': (id, params) => {
     const args = params?.arguments ?? {};
     if (params?.name === 'ask_user') return askUser(id, args);
     if (params?.name === 'validate_question') return validateQuestion(id, args);
     if (params?.name === 'to_elicitation') return toElicitationTool(id, args);
     if (COMPONENT_TOOLS.includes(params?.name)) return componentTool(id, params.name, args);
+    if (ANIMATION_TOOLS.includes(params?.name)) return animationTool(id, params.name, args);
     return fail(id, -32602, `Unknown tool: ${params?.name}`);
   },
   /* `file` is where the text lives on disk and is nobody's business over the wire — a resource