From 58f40942d0d5baf8221e1a2dc6af2b6fd27b9355 Mon Sep 17 00:00:00 2001
From: laansdole <dolelongan@gmail.com>
Date: Sat, 14 Nov 2026 10:59:45 +0700
Subject: [PATCH] feat: workflow designer agent and Generate dialog

Describe a workflow in plain language and an agent writes the YAML.

- yaml_instance/workflow_designer.yaml: one agent with function tools that
  read the authoring guide, node docs and bundled examples, and validate
  its YAML with check_config. Its validator also requires the BASE_URL,
  API_KEY and MODEL_NAME placeholders on agent nodes and rejects key-like
  strings.
- functions/edge_processor/workflow_design.py: re-validates the output on
  the edge; invalid YAML reaches the end node with its errors as comments.
- frontend: Generate button on the workflow list opens a dialog that runs
  the designer via POST /api/workflow/run, shows an editable preview, and
  saves with postYaml before opening the workbench.
- postYaml now surfaces the server's error message ({error: {message}} and
  string detail) and returns the HTTP status; it previously showed
  'Unknown error' or the status text.
- docs: web UI guide (en, zh).
---
 docs/user_guide/en/web_ui_guide.md            |   3 +
 docs/user_guide/zh/web_ui_guide.md            |   3 +
 .../src/components/GenerateWorkflowModal.vue  | 416 ++++++++++++++++++
 frontend/src/locales/en.json                  |  21 +
 frontend/src/locales/zh.json                  |  21 +
 frontend/src/pages/WorkflowList.vue           |  53 +++
 frontend/src/utils/apiFunctions.js            |  24 +-
 functions/edge_processor/workflow_design.py   |  25 ++
 functions/function_calling/workflow_design.py |  82 ++++
 tests/test_workflow_designer.py               |  51 +++
 yaml_instance/workflow_designer.yaml          |  55 +++
 11 files changed, 751 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/GenerateWorkflowModal.vue
 create mode 100644 functions/edge_processor/workflow_design.py
 create mode 100644 functions/function_calling/workflow_design.py
 create mode 100644 tests/test_workflow_designer.py
 create mode 100644 yaml_instance/workflow_designer.yaml

diff --git a/docs/user_guide/en/web_ui_guide.md b/docs/user_guide/en/web_ui_guide.md
index f20a393362..5c17c1e55d 100755
--- a/docs/user_guide/en/web_ui_guide.md
+++ b/docs/user_guide/en/web_ui_guide.md
@@ -20,6 +20,9 @@ View and manage all available workflow YAML files.
 - Browse workflows in `yaml_instance/` directory
 - Preview YAML configuration content
 - Select workflow to execute or edit
+- **Generate**: describe a workflow in plain language and an agent writes the YAML (see below)
+
+**Generating a workflow**: Generate runs `yaml_instance/workflow_designer.yaml` with the server's `BASE_URL`, `API_KEY` and its `MODEL_NAME` (default `gpt-4o`). The designer reads the authoring guide, node docs and bundled examples through function tools, then validates its YAML with the same check the save route uses. Its validator also requires every agent node to use the `${BASE_URL}`, `${API_KEY}` and `${MODEL_NAME}` placeholders and rejects anything that looks like an API key. The result opens in an editable preview; **Save and open** writes it to `yaml_instance/<name>.yaml` and opens it in the workbench. If the YAML still fails validation, the errors are listed as comments at the top; schema errors also block saving. The same workflow runs headless: `echo "your description" | uv run python run.py --path yaml_instance/workflow_designer.yaml --name designer`.
 
 ### 2.3 Launch View
 
diff --git a/docs/user_guide/zh/web_ui_guide.md b/docs/user_guide/zh/web_ui_guide.md
index b7cb8ccb0f..8ae687d9e7 100755
--- a/docs/user_guide/zh/web_ui_guide.md
+++ b/docs/user_guide/zh/web_ui_guide.md
@@ -20,6 +20,9 @@
 - 浏览 `yaml_instance/` 目录下的工作流
 - 预览 YAML 配置内容
 - 选择工作流进入执行或编辑
