Interactive Form Demo - Submit to Claude

Details

Raw Data

{
  "id": "cf604b09-f32c-4f85-92d9-6b5fd53ba041",
  "type": "general",
  "status": "completed",
  "title": "Interactive Form Demo - Submit to Claude",
  "description": "Demo of interactive forms in kontask cards that submit data back to Claude via sendPrompt",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,-apple-system,sans-serif;\">\n  <h2 style=\"color:#fff;margin:0 0 16px 0;\">Interactive Form Demo</h2>\n  <p style=\"color:#9ca3af;margin-bottom:20px;\">This kontask demonstrates forms that can submit data back to Claude.</p>\n  \n  <div id=\"form-demo\" style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n    <h4 style=\"color:#fff;margin:0 0 12px 0;\">Quick Task Request</h4>\n    \n    <div style=\"margin-bottom:12px;\">\n      <label style=\"display:block;color:#9ca3af;margin-bottom:4px;font-size:0.9rem;\">Task Type</label>\n      <select id=\"task-type\" style=\"width:100%;padding:8px;border-radius:4px;border:1px solid #444;background:#1e1e1e;color:#e0e0e0;\">\n        <option value=\"explain\">Explain code</option>\n        <option value=\"fix\">Fix a bug</option>\n        <option value=\"review\">Review changes</option>\n        <option value=\"implement\">Implement feature</option>\n      </select>\n    </div>\n    \n    <div style=\"margin-bottom:12px;\">\n      <label style=\"display:block;color:#9ca3af;margin-bottom:4px;font-size:0.9rem;\">File or Path (optional)</label>\n      <input id=\"task-path\" type=\"text\" placeholder=\"e.g., /konnectvol/konui/src/main.ts\" style=\"width:100%;padding:8px;border-radius:4px;border:1px solid #444;background:#1e1e1e;color:#e0e0e0;box-sizing:border-box;\">\n    </div>\n    \n    <div style=\"margin-bottom:16px;\">\n      <label style=\"display:block;color:#9ca3af;margin-bottom:4px;font-size:0.9rem;\">Additional Details</label>\n      <textarea id=\"task-details\" rows=\"3\" placeholder=\"Describe what you need...\" style=\"width:100%;padding:8px;border-radius:4px;border:1px solid #444;background:#1e1e1e;color:#e0e0e0;resize:vertical;box-sizing:border-box;\"></textarea>\n    </div>\n    \n    <button onclick=\"window.submitTaskForm()\" style=\"background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:bold;\">Submit to Claude</button>\n  </div>\n  \n  <div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\">\n    <h4 style=\"color:#fff;margin:0 0 12px 0;\">How It Works</h4>\n    <ul style=\"color:#9ca3af;margin:0;padding-left:20px;line-height:1.8;\">\n      <li>Form data is collected from inputs</li>\n      <li>Calls <code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;color:#98c379;\">window.sendPrompt()</code> with formatted prompt</li>\n      <li>Claude receives the structured request</li>\n      <li>Response appears as a new turn in the console</li>\n    </ul>\n  </div>\n</div>\n\n<script>\n  // Form submission handler - must be on window for onclick access\n  window.submitTaskForm = function() {\n    var taskType = document.getElementById('task-type').value;\n    var taskPath = document.getElementById('task-path').value.trim();\n    var taskDetails = document.getElementById('task-details').value.trim();\n    \n    // Build the prompt\n    var prompt = taskType.charAt(0).toUpperCase() + taskType.slice(1);\n    \n    if (taskPath) {\n      prompt += ' ' + taskPath;\n    }\n    \n    if (taskDetails) {\n      prompt += ': ' + taskDetails;\n    } else if (!taskPath) {\n      alert('Please provide some details about what you need.');\n      return;\n    }\n    \n    // Send to Claude!\n    if (window.sendPrompt) {\n      window.sendPrompt(prompt);\n    } else {\n      alert('sendPrompt not available - are you in the dashboard console?');\n    }\n  };\n</script>"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-06T23:37:29.162Z",
  "updatedAt": "2026-01-06T23:37:29.397Z",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "demo",
    "forms"
  ],
  "targetUser": "claude"
}