diff --git a/crates/openfang-api/static/index_body.html b/crates/openfang-api/static/index_body.html
index 539f1aa29..97f6a262e 100644
--- a/crates/openfang-api/static/index_body.html
+++ b/crates/openfang-api/static/index_body.html
@@ -1154,12 +1154,9 @@ <h3>Create Agent</h3>
                     <div class="form-group">
                       <label>Provider</label>
                       <select class="form-select" x-model="spawnForm.provider">
-                        <option value="anthropic">Anthropic</option><option value="openai">OpenAI</option>
-                        <option value="groq">Groq</option><option value="ollama">Ollama</option>
-                        <option value="google">Google</option><option value="mistral">Mistral</option>
-                        <option value="xai">xAI</option><option value="deepseek">DeepSeek</option>
-                        <option value="cerebras">Cerebras</option><option value="sambanova">SambaNova</option>
-                        <option value="together">Together</option>
+                        <template x-for="p in spawnProviders" :key="p.id">
+                          <option :value="p.id" x-text="p.display_name"></option>
+                        </template>
                       </select>
                     </div>
                     <div class="form-group">
diff --git a/crates/openfang-api/static/js/pages/agents.js b/crates/openfang-api/static/js/pages/agents.js
index 86ecfaf3a..ccfe476b3 100644
--- a/crates/openfang-api/static/js/pages/agents.js
+++ b/crates/openfang-api/static/js/pages/agents.js
@@ -40,6 +40,7 @@ function agentsPage() {
     },
 
     // -- Multi-step wizard state --
+    spawnProviders: [],
     spawnStep: 1,
     spawnIdentity: { emoji: '', color: '#FF5C00', archetype: '' },
     selectedPreset: '',
@@ -395,6 +396,13 @@ function agentsPage() {
     },
 
     // ── Multi-step wizard navigation ──
+    async loadSpawnProviders() {
+      try {
+        var data = await OpenFangAPI.get('/api/providers');
+        this.spawnProviders = (data.providers || []);
+      } catch(e) { this.spawnProviders = []; }
+    },
+
     async openSpawnWizard() {
       this.showSpawnModal = true;
       this.spawnStep = 1;
@@ -407,6 +415,7 @@ function agentsPage() {
       this.spawnForm.model = 'llama-3.3-70b-versatile';
       this.spawnForm.systemPrompt = 'You are a helpful assistant.';
       this.spawnForm.profile = 'full';
+      await this.loadSpawnProviders();
       try {
         var res = await fetch('/api/status');
         if (res.ok) {