ai-model-form

ai-model-form

A Vue 3 AI model configuration form component backed by an Express middleware.
Supports adding, testing, and managing AI model providers (OpenAI-compatible).

Features

• Add/edit AI model configurations (endpoint, model name, display name, API Key)
• Built-in provider presets (OpenAI, DeepSeek, MiniMax, Ollama, and more)
• Auto-fetch model list from any OpenAI-compatible /v1/models endpoint
• Test API connection before saving
• Packaged as an npm library — drop into any Vue 3 project

Volcengine Ark plans

Agent Plan and Coding Plan share the ark.<region>.volces.com host but not the path — a wrong path returns 404:

Both plan endpoints are OpenAI-compatible (POST /chat/completions, Authorization: Bearer) and only accept models inside your subscription — not self-created endpoint IDs. Their /models route returns the full Ark catalogue rather than the plan's model list, so this package ships a curated list instead of fetching it. A model outside the plan comes back as 404 UnsupportedModel, which the form reports as "not in this plan" rather than "model not found".

Tech Stack

Quick Start

# Install all dependencies
npm install
npm install --prefix client
npm install --prefix server

# Start dev servers (both at once)
npm run dev

• Frontend: http://localhost:7432
• Backend API: http://localhost:9271/api/ai-model

Usage as a Library

Install

npm install ai-model-form

Frontend (Vue 3)

<script setup>
import { AddModelForm } from 'ai-model-form/client'
import 'ai-model-form/dist/ai-model-form.css'

function onSave(model) {
  console.log('Saved:', model)
}
</script>

<template>
  <AddModelForm api-base="/api/ai-model" @save="onSave" @cancel="() => {}" />
</template>

Backend (Express)

import { createAiModelMiddleware } from 'ai-model-form/server'

app.use('/api', createAiModelMiddleware())

API Reference

<AddModelForm> Props

<AddModelForm> Events

Backend Middleware Routes

License

MIT © xuze