+- **生成 (Generate)**：用自然语言描述工作流，由智能体编写 YAML（见下文）
+
+**生成工作流**：“生成”会使用服务器的 `BASE_URL`、`API_KEY` 以及工作流自身的 `MODEL_NAME`（默认 `gpt-4o`）运行 `yaml_instance/workflow_designer.yaml`。设计器通过函数工具阅读编写指南、节点文档和内置示例，并用与保存接口相同的校验检查生成的 YAML。它的校验还要求每个智能体节点使用 `${BASE_URL}`、`${API_KEY}` 和 `${MODEL_NAME}` 占位符，并拒绝任何疑似 API 密钥的内容。结果显示在可编辑的预览中；**保存并打开**会将其写入 `yaml_instance/<名称>.yaml` 并在工作台中打开。若 YAML 仍未通过校验，错误会以注释形式列在顶部；结构错误同样会阻止保存。也可以在命令行运行：`echo "你的描述" | uv run python run.py --path yaml_instance/workflow_designer.yaml --name designer`。
 
 ### 2.3 启动页 (Launch View)
 
diff --git a/frontend/src/components/GenerateWorkflowModal.vue b/frontend/src/components/GenerateWorkflowModal.vue
new file mode 100644
index 0000000000..2328f5b61b
--- /dev/null
+++ b/frontend/src/components/GenerateWorkflowModal.vue
@@ -0,0 +1,416 @@
+<template>
+  <div class="modal-overlay" @click.self="close">
+    <div class="modal-content generate-modal" role="dialog" aria-modal="true" aria-labelledby="generate-workflow-title">
+      <div class="modal-header">
+        <h3 id="generate-workflow-title">{{ $t('workflow_generate.title') }}</h3>
+        <button class="close-button" :aria-label="$t('common.cancel')" @click="close">×</button>
+      </div>
+
+      <div class="modal-body">
+        <template v-if="!yamlText">
+          <label class="field-label" for="generate-description">{{ $t('workflow_generate.description_label') }}</label>
+          <textarea
+            id="generate-description"
+            ref="descriptionRef"
+            v-model="description"
+            class="text-area description-input"
+            :placeholder="$t('workflow_generate.description_placeholder')"
+            :disabled="generating"
+            @keydown.meta.enter.prevent="generate"
+            @keydown.ctrl.enter.prevent="generate"
+          ></textarea>
+          <p class="field-hint">{{ $t('workflow_generate.description_hint') }}</p>
+
+          <div v-if="generating" class="status-line" role="status">
+            <span class="spinner" aria-hidden="true"></span>
+            {{ $t('workflow_generate.generating', { seconds: elapsedSeconds }) }}
+          </div>
+          <p v-if="errorText" class="error-text" role="alert">
+            <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /></svg>
+            {{ errorText }}
+          </p>
+        </template>
+
+        <template v-else>
+          <p v-if="needsFixes" class="warning-text" role="alert">
+            <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /></svg>
+            {{ $t('workflow_generate.needs_fixes') }}
+          </p>
+          <label class="field-label" for="generate-yaml">{{ $t('workflow_generate.yaml_label') }}</label>
+          <textarea id="generate-yaml" v-model="yamlText" class="text-area yaml-output" spellcheck="false"></textarea>
+
+          <label class="field-label" for="generate-filename">{{ $t('workflow_generate.filename_label') }}</label>
+          <div class="filename-row">
+            <input id="generate-filename" v-model="filename" class="text-input" :aria-invalid="!filenameValid" />
+            <span class="filename-suffix">.yaml</span>
+          </div>
+          <p v-if="!filenameValid" class="error-text">{{ $t('workflow_generate.filename_invalid') }}</p>
+          <p v-if="errorText" class="error-text" role="alert">
+            <svg class="status-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" /></svg>
+            {{ errorText }}
+          </p>
+        </template>
+      </div>
+
+      <div class="modal-footer">
+        <template v-if="!yamlText">
+          <button class="cancel-button" @click="close">{{ $t('common.cancel') }}</button>
+          <button class="confirm-button" :disabled="generating || !description.trim()" @click="generate">
+            {{ $t('workflow_generate.generate') }}
+          </button>
+        </template>
+        <template v-else>
+          <button class="cancel-button" :disabled="saving" @click="backToDescription">{{ $t('workflow_generate.back') }}</button>
+          <button class="confirm-button" :disabled="saving || !filenameValid || !yamlText.trim()" @click="save">
+            {{ saving ? $t('workflow_generate.saving') : $t('workflow_generate.save_and_open') }}
+          </button>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import yaml from 'js-yaml'
+import { generateWorkflowYaml, postYaml } from '../utils/apiFunctions.js'
+
+const emit = defineEmits(['close', 'created'])
+const { t } = useI18n()
+
+const description = ref('')
+const descriptionRef = ref(null)
+const yamlText = ref('')
+const filename = ref('')
+const generating = ref(false)
+const saving = ref(false)
+const errorText = ref('')
+const elapsedSeconds = ref(0)
+
+let controller = null
+let timer = null
+
+// Same rule the server applies in validate_workflow_filename.
+const filenameValid = computed(() => /^[a-zA-Z0-9._-]+$/.test(filename.value.trim()))
+// The designer's edge processor prefixes YAML that failed validation with this comment.
+const needsFixes = computed(() => yamlText.value.startsWith('# VALIDATION FAILED'))
+
+const stopTimer = () => {
+  clearInterval(timer)
+  timer = null
+}
+
+const generate = async () => {
+  if (generating.value || !description.value.trim()) return
+  errorText.value = ''
+  generating.value = true
+  elapsedSeconds.value = 0
+  timer = setInterval(() => { elapsedSeconds.value += 1 }, 1000)
+  controller = new AbortController()
+  try {
+    const text = await generateWorkflowYaml(description.value.trim(), controller.signal)
+    if (!text.trim()) throw new Error(t('workflow_generate.empty_result'))
+    yamlText.value = text
+    try {
+      filename.value = String(yaml.load(text)?.graph?.id || '').trim()
+    } catch {
+      filename.value = ''
+    }
+  } catch (error) {
+    if (error.name !== 'AbortError') {
+      errorText.value = t('workflow_generate.request_failed', { reason: error.message })
+    }
+  } finally {
+    stopTimer()
+    generating.value = false
+    controller = null
+  }
+}
+
+const backToDescription = async () => {
+  yamlText.value = ''
+  errorText.value = ''
+  await nextTick()
+  descriptionRef.value?.focus()
+}
+
+const save = async () => {
+  saving.value = true
+  errorText.value = ''
+  const name = filename.value.trim()
+  const result = await postYaml(name, yamlText.value)
+  saving.value = false
+  if (result.success) {
+    emit('created', `${name}.yaml`)
+    return
+  }
+  const reason = result.detail || result.message
+  errorText.value = t(result.status === 409 ? 'workflow_generate.save_conflict' : 'workflow_generate.save_failed', {
+    reason: typeof reason === 'string' ? reason : JSON.stringify(reason)
+  })
+}
+
+const close = () => {
+  controller?.abort()
+  emit('close')
+}
+
+// On window, not the overlay: focus falls back to <body> when a button disables itself.
+const onKeydown = (event) => {
+  if (event.key === 'Escape') close()
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown)
+  descriptionRef.value?.focus()
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown)
+  controller?.abort()
+  stopTimer()
+})
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  backdrop-filter: blur(2px);
+}
+
+.generate-modal {
+  width: 760px;
+  max-width: 92vw;
+  max-height: 90vh;
+  background: #1e1e1e;
+  border-radius: 8px;
+  border: 1px solid #333;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #333;
+}
+
+.modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 24px;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+}
+
+.close-button:hover,
+.close-button:focus-visible {
+  color: #fff;
+}
+
+.modal-body {
+  padding: 20px;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field-label {
+  color: #e0e0e0;
+  font-size: 15px;
+  margin-top: 8px;
+}
+
+.field-label:first-child {
+  margin-top: 0;
+}
+
+.field-hint {
+  margin: 0;
+  color: #8b949e;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.text-area,
+.text-input {
+  width: 100%;
+  box-sizing: border-box;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  color: #fff;
+  border-radius: 4px;
+  padding: 10px;
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.text-area:focus,
+.text-input:focus {
+  outline: 2px solid #4facfe;
+  outline-offset: 1px;
+  border-color: #4facfe;
+}
+
+.text-area::placeholder {
+  color: #9aa0a6;
+}
+
+.description-input {
+  min-height: 140px;
+  resize: vertical;
+  line-height: 1.5;
+}
+
+.yaml-output {
+  min-height: 320px;
+  resize: vertical;
+  font-family: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.filename-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filename-suffix {
+  color: #8b949e;
+  font-size: 14px;
+}
+
+.status-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: #e0e0e0;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #4facfe;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.error-text,
+.warning-text {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 4px 0 0;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.error-text {
+  color: #ff8a8a;
+  white-space: pre-line;
+}
+
+.warning-text {
+  color: #ffd27a;
+}
+
+.status-icon {
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #333;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.confirm-button {
+  background: #4facfe;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.confirm-button:hover:not(:disabled) {
+  background: #3a9cfa;
+}
+
+.cancel-button {
+  background: transparent;
+  color: #ccc;
+  border: 1px solid #444;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.cancel-button:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+  border-color: #666;
+}
+
+.confirm-button:disabled,
+.cancel-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.confirm-button:focus-visible,
+.cancel-button:focus-visible {
+  outline: 2px solid #4facfe;
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner {
+    animation-duration: 2.4s;
+  }
+}
+</style>
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index d1fa54e6e8..9324188a13 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -71,6 +71,27 @@
     "loading": "Loading workflows...",
     "no_files": "No workflow files found"
   },
+  "workflow_generate": {
+    "button": "Generate",
+    "button_title": "Describe a workflow and let an agent write the YAML",
+    "title": "Generate workflow",
+    "description_label": "What should the workflow do?",
+    "description_placeholder": "Example: a writer drafts a blog post, an editor reviews it and sends feedback for up to 3 rounds, then the approved post is published.",
+    "description_hint": "Runs workflow_designer.yaml with the server's model and API key. Ctrl or Cmd + Enter to generate.",
+    "generate": "Generate",
+    "generating": "Designing the workflow... {seconds}s",
+    "yaml_label": "Generated YAML (editable)",
+    "needs_fixes": "This YAML did not pass validation. The errors are listed as comments at the top; fix them before saving.",
+    "filename_label": "File name",
+    "filename_invalid": "Use only letters, digits, dots, hyphens and underscores.",
+    "back": "Back",
+    "save_and_open": "Save and open",
+    "saving": "Saving...",
+    "empty_result": "The designer returned no output.",
+    "request_failed": "Generation failed: {reason}",
+    "save_failed": "Could not save: {reason}",
+    "save_conflict": "A workflow with this file name already exists. Choose another file name."
+  },
   "workflow_view": {
     "yaml_parse_error": "YAML Parse Error: ",
     "loading_yaml": "Loading YAML content...",
diff --git a/frontend/src/locales/zh.json b/frontend/src/locales/zh.json
index 3b3754fe43..413f755e34 100644
--- a/frontend/src/locales/zh.json
+++ b/frontend/src/locales/zh.json
@@ -49,6 +49,27 @@
     "loading": "加载工作流中...",
     "no_files": "未找到工作流文件"
   },
+  "workflow_generate": {
+    "button": "生成",
+    "button_title": "描述工作流，由智能体编写 YAML",
+    "title": "生成工作流",
+    "description_label": "这个工作流要做什么？",
+    "description_placeholder": "示例：写手起草一篇博客，编辑审阅并最多反馈 3 轮，审核通过后发布。",
+    "description_hint": "使用服务器的模型和 API 密钥运行 workflow_designer.yaml。按 Ctrl 或 Cmd + Enter 生成。",
+    "generate": "生成",
+    "generating": "正在设计工作流... {seconds} 秒",
+    "yaml_label": "生成的 YAML（可编辑）",
+    "needs_fixes": "此 YAML 未通过校验。错误以注释形式列在顶部，请修复后再保存。",
+    "filename_label": "文件名",
+    "filename_invalid": "只能使用字母、数字、点、连字符和下划线。",
+    "back": "返回",
+    "save_and_open": "保存并打开",
+    "saving": "保存中...",
+    "empty_result": "设计器没有返回任何内容。",
+    "request_failed": "生成失败：{reason}",
+    "save_failed": "无法保存：{reason}",
+    "save_conflict": "已存在同名工作流文件，请换一个文件名。"
+  },
   "workflow_view": {
     "yaml_parse_error": "YAML 解析错误：",
     "loading_yaml": "正在加载 YAML 内容...",
diff --git a/frontend/src/pages/WorkflowList.vue b/frontend/src/pages/WorkflowList.vue
index 6ede2cead2..9e10d5377d 100755
--- a/frontend/src/pages/WorkflowList.vue
+++ b/frontend/src/pages/WorkflowList.vue
@@ -16,6 +16,10 @@
         />
       </div>
 
+      <button class="btn generate-btn" @click="showGenerateModal = true" :title="$t('workflow_generate.button_title')">
+        {{ $t('workflow_generate.button') }}
+      </button>
+
       <button class="btn create-btn" @click="openFormGenerator" :title="$t('workflow_list.create')">
         <span>{{ $t('workflow_list.create') }}</span>
         <span class="plus-icon">+</span>
@@ -74,6 +78,13 @@
         @submit="handleFormGeneratorSubmit"
       />
     </Teleport>
+    <Teleport to="body">
+      <GenerateWorkflowModal
+        v-if="showGenerateModal"
+        @close="showGenerateModal = false"
+        @created="handleGenerated"
+      />
+    </Teleport>
   </div>
 </template>
 
@@ -83,6 +94,7 @@ import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { fetchWorkflowsWithDesc } from '../utils/apiFunctions.js'
 import FormGenerator from '../components/FormGenerator.vue'
+import GenerateWorkflowModal from '../components/GenerateWorkflowModal.vue'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -102,6 +114,7 @@ const loading = ref(false)
 const error = ref(null)
 
 const showFormGenerator = ref(false)
+const showGenerateModal = ref(false)
 const searchQuery = ref('')
 
 const loadWorkflows = async () => {
@@ -195,6 +208,12 @@ const handleFormGeneratorSubmit = async (payload) => {
   const fileName = graphId.endsWith('.yaml') ? graphId : `${graphId}.yaml`
   goToWorkflowView(fileName)
 }
+
+const handleGenerated = async (fileName) => {
+  showGenerateModal.value = false
+  await loadWorkflows()
+  goToWorkflowView(fileName)
+}
 </script>
 
 <style scoped>
@@ -351,6 +370,40 @@ const handleFormGeneratorSubmit = async (payload) => {
   line-height: 1;
 }
 
+/* Secondary action next to Create: same shape, outlined instead of gradient */
+.generate-btn {
+  margin-left: auto;
+  min-height: 40px;
+  padding: 10px 14px;
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 15px;
+  border: 1px solid rgba(160, 196, 255, 0.5);
+  background: rgba(255, 255, 255, 0.05);
+  color: #f2f2f2;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Two buttons share the narrow header now; the search box shrinks instead */
+.create-btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.generate-btn:hover {
+  background: rgba(160, 196, 255, 0.12);
+  border-color: #a0c4ff;
+}
+
+.generate-btn:focus-visible,
+.create-btn:focus-visible {
+  outline: 2px solid #a0c4ff;
+  outline-offset: 2px;
+}
+
 /* File List Styles */
 .file-list {
   display: flex;
diff --git a/frontend/src/utils/apiFunctions.js b/frontend/src/utils/apiFunctions.js
index bf6b5b1193..c4982834b3 100755
--- a/frontend/src/utils/apiFunctions.js
+++ b/frontend/src/utils/apiFunctions.js
@@ -63,10 +63,10 @@ export async function postYaml(filename, content) {
           success: true,
           message: 'YAML file saved successfully!'
         }
-      } else if (data.detail) {
+      } else if (data.detail || data.error?.message) {
         return {
           success: false,
-          detail: data.detail
+          detail: data.detail || data.error.message
         }
       } else {
         return {
@@ -79,7 +79,8 @@ export async function postYaml(filename, content) {
       console.error('Error saving YAML file:', errorData)
       return {
         success: false,
-        message: `Error saving YAML file: ${errorData.message || response.statusText}`
+        status: response.status,
+        message: `Error saving YAML file: ${errorData.error?.message || errorData.detail || errorData.message || response.statusText}`
       }
     }
   } catch (error) {
@@ -91,6 +92,23 @@ export async function postYaml(filename, content) {
   }
 }
 
+// Run yaml_instance/workflow_designer.yaml on a plain-language description and return its YAML output.
+// `signal` aborts the request; the server-side run still finishes.
+export async function generateWorkflowYaml(description, signal) {
+  const response = await fetch(apiUrl('/api/workflow/run'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ yaml_file: 'workflow_designer.yaml', task_prompt: description }),
+    signal
+  })
+  const data = await response.json().catch(() => ({}))
+  if (!response.ok) {
+    const detail = data.error?.message || data.detail?.message || data.detail || data.message || response.statusText
+    throw new Error(typeof detail === 'string' ? detail : JSON.stringify(detail))
+  }
+  return data.final_message || ''
+}
+
 export async function updateYaml(filename, content) {
   try {
     const yamlFilename = addYamlSuffix(filename)
diff --git a/functions/edge_processor/workflow_design.py b/functions/edge_processor/workflow_design.py
new file mode 100644
index 0000000000..10039285d6
--- /dev/null
+++ b/functions/edge_processor/workflow_design.py
@@ -0,0 +1,25 @@
+"""Edge processor for ``yaml_instance/workflow_designer.yaml``: emit only the workflow YAML, flagged if it fails validation."""
+
+import re
+from typing import Any, Dict
+
+from functions.function_calling.workflow_design import validate_workflow_yaml
+
+# Greedy: prompts inside the generated workflow may contain their own ``` fences.
+_FENCED_YAML = re.compile(r"```(?:yaml|yml)?\s*\n(.*)```", re.DOTALL)
+
+
+def extract_validated_workflow(data: str, _context: Dict[str, Any]) -> str:
+    """Strip the designer's reply down to its YAML block and re-validate it.
+
+    A valid workflow passes through unchanged. An invalid one keeps its YAML but gains the
+    validation errors as leading ``#`` comments, so the result is still a YAML document the
+    user can fix, while saving it is rejected by the same check.
+    """
+    match = _FENCED_YAML.search(data or "")
+    yaml_text = (match.group(1) if match else data or "").strip() + "\n"
+    verdict = validate_workflow_yaml(yaml_text)
+    if verdict == "OK":
+        return yaml_text
+    comments = "\n".join(f"# {line}" for line in verdict.splitlines())
+    return f"# VALIDATION FAILED - fix these before saving:\n{comments}\n{yaml_text}"
diff --git a/functions/function_calling/workflow_design.py b/functions/function_calling/workflow_design.py
new file mode 100644
index 0000000000..cd2a6e8672
--- /dev/null
+++ b/functions/function_calling/workflow_design.py
@@ -0,0 +1,82 @@
+"""Tools for ``yaml_instance/workflow_designer.yaml``: read DevAll's authoring docs and examples, validate generated YAML."""
+
+import re
+from pathlib import Path
+from typing import Annotated
+
+import yaml
+
+from utils.function_catalog import ParamMeta
+
+_REPO = Path(__file__).resolve().parents[2]
+_EXAMPLES_DIR = _REPO / "yaml_instance"
+_NODE_DOCS_DIR = _REPO / "docs" / "user_guide" / "en" / "nodes"
+_YAML_FENCE = re.compile(r"^\s*```(?:yaml|yml)?\s*\n(.*?)\n?```\s*$", re.DOTALL)
+_SECRET = re.compile(r"\bsk-[A-Za-z0-9_-]{8,}")
+# Generated workflows must stay portable and must never embed the server's real credentials.
+_AGENT_PLACEHOLDERS = {"base_url": "${BASE_URL}", "api_key": "${API_KEY}", "name": "${MODEL_NAME}"}
+
+
+def _agent_nodes(data: object) -> list[dict]:
+    """Every ``type: agent`` node mapping, including those in inline subgraphs."""
+    if isinstance(data, list):
+        return [node for item in data for node in _agent_nodes(item)]
+    if not isinstance(data, dict):
+        return []
+    found = [data] if data.get("type") == "agent" else []
+    return found + [node for value in data.values() for node in _agent_nodes(value)]
+
+
+def get_workflow_authoring_guide() -> str:
+    """Return the DevAll workflow authoring guide plus the annotated design template (yaml_template/design.yaml)."""
+    guide = (_REPO / "docs" / "user_guide" / "en" / "workflow_authoring.md").read_text(encoding="utf-8")
+    template = (_REPO / "yaml_template" / "design.yaml").read_text(encoding="utf-8")
+    return f"{guide}\n\n# Annotated design template\n```yaml\n{template}\n```"
+
+
+def read_node_doc(
+    node_type: Annotated[str, ParamMeta(description="Node type, e.g. agent, human, loop_counter")],
+) -> str:
+    """Return the detailed documentation for one node type, or the list of documented node types."""
+    docs = {path.stem: path for path in _NODE_DOCS_DIR.glob("*.md")}
+    if node_type not in docs:
+        return "Unknown node type. Documented node types: " + ", ".join(sorted(docs))
+    return docs[node_type].read_text(encoding="utf-8")
+
+
+def read_example_workflow(
+    name: Annotated[str, ParamMeta(description="Example path relative to yaml_instance/, e.g. demo_loop_counter.yaml")] = "",
+) -> str:
+    """Return a bundled example workflow YAML, or the list of available examples when ``name`` is empty or unknown."""
+    # Only names from this listing are readable, so no path outside yaml_instance/ can be requested.
+    examples = {path.relative_to(_EXAMPLES_DIR).as_posix(): path for path in _EXAMPLES_DIR.rglob("*.yaml")}
+    if name not in examples:
+        return "Available examples:\n" + "\n".join(sorted(examples))
+    return examples[name].read_text(encoding="utf-8")
+
+
+def validate_workflow_yaml(
+    yaml_text: Annotated[str, ParamMeta(description="The complete workflow YAML document")],
+) -> str:
+    """Validate a workflow YAML with the same check the save route uses. Returns ``OK`` or the list of errors to fix."""
+    from check.check import check_config  # deferred: function modules load while the server is importing
+
+    fenced = _YAML_FENCE.match(yaml_text)
+    if fenced:
+        yaml_text = fenced.group(1)
+    try:
+        data = yaml.safe_load(yaml_text)
+    except yaml.YAMLError as exc:
+        return f"YAML syntax error: {exc}"
+    errors = check_config(data)
+    if errors:
+        return errors
+    problems = []
+    if _SECRET.search(yaml_text):
+        problems.append("- the YAML contains what looks like an API key; remove it")
+    for node in _agent_nodes(data):
+        config = node.get("config") if isinstance(node.get("config"), dict) else {}
+        for field, placeholder in _AGENT_PLACEHOLDERS.items():
+            if config.get(field) != placeholder:
+                problems.append(f"- agent node '{node.get('id')}': config.{field} must be exactly {placeholder}")
+    return "\n".join(problems) or "OK"
diff --git a/tests/test_workflow_designer.py b/tests/test_workflow_designer.py
new file mode 100644
index 0000000000..a9110fbfd3
--- /dev/null
+++ b/tests/test_workflow_designer.py
@@ -0,0 +1,51 @@
+"""Tools and edge processor behind yaml_instance/workflow_designer.yaml (no model calls)."""
+
+from pathlib import Path
+
+import runtime.sdk  # noqa: F401  # loads runtime before check.check (import order the server uses)
+from check.check import load_config
+from functions.edge_processor.workflow_design import extract_validated_workflow
+from functions.function_calling.workflow_design import (
+    read_example_workflow,
+    read_node_doc,
+    validate_workflow_yaml,
+)
+
+DESIGNER = Path(__file__).resolve().parents[1] / "yaml_instance" / "workflow_designer.yaml"
+
+
+def test_designer_workflow_loads_and_passes_its_own_validator() -> None:
+    load_config(DESIGNER, vars_override={"BASE_URL": "http://x", "API_KEY": "x"})
+    assert validate_workflow_yaml(DESIGNER.read_text()) == "OK"
+
+
+def test_validator_rejects_embedded_credentials() -> None:
+    leaked = (
+        DESIGNER.read_text()
+        .replace("${API_KEY}", "sk-" + "a" * 24)
+        .replace("${BASE_URL}", "https://api.openai.com/v1")
+    )
+    verdict = validate_workflow_yaml(leaked)
+    assert "looks like an API key" in verdict
+    assert "config.base_url must be exactly ${BASE_URL}" in verdict
+    assert "sk-" not in verdict  # the secret is never echoed back to the model
+
+
+def test_validator_reports_schema_and_syntax_errors() -> None:
+    assert validate_workflow_yaml("graph: {nodes: 3}") != "OK"
+    assert validate_workflow_yaml("a: [").startswith("YAML syntax error")
+
+
+def test_readers_only_serve_listed_files() -> None:
+    assert read_example_workflow("../pyproject.toml").startswith("Available examples:")
+    assert "demo_loop_counter.yaml" in read_example_workflow("")
+    assert read_node_doc("../../README").startswith("Unknown node type")
+    assert read_node_doc("agent").startswith("#")
+
+
+def test_processor_passes_valid_yaml_and_flags_invalid() -> None:
+    good = DESIGNER.read_text()  # its role prompt contains ``` fences of its own
+    assert extract_validated_workflow(f"Here it is:\n```yaml\n{good}```\nDone.", {}) == good
+    flagged = extract_validated_workflow("```yaml\ngraph: {nodes: 3}\n```", {})
+    assert flagged.startswith("# VALIDATION FAILED")
+    assert flagged.rstrip().endswith("graph: {nodes: 3}")
diff --git a/yaml_instance/workflow_designer.yaml b/yaml_instance/workflow_designer.yaml
new file mode 100644
index 0000000000..328f434894
--- /dev/null
+++ b/yaml_instance/workflow_designer.yaml
@@ -0,0 +1,55 @@
+version: 0.4.0
+vars:
+  MODEL_NAME: gpt-4o
+graph:
+  id: workflow_designer
+  description: Turns a plain-language description of a multi-agent system into a validated DevAll workflow YAML.
+  is_majority_voting: false
+  start:
+    - Designer
+  end:
+    - Workflow YAML
+  nodes:
+    - id: Designer
+      type: agent
+      description: Writes the workflow YAML and validates it until it passes.
+      config:
+        provider: openai
+        base_url: ${BASE_URL}
+        api_key: ${API_KEY}
+        name: ${MODEL_NAME}
+        role: |
+          You design DevAll multi-agent workflows. The user describes the system they want; you return one complete workflow YAML that DevAll accepts.
+
+          Process:
+          1. Call get_workflow_authoring_guide once. It is the reference for the YAML structure, every node type, edges, conditions, edge processors and memory.
+          2. Call read_node_doc for each node type you plan to use, and read_example_workflow (empty name lists the examples) for one or two examples close to the request. Copy their structure rather than guessing field names.
+          3. Write the workflow, then call validate_workflow_yaml with the full YAML. This step is mandatory. If it returns errors, fix every one and validate again until it returns OK.
+
+          Rules for the workflow you write:
+          - Start with `version: 0.4.0`, a root `vars:` block with `MODEL_NAME: gpt-4o`, and a `graph:` with a unique snake_case `id`, a one-line `description`, `start`, `end`, `nodes` and `edges`.
+          - Agent nodes use `provider: openai` and a specific `role` prompt. Their `base_url` and `api_key` must be the environment placeholders for BASE_URL and API_KEY, and the model `name` the placeholder for MODEL_NAME, written exactly as in the bundled examples. Never write real keys or URLs; validate_workflow_yaml tells you the exact form if one is wrong.
+          - Use the smallest graph that does the job. Add human, loop, condition or memory features only when the request needs them; a loop always needs an exit (loop_counter or a condition).
+          - Use only function tools that appear in the bundled examples.
+
+          Final answer: only the workflow that validate_workflow_yaml last returned OK for, inside a single ```yaml code block, with nothing before or after it. Your answer is validated again; anything else is rejected.
+        tooling:
+          - type: function
+            config:
+              auto_load: true
+              tools:
+                - name: get_workflow_authoring_guide
+                - name: read_node_doc
+                - name: read_example_workflow
+                - name: validate_workflow_yaml
+    - id: Workflow YAML
+      type: passthrough
+      description: Holds the generated YAML, re-validated; validation errors become leading comments.
+      config: {}
+  edges:
+    - from: Designer
+      to: Workflow YAML
+      process:
+        type: function
+        config:
+          name: extract_validated_workflow