promptlineapp 1.4.0 → 1.5.0

package/README.md

@@ -1,136 +1,74 @@
-# promptlineapp
+# create-promptline-app
 
-Create AI-powered applications with [PromptLine](https://promptlineops.com) - no configuration needed.
+Create AI-powered apps for the [PromptLine Marketplace](https://promptlineops.com).
 
 ## Quick Start
 
 ```bash
-npx promptlineapp my-app
+npx create-promptline-app my-app
 cd my-app
+npm run dev
 ```
 
-That's it! You now have a fully-configured PromptLine package ready for development.
+## Local Development
 
-## Usage
+### 1. Configure your endpoints
 
-### Interactive Mode (Recommended)
+Open **http://localhost:5173/_dev** and add your PromptLine endpoints:
 
-```bash
-npx promptlineapp my-app
-```
-
-You'll be prompted for:
-- Display name
-- Description
-- Brand color
-- Contact email
-- Template preset
-
-### Non-Interactive Mode
-
-```bash
-npx promptlineapp my-app --yes
-npx promptlineapp my-app --preset full-app -y
-```
+- **Alias**: name used in code (e.g., `chatbot`, `traduction`)
+- **URL**: endpoint URL from Creator Studio
+- **API Key**: your API key (`sk_org_...` or `sk_ws_...`)
 
-## Template Presets
+Click "Check Health" to verify, then "Add Endpoint".
 
-| Preset | Description | Best For |
-|--------|-------------|----------|
-| `full-app` | Complete app with landing, dashboard, settings & AI | SaaS products, internal tools (default) |
-| `api` | Minimal frontend, backend-focused | API services, integrations |
+### 2. Use in your code
 
-```bash
-npx promptlineapp my-app --preset full-app
-npx promptlineapp my-api --preset api
-```
-
-## What You Get
-
-```
-my-app/
-├── public/           # Public pages (no auth required)
-│   └── index.tsx     # Landing page
-├── private/          # Protected pages (auth required)
-│   ├── dashboard.tsx # Dashboard
-│   └── settings.tsx  # Settings
-├── backend/          # Custom API endpoints (FastAPI)
-│   └── api.py
-├── assets/           # Static files
-├── promptline.yaml   # Package configuration
-├── README.md
-└── .gitignore
-```
-
-## Configuration
-
-Your app is configured via `promptline.yaml`:
-
-```yaml
-name: "My App"
-version: "1.0.0"
-
-# Connect AI prompts/agents
-ai_sources:
-  main:
-    type: prompt
-    source_id: null  # Set in Creator Studio
-
-# Define data models
-collections:
-  submissions:
-    fields:
-      - name: email
-        type: email
-        required: true
-
-# Instance variables
-variables:
-  app_name:
-    type: string
-    default: "My App"
-```
-
-## SDK Usage
-
-In your React pages:
-
-```tsx
+```jsx
 import { usePromptLine } from '@promptline/sdk'
 
-export default function MyPage() {
-  const { config, submitForm, callAI, user } = usePromptLine()
-
-  // Access instance config
-  const appName = config.app_name
+function MyComponent() {
+  const { execute, isConfigured } = usePromptLine('chatbot')
 
-  // Submit data
-  await submitForm('submissions', { email: 'user@example.com' })
+  const handleClick = async () => {
+    const result = await execute({ text: 'Hello!' })
+    console.log(result.response)
+  }
 
-  // Call AI
-  const result = await callAI('main', { text: 'Hello!' })
+  if (!isConfigured) {
+    return <p>Configure 'chatbot' at <a href="/_dev">/_dev</a></p>
+  }
 
-  return <h1 style={{ color: config.primary_color }}>{appName}</h1>
+  return <button onClick={handleClick}>Ask AI</button>
 }
 ```
 
-## Deployment
+### 3. Multiple endpoints
 
-1. **Upload** - Zip your package and upload to [PromptLine Creator Studio](https://app.promptlineops.com/apps/creator)
-2. **Configure** - Connect your AI sources and set variables
-3. **Publish** - Deploy to your users or the App Store
+```jsx
+const { execute: chat } = usePromptLine('chatbot')
+const { execute: translate } = usePromptLine('traduction')
 
-## Documentation
-
-- [Package Development Guide](https://docs.promptlineops.com/packages)
-- [SDK Reference](https://docs.promptlineops.com/sdk)
-- [API Endpoints](https://docs.promptlineops.com/packages/backend)
+// Use them independently
+const chatResult = await chat({ text: 'Hello' })
+const translatedResult = await translate({ text: 'Bonjour', target: 'en' })
+```
 
-## Requirements
+## Project Structure
 
-- Node.js 16+
-- npm or yarn
+```
+my-app/
+├── public/           # Public pages
+├── private/          # Auth-protected pages
+├── backend/          # Custom API (FastAPI)
+├── dev/              # Local dev tools (not deployed)
+│   ├── sdk-mock.jsx  # SDK for local testing
+│   └── dev-admin.jsx # /_dev page
+└── promptline.yaml   # App configuration
+```
 
-## License
+## Deployment
 
-MIT - [PromptLine](https://promptlineops.com)
+1. Click "Download Manifest" in `/_dev` to get `promptline.config.json`
+2. Upload your app to [Creator Studio](https://app.promptlineops.com)
+3. Bind your endpoints and publish

package/bin/cli.js

@@ -1066,6 +1066,9 @@ Thumbs.db
 import react from '@vitejs/plugin-react'
 import path from 'path'
 
+// Internal PromptLine dev mode: set PROMPTLINE_LOCAL_DEV=true to enable local API
+const isLocalDev = process.env.PROMPTLINE_LOCAL_DEV === 'true'
+
 export default defineConfig({
   plugins: [react()],
   resolve: {
@@ -1076,16 +1079,19 @@ export default defineConfig({
   server: {
     port: 5173,
     host: 'localhost',
-    open: true,
+    open: '/_dev',
     strictPort: false,
     proxy: {
-      // Proxy API calls to avoid CORS issues in development
-      '/api/promptline-local': {
-        target: 'https://app.local.promptlineops.com',
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\\/api\\/promptline-local/, '/api/v1/live'),
-        secure: true
-      },
+      // Local API first (more specific path - requires PROMPTLINE_LOCAL_DEV=true)
+      ...(isLocalDev ? {
+        '/api/promptline-local': {
+          target: 'https://app.local.promptlineops.com',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\\/api\\/promptline-local/, '/api/v1/live'),
+          secure: false
+        }
+      } : {}),
+      // Production API (marketplace developers)
       '/api/promptline': {
         target: 'https://app.promptlineops.com',
         changeOrigin: true,
@@ -1097,7 +1103,7 @@ export default defineConfig({
 })
 `,
 
-  // SDK mock for local development with real API support
+  // SDK mock for local development with multi-endpoint support
   sdkMock: (config) => {
     const mockConfig = {
       app_name: config.displayName,
@@ -1107,10 +1113,16 @@ export default defineConfig({
     return `/**
  * PromptLine SDK Mock for Local Development
  * Supports real API calls when configured via /_dev page
+ *
+ * Usage:
+ *   const { execute } = usePromptLine('chatbot')
+ *   const result = await execute({ text: 'Hello!' })
  */
-import React, { createContext, useContext, useState } from 'react'
+import React, { createContext, useContext, useState, useMemo } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 
+const ENDPOINTS_STORAGE_KEY = 'promptline_dev_endpoints'
+
 const mockConfig = ${JSON.stringify(mockConfig, null, 2)}
 
 const mockUser = {
@@ -1119,21 +1131,39 @@ const mockUser = {
   name: 'Dev User'
 }
 
-// Get PromptLine API config from localStorage
-function getAPIConfig() {
+// Get all configured endpoints from localStorage
+function getEndpoints() {
   try {
-    return JSON.parse(localStorage.getItem('promptline_dev_config') || 'null')
-  } catch { return null }
+    return JSON.parse(localStorage.getItem(ENDPOINTS_STORAGE_KEY) || '[]')
+  } catch { return [] }
 }
 
-// Call PromptLine API (sync mode)
-async function callPromptLineAPI(config, input) {
-  const { endpoint, apiKey } = config
+// Get a specific endpoint by alias
+function getEndpoint(alias) {
+  const endpoints = getEndpoints()
+  return endpoints.find(ep => ep.alias === alias)
+}
 
-  // Add ?mode=sync for synchronous response
-  const url = endpoint.includes('?') ? endpoint + '&mode=sync' : endpoint + '?mode=sync'
+// Convert PromptLine URLs to use local proxy
+function toProxyUrl(url) {
+  const localMatch = url.match(/https?:\\/\\/app\\.local\\.promptlineops\\.com\\/api\\/v1\\/live\\/([^?]+)/)
+  if (localMatch) {
+    return '/api/promptline-local/' + localMatch[1]
+  }
+  const prodMatch = url.match(/https?:\\/\\/app\\.promptlineops\\.com\\/api\\/v1\\/live\\/([^?]+)/)
+  if (prodMatch) {
+    return '/api/promptline/' + prodMatch[1]
+  }
+  return url
+}
+
+// Call PromptLine API (sync mode)
+async function callPromptLineAPI(endpoint, input, variables = {}) {
+  const { url, apiKey } = endpoint
+  const proxyUrl = toProxyUrl(url)
+  const fullUrl = proxyUrl + '?mode=sync'
 
-  const res = await fetch(url, {
+  const res = await fetch(fullUrl, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -1141,25 +1171,28 @@ async function callPromptLineAPI(config, input) {
     },
     body: JSON.stringify({
       input: typeof input === 'string' ? { text: input } : input,
-      variables: {}
+      variables
     })
   })
+
   const data = await res.json()
-  if (!res.ok || data.error) throw new Error(data.detail || data.error?.message || data.error || res.statusText)
-  // Sync mode returns data.data.output or data.data.response
+  if (!res.ok || data.error) {
+    throw new Error(data.detail || data.error?.message || data.error || res.statusText)
+  }
+
   const output = data.data?.output || data.data?.response || data.output || data.response
-  return { response: typeof output === 'string' ? output : JSON.stringify(output) }
+  return {
+    response: typeof output === 'string' ? output : JSON.stringify(output),
+    data: data.data || data
+  }
 }
 
 const PromptLineContext = createContext(null)
 
 export function PromptLineProvider({ children }) {
-  const [isLoading, setIsLoading] = useState(false)
-
   const value = {
     config: mockConfig,
     user: mockUser,
-    isLoading,
     submitForm: async (collection, data) => {
       console.log('[PromptLine SDK] submitForm:', collection, data)
       alert('Form submitted to "' + collection + '"\\n\\nData: ' + JSON.stringify(data, null, 2))
@@ -1168,23 +1201,6 @@ export function PromptLineProvider({ children }) {
     fetchCollection: async (collection, query) => {
       console.log('[PromptLine SDK] fetchCollection:', collection, query)
       return { items: [], total: 0 }
-    },
-    callAI: async (sourceId, input) => {
-      console.log('[PromptLine SDK] callAI:', sourceId, input)
-      const config = getAPIConfig()
-
-      if (config && config.endpoint) {
-        console.log('[PromptLine SDK] Using PromptLine API:', config.endpoint)
-        try {
-          return await callPromptLineAPI(config, input)
-        } catch (err) {
-          console.error('[PromptLine SDK] API Error:', err)
-          return { response: '[API Error] ' + err.message, error: true }
-        }
-      }
-
-      console.log('[PromptLine SDK] No config found, using mock. Configure at /_dev')
-      return { response: '[Mock] Configure your PromptLine endpoint at /_dev' }
     }
   }
 
@@ -1195,48 +1211,105 @@ export function PromptLineProvider({ children }) {
   )
 }
 
-export function usePromptLine() {
+export function usePromptLine(alias) {
   const context = useContext(PromptLineContext)
-  if (!context) {
-    return {
-      config: mockConfig,
-      user: mockUser,
-      isLoading: false,
-      submitForm: async (c, d) => { console.log('[PromptLine SDK] submitForm:', c, d); return { success: true } },
-      fetchCollection: async (c, q) => { console.log('[PromptLine SDK] fetchCollection:', c, q); return { items: [], total: 0 } },
-      callAI: async (s, i) => { console.log('[PromptLine SDK] callAI:', s, i); return { response: '[Mock] Configure at /_dev' } }
+
+  const endpointData = useMemo(() => {
+    if (!alias) return null
+    return getEndpoint(alias)
+  }, [alias])
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const execute = async (input, variables = {}) => {
+    if (!endpointData) {
+      console.warn('[PromptLine SDK] Endpoint "' + alias + '" not configured. Go to /_dev to configure it.')
+      return {
+        response: '[Not Configured] Endpoint "' + alias + '" not found. Configure it at /_dev',
+        error: true
+      }
+    }
+
+    console.log('[PromptLine SDK] Calling endpoint "' + alias + '":', endpointData.url)
+    setIsLoading(true)
+
+    try {
+      const result = await callPromptLineAPI(endpointData, input, variables)
+      return result
+    } catch (err) {
+      console.error('[PromptLine SDK] Error calling "' + alias + '":', err)
+      return { response: '[API Error] ' + err.message, error: true }
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return {
+    execute,
+    isLoading,
+    isConfigured: !!endpointData,
+    endpointInfo: endpointData?.info || null,
+    config: context?.config || mockConfig,
+    user: context?.user || mockUser,
+    submitForm: context?.submitForm || (async () => ({ success: true })),
+    fetchCollection: context?.fetchCollection || (async () => ({ items: [], total: 0 })),
+    callAI: async (sourceIdOrInput, inputOrVariables) => {
+      let targetAlias = alias
+      let input = sourceIdOrInput
+      if (typeof sourceIdOrInput === 'string' && typeof inputOrVariables === 'object') {
+        targetAlias = sourceIdOrInput
+        input = inputOrVariables
+      }
+      const ep = getEndpoint(targetAlias) || getEndpoints()[0]
+      if (!ep) {
+        return { response: '[Not Configured] No endpoints configured. Go to /_dev', error: true }
+      }
+      try {
+        return await callPromptLineAPI(ep, input)
+      } catch (err) {
+        return { response: '[API Error] ' + err.message, error: true }
+      }
     }
   }
-  return context
+}
+
+export function usePromptLineEndpoints() {
+  return useMemo(() => getEndpoints(), [])
 }
 
 export const Link = ({ to, children, ...props }) => (
   <RouterLink to={to} {...props}>{children}</RouterLink>
 )
 
-export default { usePromptLine, PromptLineProvider, Link }
+export default { usePromptLine, usePromptLineEndpoints, PromptLineProvider, Link }
 `},
 
-  // Dev admin page for configuring PromptLine endpoint
+  // Dev admin page for configuring PromptLine endpoints (multi-endpoint)
   devAdmin: () => `/**
- * PromptLine Dev Admin - Endpoint Configuration
+ * PromptLine Dev Admin - Multi-Endpoint Configuration
  *
  * This page is ONLY for local development.
- * Configure your PromptLine endpoint here to test with real API.
+ * Configure your PromptLine endpoints here to test with real API.
  *
  * NEVER commit API keys to git!
  */
 import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 
+const STORAGE_KEY = 'promptline_dev_endpoints'
+
 export default function DevAdminPage() {
-  const [endpoint, setEndpoint] = useState('')
-  const [apiKey, setApiKey] = useState('')
-  const [saved, setSaved] = useState(false)
+  const [endpoints, setEndpoints] = useState([])
+  const [formAlias, setFormAlias] = useState('')
+  const [formUrl, setFormUrl] = useState('')
+  const [formApiKey, setFormApiKey] = useState('')
+  const [formInfo, setFormInfo] = useState(null)
+  const [formStatus, setFormStatus] = useState('')
+  const [editingIndex, setEditingIndex] = useState(-1)
+  const [selectedEndpoint, setSelectedEndpoint] = useState('')
   const [testInput, setTestInput] = useState('Hello! What is 2+2?')
   const [testResult, setTestResult] = useState('')
   const [testing, setTesting] = useState(false)
-  const [status, setStatus] = useState('') // 'connected' | 'error' | 'testing' | ''
   const [logs, setLogs] = useState([])
 
   const addLog = (type, message, details = null) => {
@@ -1245,114 +1318,145 @@ export default function DevAdminPage() {
   }
 
   useEffect(() => {
-    const config = JSON.parse(localStorage.getItem('promptline_dev_config') || 'null')
-    if (config) {
-      setEndpoint(config.endpoint || '')
-      setApiKey(config.apiKey || '')
-      setSaved(true)
-    }
+    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
+    setEndpoints(saved)
+    if (saved.length > 0) setSelectedEndpoint(saved[0].alias)
   }, [])
 
-  const saveConfig = () => {
-    if (!endpoint) return
-    const config = { endpoint, apiKey }
-    localStorage.setItem('promptline_dev_config', JSON.stringify(config))
-    setSaved(true)
-    addLog('info', 'Configuration saved')
+  const saveEndpoints = (newEndpoints) => {
+    setEndpoints(newEndpoints)
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(newEndpoints))
+    generateManifest(newEndpoints)
+    addLog('info', 'Saved ' + newEndpoints.length + ' endpoint(s)')
   }
 
-  const clearConfig = () => {
-    localStorage.removeItem('promptline_dev_config')
-    setEndpoint('')
-    setApiKey('')
-    setSaved(false)
-    setStatus('')
-    addLog('info', 'Configuration cleared')
+  const generateManifest = (eps) => {
+    const manifest = { name: 'my-promptline-app', version: '1.0.0', endpoints: {} }
+    eps.forEach(ep => {
+      manifest.endpoints[ep.alias] = {
+        name: ep.info?.name || ep.alias,
+        description: ep.info?.description || '',
+        type: ep.info?.endpoint_type || 'prompt',
+        required_variables: ep.info?.required_variables || []
+      }
+    })
+    localStorage.setItem('promptline_manifest', JSON.stringify(manifest, null, 2))
   }
 
-  // Convert PromptLine URLs to use local proxy (avoids CORS in development)
   const toProxyUrl = (url) => {
-    // Match app.local.promptlineops.com (local dev environment)
     const localMatch = url.match(/https?:\\/\\/app\\.local\\.promptlineops\\.com\\/api\\/v1\\/live\\/([^?]+)/)
-    if (localMatch) {
-      return '/api/promptline-local/' + localMatch[1]
-    }
-    // Match app.promptlineops.com (production environment)
+    if (localMatch) return '/api/promptline-local/' + localMatch[1]
     const prodMatch = url.match(/https?:\\/\\/app\\.promptlineops\\.com\\/api\\/v1\\/live\\/([^?]+)/)
-    if (prodMatch) {
-      return '/api/promptline/' + prodMatch[1]
-    }
-    return url // Non-PromptLine URLs pass through unchanged
+    if (prodMatch) return '/api/promptline/' + prodMatch[1]
+    return url
   }
 
-  const testConnection = async () => {
-    if (!endpoint) return
-    setStatus('testing')
-    const proxyUrl = toProxyUrl(endpoint)
-    const url = proxyUrl.includes('?') ? proxyUrl + '&mode=sync' : proxyUrl + '?mode=sync'
-    addLog('info', 'Testing connection...', { endpoint: url, original: endpoint })
-
-    const startTime = Date.now()
+  const checkHealth = async () => {
+    if (!formUrl || !formApiKey) return
+    setFormStatus('checking')
+    const proxyUrl = toProxyUrl(formUrl)
+    addLog('info', 'Checking health: ' + (formAlias || 'new endpoint'))
     try {
-      const res = await fetch(url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...(apiKey ? { 'X-API-Key': apiKey } : {})
-        },
-        body: JSON.stringify({ input: { text: 'test' }, variables: {} })
-      })
-      const duration = Date.now() - startTime
+      const res = await fetch(proxyUrl + '/isAlive', { method: 'GET', headers: { 'X-API-Key': formApiKey } })
+      const data = await res.json().catch(() => ({}))
+      if (res.ok && data.alive === true) {
+        setFormStatus('valid')
+        addLog('success', 'Endpoint is alive')
+      } else {
+        setFormStatus('error')
+        addLog('error', 'Health check failed: ' + res.status, data)
+      }
+    } catch (err) {
+      setFormStatus('error')
+      addLog('error', 'Network error', { message: err.message })
+    }
+  }
 
+  const fetchInfo = async () => {
+    if (!formUrl || !formApiKey) return
+    const proxyUrl = toProxyUrl(formUrl)
+    addLog('info', 'Fetching info: ' + (formAlias || 'new endpoint'))
+    try {
+      const res = await fetch(proxyUrl + '/info', { method: 'GET', headers: { 'X-API-Key': formApiKey } })
+      const data = await res.json().catch(() => ({}))
       if (res.ok) {
-        setStatus('connected')
-        addLog('success', 'Connected (' + duration + 'ms)', { status: res.status })
+        setFormInfo(data)
+        addLog('success', 'Info retrieved', data)
       } else {
-        const data = await res.json().catch(() => ({}))
-        setStatus('error')
-        addLog('error', res.status + ' ' + res.statusText + ' (' + duration + 'ms)', data)
+        addLog('error', 'Info fetch failed: ' + res.status, data)
       }
     } catch (err) {
-      const duration = Date.now() - startTime
-      setStatus('error')
-      addLog('error', 'Network error (' + duration + 'ms)', {
-        message: err.message,
-        hint: err.message.includes('Failed to fetch') ? 'CORS issue - server needs Access-Control-Allow-Origin header' : null
-      })
+      addLog('error', 'Network error', { message: err.message })
+    }
+  }
+
+  const saveEndpoint = () => {
+    if (!formAlias || !formUrl) {
+      addLog('error', 'Alias and URL are required')
+      return
+    }
+    const existingIndex = endpoints.findIndex(ep => ep.alias === formAlias)
+    if (existingIndex !== -1 && existingIndex !== editingIndex) {
+      addLog('error', 'Alias "' + formAlias + '" already exists')
+      return
     }
+    const newEndpoint = { alias: formAlias, url: formUrl, apiKey: formApiKey, info: formInfo, status: formStatus === 'valid' ? 'valid' : 'unchecked' }
+    let newEndpoints = editingIndex >= 0 ? [...endpoints] : [...endpoints, newEndpoint]
+    if (editingIndex >= 0) newEndpoints[editingIndex] = newEndpoint
+    saveEndpoints(newEndpoints)
+    clearForm()
+    if (!selectedEndpoint) setSelectedEndpoint(formAlias)
+  }
+
+  const editEndpoint = (index) => {
+    const ep = endpoints[index]
+    setFormAlias(ep.alias)
+    setFormUrl(ep.url)
+    setFormApiKey(ep.apiKey)
+    setFormInfo(ep.info)
+    setFormStatus(ep.status === 'valid' ? 'valid' : '')
+    setEditingIndex(index)
+  }
+
+  const deleteEndpoint = (index) => {
+    const ep = endpoints[index]
+    const newEndpoints = endpoints.filter((_, i) => i !== index)
+    saveEndpoints(newEndpoints)
+    if (selectedEndpoint === ep.alias) setSelectedEndpoint(newEndpoints[0]?.alias || '')
+    if (editingIndex === index) clearForm()
+  }
+
+  const clearForm = () => {
+    setFormAlias('')
+    setFormUrl('')
+    setFormApiKey('')
+    setFormInfo(null)
+    setFormStatus('')
+    setEditingIndex(-1)
   }
 
   const testAI = async () => {
-    if (!endpoint) return
+    const ep = endpoints.find(e => e.alias === selectedEndpoint)
+    if (!ep) return
     setTesting(true)
     setTestResult('')
-    const proxyUrl = toProxyUrl(endpoint)
-    const url = proxyUrl.includes('?') ? proxyUrl + '&mode=sync' : proxyUrl + '?mode=sync'
-    addLog('request', 'POST ' + url, { input: testInput })
-
-    const startTime = Date.now()
+    const proxyUrl = toProxyUrl(ep.url)
+    addLog('request', 'POST ' + proxyUrl + ' (' + ep.alias + ')', { input: testInput })
     try {
-      const res = await fetch(url, {
+      const res = await fetch(proxyUrl + '?mode=sync', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          ...(apiKey ? { 'X-API-Key': apiKey } : {})
-        },
+        headers: { 'Content-Type': 'application/json', ...(ep.apiKey ? { 'X-API-Key': ep.apiKey } : {}) },
         body: JSON.stringify({ input: { text: testInput }, variables: {} })
       })
       const data = await res.json()
-      const duration = Date.now() - startTime
-
       if (!res.ok || data.error) {
-        const errMsg = data.detail || data.error?.message || data.error || res.statusText
-        setTestResult('Error: ' + errMsg)
-        addLog('error', res.status + ' (' + duration + 'ms)', data)
+        setTestResult('Error: ' + (data.detail || data.error?.message || data.error || res.statusText))
+        addLog('error', res.status + '', data)
       } else {
-        // Sync mode returns data.data.output or data.data.response
         const output = data.data?.output || data.data?.response || data.output || data.response || JSON.stringify(data, null, 2)
         const outputStr = typeof output === 'string' ? output : JSON.stringify(output, null, 2)
         setTestResult(outputStr)
-        addLog('success', '200 OK (' + duration + 'ms)', { output: outputStr.substring(0, 200) })
+        addLog('success', '200 OK', { output: outputStr.substring(0, 200) })
       }
     } catch (err) {
       setTestResult('Error: ' + err.message)
@@ -1361,17 +1465,39 @@ export default function DevAdminPage() {
     setTesting(false)
   }
 
+  const downloadManifest = () => {
+    const manifest = localStorage.getItem('promptline_manifest')
+    if (!manifest) return
+    const blob = new Blob([manifest], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'promptline.config.json'
+    a.click()
+    URL.revokeObjectURL(url)
+    addLog('info', 'Downloaded promptline.config.json')
+  }
+
   return (
     <div className="min-h-screen bg-gray-900 text-white p-8">
-      <div className="max-w-2xl mx-auto">
+      <div className="max-w-4xl mx-auto">
         <div className="flex items-center justify-between mb-8">
           <div>
             <h1 className="text-3xl font-bold text-yellow-400">/_dev</h1>
-            <p className="text-gray-400 mt-1">PromptLine Endpoint (Local Only)</p>
+            <p className="text-gray-400 mt-1">PromptLine Endpoints (Local Only)</p>
+          </div>
+          <div className="flex gap-3">
+            <button
+              onClick={downloadManifest}
+              disabled={endpoints.length === 0}
+              className="px-4 py-2 bg-indigo-600 rounded hover:bg-indigo-500 disabled:opacity-50"
+            >
+              Download Manifest
+            </button>
+            <Link to="/" className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600">
+              Back to App
+            </Link>
           </div>
-          <Link to="/" className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600">
-            Back to App
-          </Link>
         </div>
 
         <div className="bg-yellow-900/30 border border-yellow-600 rounded-lg p-4 mb-8">
@@ -1380,72 +1506,186 @@ export default function DevAdminPage() {
           </p>
         </div>
 
-        {/* Configuration */}
+        {/* Your Pages */}
         <div className="bg-gray-800 rounded-lg p-6 mb-8">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-xl font-semibold">Configuration</h2>
-            {saved && (
-              <span className="px-2 py-1 bg-green-600/30 text-green-400 text-xs rounded">Saved</span>
-            )}
+          <h2 className="text-xl font-semibold mb-4">Your Pages</h2>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <h3 className="text-sm font-medium text-gray-400 mb-2">Public</h3>
+              <div className="space-y-2">
+                <Link to="/" className="block px-3 py-2 bg-gray-700 rounded hover:bg-gray-600 text-blue-400">
+                  / → index.tsx
+                </Link>
+              </div>
+            </div>
+            <div>
+              <h3 className="text-sm font-medium text-gray-400 mb-2">Private (auth required)</h3>
+              <div className="space-y-2">
+                <Link to="/dashboard" className="block px-3 py-2 bg-gray-700 rounded hover:bg-gray-600 text-blue-400">
+                  /dashboard → dashboard.tsx
+                </Link>
+                <Link to="/settings" className="block px-3 py-2 bg-gray-700 rounded hover:bg-gray-600 text-blue-400">
+                  /settings → settings.tsx
+                </Link>
+              </div>
+            </div>
           </div>
+        </div>
+
+        {/* Saved Endpoints List */}
+        {endpoints.length > 0 && (
+          <div className="bg-gray-800 rounded-lg p-6 mb-8">
+            <h2 className="text-xl font-semibold mb-4">Configured Endpoints ({endpoints.length})</h2>
+            <div className="space-y-3">
+              {endpoints.map((ep, i) => (
+                <div key={ep.alias} className="flex items-center justify-between bg-gray-700 rounded p-4">
+                  <div className="flex items-center gap-4">
+                    <span className={
+                      ep.status === 'valid' ? 'text-green-400' :
+                      ep.status === 'error' ? 'text-red-400' :
+                      'text-gray-400'
+                    }>●</span>
+                    <div>
+                      <div className="font-medium text-white">{ep.alias}</div>
+                      <div className="text-sm text-gray-400">
+                        {ep.info?.name || 'No info'} • {ep.info?.endpoint_type || 'unknown'}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => editEndpoint(i)}
+                      className="px-3 py-1 bg-gray-600 rounded text-sm hover:bg-gray-500"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      onClick={() => deleteEndpoint(i)}
+                      className="px-3 py-1 bg-red-600/30 text-red-400 rounded text-sm hover:bg-red-600/50"
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Add/Edit Endpoint Form */}
+        <div className="bg-gray-800 rounded-lg p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">
+            {editingIndex >= 0 ? $BACKTICK}Edit Endpoint: \${formAlias}$BACKTICK : 'Add New Endpoint'}
+          </h2>
 
           <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-gray-400 mb-1">Alias (used in code)</label>
+              <input
+                value={formAlias}
+                onChange={(e) => setFormAlias(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ''))}
+                className="w-full bg-gray-700 p-3 rounded text-white font-mono text-sm"
+                placeholder="chatbot, traduction, analyse..."
+              />
+              <p className="text-xs text-gray-500 mt-1">Used in usePromptLine('{formAlias || 'alias'}')</p>
+            </div>
+
             <div>
               <label className="block text-sm text-gray-400 mb-1">Endpoint URL</label>
               <input
-                value={endpoint}
-                onChange={(e) => { setEndpoint(e.target.value); setSaved(false) }}
+                value={formUrl}
+                onChange={(e) => setFormUrl(e.target.value)}
                 className="w-full bg-gray-700 p-3 rounded text-white font-mono text-sm"
                 placeholder="https://app.promptlineops.com/api/v1/live/..."
               />
-              <p className="text-xs text-gray-500 mt-1">Copy the Live API URL from Creator Studio</p>
             </div>
 
             <div>
               <label className="block text-sm text-gray-400 mb-1">API Key</label>
               <input
                 type="password"
-                value={apiKey}
-                onChange={(e) => { setApiKey(e.target.value); setSaved(false) }}
+                value={formApiKey}
+                onChange={(e) => setFormApiKey(e.target.value)}
                 className="w-full bg-gray-700 p-3 rounded text-white font-mono text-sm"
-                placeholder="Your API key..."
+                placeholder="sk_org_... or sk_ws_..."
               />
-              <p className="text-xs text-gray-500 mt-1">Get your API key from /api-keys</p>
             </div>
 
-            <div className="flex gap-3">
+            <div className="flex gap-3 flex-wrap">
               <button
-                onClick={saveConfig}
-                disabled={!endpoint}
-                className="px-6 py-2 bg-indigo-600 rounded font-medium hover:bg-indigo-500 disabled:opacity-50"
+                onClick={checkHealth}
+                disabled={!formUrl || !formApiKey || formStatus === 'checking'}
+                className="px-4 py-2 bg-gray-600 rounded hover:bg-gray-500 disabled:opacity-50 flex items-center gap-2"
+              >
+                {formStatus === 'checking' ? 'Checking...' : 'Check Health'}
+                {formStatus === 'valid' && <span className="text-green-400">●</span>}
+                {formStatus === 'error' && <span className="text-red-400">●</span>}
+              </button>
+              <button
+                onClick={fetchInfo}
+                disabled={!formUrl || !formApiKey}
+                className="px-4 py-2 bg-gray-600 rounded hover:bg-gray-500 disabled:opacity-50"
               >
-                Save
+                Fetch Info
               </button>
               <button
-                onClick={testConnection}
-                disabled={!endpoint || status === 'testing'}
-                className="px-6 py-2 bg-gray-600 rounded font-medium hover:bg-gray-500 disabled:opacity-50 flex items-center gap-2"
+                onClick={saveEndpoint}
+                disabled={!formAlias || !formUrl}
+                className="px-6 py-2 bg-indigo-600 rounded font-medium hover:bg-indigo-500 disabled:opacity-50"
               >
-                {status === 'testing' ? 'Testing...' : 'Test Connection'}
-                {status === 'connected' && <span className="text-green-400">●</span>}
-                {status === 'error' && <span className="text-red-400">●</span>}
+                {editingIndex >= 0 ? 'Update' : 'Add Endpoint'}
               </button>
-              {saved && (
+              {(formAlias || formUrl || editingIndex >= 0) && (
                 <button
-                  onClick={clearConfig}
-                  className="px-4 py-2 bg-red-600/30 text-red-400 rounded hover:bg-red-600/50"
+                  onClick={clearForm}
+                  className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600"
                 >
-                  Clear
+                  Cancel
                 </button>
               )}
             </div>
           </div>
+
+          {/* Info Preview */}
+          {formInfo && (
+            <div className="mt-6 p-4 bg-gray-700 rounded">
+              <h3 className="font-medium mb-3 text-gray-300">Endpoint Info</h3>
+              <div className="grid grid-cols-2 gap-3 text-sm">
+                <div><span className="text-gray-400">Name:</span> <span className="text-white">{formInfo.name}</span></div>
+                <div><span className="text-gray-400">Status:</span> <span className={formInfo.status === 'active' ? 'text-green-400' : 'text-red-400'}>{formInfo.status}</span></div>
+                <div><span className="text-gray-400">Type:</span> <span className="text-white">{formInfo.endpoint_type}</span></div>
+                <div><span className="text-gray-400">Model:</span> <span className="text-white">{formInfo.ai_model}</span></div>
+                {formInfo.required_variables?.length > 0 && (
+                  <div className="col-span-2">
+                    <span className="text-gray-400">Variables:</span>
+                    <span className="ml-2">{formInfo.required_variables.map(v => (
+                      <span key={v} className="ml-1 px-2 py-0.5 bg-gray-600 rounded text-xs text-blue-300">{v}</span>
+                    ))}</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
         </div>
 
         {/* Test AI */}
-        {saved && (
+        {endpoints.length > 0 && (
           <div className="bg-gray-800 rounded-lg p-6 mb-8">
             <h2 className="text-xl font-semibold mb-4">Test AI</h2>
+
+            <div className="mb-4">
+              <label className="block text-sm text-gray-400 mb-1">Select Endpoint</label>
+              <select
+                value={selectedEndpoint}
+                onChange={(e) => setSelectedEndpoint(e.target.value)}
+                className="w-full bg-gray-700 p-3 rounded text-white"
+              >
+                {endpoints.map(ep => (
+                  <option key={ep.alias} value={ep.alias}>{ep.alias} - {ep.info?.name || 'Unknown'}</option>
+                ))}
+              </select>
+            </div>
+
             <textarea
               value={testInput}
               onChange={(e) => setTestInput(e.target.value)}
@@ -1455,7 +1695,7 @@ export default function DevAdminPage() {
             />
             <button
               onClick={testAI}
-              disabled={testing}
+              disabled={testing || !selectedEndpoint}
               className="px-6 py-2 bg-green-600 rounded font-medium hover:bg-green-500 disabled:opacity-50"
             >
               {testing ? 'Sending...' : 'Send Request'}
@@ -1470,7 +1710,7 @@ export default function DevAdminPage() {
         )}
 
         {/* Logs */}
-        <div className="bg-gray-800 rounded-lg p-6">
+        <div className="bg-gray-800 rounded-lg p-6 mb-8">
           <div className="flex items-center justify-between mb-4">
             <h2 className="text-xl font-semibold">Logs</h2>
             <button onClick={() => setLogs([])} className="px-3 py-1 bg-gray-700 rounded text-sm hover:bg-gray-600">
@@ -1505,13 +1745,18 @@ export default function DevAdminPage() {
         </div>
 
         {/* Usage */}
-        <div className="mt-8 p-6 bg-gray-800 rounded-lg">
+        <div className="bg-gray-800 rounded-lg p-6">
           <h2 className="text-xl font-semibold mb-4">Usage in Your Code</h2>
           <pre className="bg-gray-900 p-4 rounded text-sm overflow-x-auto">
-{$BACKTICK}const { callAI } = usePromptLine()
+{$BACKTICK}// Use specific endpoint by alias
+const { execute } = usePromptLine('\${endpoints[0]?.alias || 'chatbot'}')
+
+const result = await execute({ text: 'Hello!' })
+console.log(result.response)
 
-const result = await callAI('main', { text: 'Hello!' })
-console.log(result.response)$BACKTICK}
+// Multiple endpoints
+const { execute: chat } = usePromptLine('chatbot')
+const { execute: translate } = usePromptLine('traduction')$BACKTICK}
           </pre>
         </div>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "promptlineapp",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Create PromptLine applications with ease",
   "author": "PromptLine <support@promptlineops.com>",
   "license": "MIT",