Feat/api server (#9855)

* feat: add api server

This reverts commit c76aa03566.

* update yarn.lock

* fix: correct import paths in ToolSettings component

Update import paths for PreprocessSettings and WebSearchSettings to reference correct locations in DocProcessSettings and WebSearchSettings directories.

* feat(settings): add API server settings link and route

* fix(auth): improve authorization handling and error responses

* feat(chat): enhance model validation and logging for chat completions
feat(models): improve logging for model retrieval and filtering
feat(utils): add model ID validation and support for OpenAI providers

* feat(api-server): refactor config loading and remove unused ToolSettings component

* refactor(ApiServerService): simplify config retrieval and improve error handling in ApiServerSettings

* fix(mcp): remove unnecessary await in listTools return statement

* refactor(ApiServerSettings): replace window.message with window.toast for notifications

---------

Co-authored-by: kangfenmao <kangfenmao@qq.com>

src/main/apiServer/app.ts

@@ -0,0 +1,128 @@
+import { loggerService } from '@main/services/LoggerService'
+import cors from 'cors'
+import express from 'express'
+import { v4 as uuidv4 } from 'uuid'
+
+import { authMiddleware } from './middleware/auth'
+import { errorHandler } from './middleware/error'
+import { setupOpenAPIDocumentation } from './middleware/openapi'
+import { chatRoutes } from './routes/chat'
+import { mcpRoutes } from './routes/mcp'
+import { modelsRoutes } from './routes/models'
+
+const logger = loggerService.withContext('ApiServer')
+
+const app = express()
+
+// Global middleware
+app.use((req, res, next) => {
+  const start = Date.now()
+  res.on('finish', () => {
+    const duration = Date.now() - start
+    logger.info(`${req.method} ${req.path} - ${res.statusCode} - ${duration}ms`)
+  })
+  next()
+})
+
+app.use((_req, res, next) => {
+  res.setHeader('X-Request-ID', uuidv4())
+  next()
+})
+
+app.use(
+  cors({
+    origin: '*',
+    allowedHeaders: ['Content-Type', 'Authorization'],
+    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
+  })
+)
+
+/**
+ * @swagger
+ * /health:
+ *   get:
+ *     summary: Health check endpoint
+ *     description: Check server status (no authentication required)
+ *     tags: [Health]
+ *     security: []
+ *     responses:
+ *       200:
+ *         description: Server is healthy
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 status:
+ *                   type: string
+ *                   example: ok
+ *                 timestamp:
+ *                   type: string
+ *                   format: date-time
+ *                 version:
+ *                   type: string
+ *                   example: 1.0.0
+ */
+app.get('/health', (_req, res) => {
+  res.json({
+    status: 'ok',
+    timestamp: new Date().toISOString(),
+    version: process.env.npm_package_version || '1.0.0'
+  })
+})
+
+/**
+ * @swagger
+ * /:
+ *   get:
+ *     summary: API information
+ *     description: Get basic API information and available endpoints
+ *     tags: [General]
+ *     security: []
+ *     responses:
+ *       200:
+ *         description: API information
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 name:
+ *                   type: string
+ *                   example: Cherry Studio API
+ *                 version:
+ *                   type: string
+ *                   example: 1.0.0
+ *                 endpoints:
+ *                   type: object
+ */
+app.get('/', (_req, res) => {
+  res.json({
+    name: 'Cherry Studio API',
+    version: '1.0.0',
+    endpoints: {
+      health: 'GET /health',
+      models: 'GET /v1/models',
+      chat: 'POST /v1/chat/completions',
+      mcp: 'GET /v1/mcps'
+    }
+  })
+})
+
+// API v1 routes with auth
+const apiRouter = express.Router()
+apiRouter.use(authMiddleware)
+apiRouter.use(express.json())
+// Mount routes
+apiRouter.use('/chat', chatRoutes)
+apiRouter.use('/mcps', mcpRoutes)
+apiRouter.use('/models', modelsRoutes)
+app.use('/v1', apiRouter)
+
+// Setup OpenAPI documentation
+setupOpenAPIDocumentation(app)
+
+// Error handling (must be last)
+app.use(errorHandler)
+
+export { app }

src/main/apiServer/config.ts

@@ -0,0 +1,65 @@
+import { ApiServerConfig } from '@types'
+import { v4 as uuidv4 } from 'uuid'
+
+import { loggerService } from '../services/LoggerService'
+import { reduxService } from '../services/ReduxService'
+
+const logger = loggerService.withContext('ApiServerConfig')
+
+const defaultHost = 'localhost'
+const defaultPort = 23333
+
+class ConfigManager {
+  private _config: ApiServerConfig | null = null
+
+  private generateApiKey(): string {
+    return `cs-sk-${uuidv4()}`
+  }
+
+  async load(): Promise<ApiServerConfig> {
+    try {
+      const settings = await reduxService.select('state.settings')
+      const serverSettings = settings?.apiServer
+      let apiKey = serverSettings?.apiKey
+      if (!apiKey || apiKey.trim() === '') {
+        apiKey = this.generateApiKey()
+        await reduxService.dispatch({
+          type: 'settings/setApiServerApiKey',
+          payload: apiKey
+        })
+      }
+      this._config = {
+        enabled: serverSettings?.enabled ?? false,
+        port: serverSettings?.port ?? defaultPort,
+        host: defaultHost,
+        apiKey: apiKey
+      }
+      return this._config
+    } catch (error: any) {
+      logger.warn('Failed to load config from Redux, using defaults:', error)
+      this._config = {
+        enabled: false,
+        port: defaultPort,
+        host: defaultHost,
+        apiKey: this.generateApiKey()
+      }
+      return this._config
+    }
+  }
+
+  async get(): Promise<ApiServerConfig> {
+    if (!this._config) {
+      await this.load()
+    }
+    if (!this._config) {
+      throw new Error('Failed to load API server configuration')
+    }
+    return this._config
+  }
+
+  async reload(): Promise<ApiServerConfig> {
+    return await this.load()
+  }
+}
+
+export const config = new ConfigManager()

src/main/apiServer/index.ts

@@ -0,0 +1,2 @@
+export { config } from './config'
+export { apiServer } from './server'

src/main/apiServer/middleware/auth.ts

@@ -0,0 +1,62 @@
+import crypto from 'crypto'
+import { NextFunction, Request, Response } from 'express'
+
+import { config } from '../config'
+
+export const authMiddleware = async (req: Request, res: Response, next: NextFunction) => {
+  const auth = req.header('Authorization') || ''
+  const xApiKey = req.header('x-api-key') || ''
+
+  // Fast rejection if neither credential header provided
+  if (!auth && !xApiKey) {
+    return res.status(401).json({ error: 'Unauthorized: missing credentials' })
+  }
+
+  let token: string | undefined
+
+  // Prefer Bearer if well‑formed
+  if (auth) {
+    const trimmed = auth.trim()
+    const bearerPrefix = /^Bearer\s+/i
+    if (bearerPrefix.test(trimmed)) {
+      const candidate = trimmed.replace(bearerPrefix, '').trim()
+      if (!candidate) {
+        return res.status(401).json({ error: 'Unauthorized: empty bearer token' })
+      }
+      token = candidate
+    }
+  }
+
+  // Fallback to x-api-key if token still not resolved
+  if (!token && xApiKey) {
+    if (!xApiKey.trim()) {
+      return res.status(401).json({ error: 'Unauthorized: empty x-api-key' })
+    }
+    token = xApiKey.trim()
+  }
+
+  if (!token) {
+    // At this point we had at least one header, but none yielded a usable token
+    return res.status(401).json({ error: 'Unauthorized: invalid credentials format' })
+  }
+
+  const { apiKey } = await config.get()
+
+  if (!apiKey) {
+    // If server not configured, treat as forbidden (or could be 500). Choose 403 to avoid leaking config state.
+    return res.status(403).json({ error: 'Forbidden' })
+  }
+
+  // Timing-safe compare when lengths match, else immediate forbidden
+  if (token.length !== apiKey.length) {
+    return res.status(403).json({ error: 'Forbidden' })
+  }
+
+  const tokenBuf = Buffer.from(token)
+  const keyBuf = Buffer.from(apiKey)
+  if (!crypto.timingSafeEqual(tokenBuf, keyBuf)) {
+    return res.status(403).json({ error: 'Forbidden' })
+  }
+
+  return next()
+}

src/main/apiServer/middleware/error.ts

@@ -0,0 +1,21 @@
+import { NextFunction, Request, Response } from 'express'
+
+import { loggerService } from '../../services/LoggerService'
+
+const logger = loggerService.withContext('ApiServerErrorHandler')
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const errorHandler = (err: Error, _req: Request, res: Response, _next: NextFunction) => {
+  logger.error('API Server Error:', err)
+
+  // Don't expose internal errors in production
+  const isDev = process.env.NODE_ENV === 'development'
+
+  res.status(500).json({
+    error: {
+      message: isDev ? err.message : 'Internal server error',
+      type: 'server_error',
+      ...(isDev && { stack: err.stack })
+    }
+  })
+}

src/main/apiServer/middleware/openapi.ts

@@ -0,0 +1,206 @@
+import { Express } from 'express'
+import swaggerJSDoc from 'swagger-jsdoc'
+import swaggerUi from 'swagger-ui-express'
+
+import { loggerService } from '../../services/LoggerService'
+
+const logger = loggerService.withContext('OpenAPIMiddleware')
+
+const swaggerOptions: swaggerJSDoc.Options = {
+  definition: {
+    openapi: '3.0.0',
+    info: {
+      title: 'Cherry Studio API',
+      version: '1.0.0',
+      description: 'OpenAI-compatible API for Cherry Studio with additional Cherry-specific endpoints',
+      contact: {
+        name: 'Cherry Studio',
+        url: 'https://github.com/CherryHQ/cherry-studio'
+      }
+    },
+    servers: [
+      {
+        url: 'http://localhost:23333',
+        description: 'Local development server'
+      }
+    ],
+    components: {
+      securitySchemes: {
+        BearerAuth: {
+          type: 'http',
+          scheme: 'bearer',
+          bearerFormat: 'JWT',
+          description: 'Use the API key from Cherry Studio settings'
+        }
+      },
+      schemas: {
+        Error: {
+          type: 'object',
+          properties: {
+            error: {
+              type: 'object',
+              properties: {
+                message: { type: 'string' },
+                type: { type: 'string' },
+                code: { type: 'string' }
+              }
+            }
+          }
+        },
+        ChatMessage: {
+          type: 'object',
+          properties: {
+            role: {
+              type: 'string',
+              enum: ['system', 'user', 'assistant', 'tool']
+            },
+            content: {
+              oneOf: [
+                { type: 'string' },
+                {
+                  type: 'array',
+                  items: {
+                    type: 'object',
+                    properties: {
+                      type: { type: 'string' },
+                      text: { type: 'string' },
+                      image_url: {
+                        type: 'object',
+                        properties: {
+                          url: { type: 'string' }
+                        }
+                      }
+                    }
+                  }
+                }
+              ]
+            },
+            name: { type: 'string' },
+            tool_calls: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: {
+                  id: { type: 'string' },
+                  type: { type: 'string' },
+                  function: {
+                    type: 'object',
+                    properties: {
+                      name: { type: 'string' },
+                      arguments: { type: 'string' }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        ChatCompletionRequest: {
+          type: 'object',
+          required: ['model', 'messages'],
+          properties: {
+            model: {
+              type: 'string',
+              description: 'The model to use for completion, in format provider:model-id'
+            },
+            messages: {
+              type: 'array',
+              items: { $ref: '#/components/schemas/ChatMessage' }
+            },
+            temperature: {
+              type: 'number',
+              minimum: 0,
+              maximum: 2,
+              default: 1
+            },
+            max_tokens: {
+              type: 'integer',
+              minimum: 1
+            },
+            stream: {
+              type: 'boolean',
+              default: false
+            },
+            tools: {
+              type: 'array',
+              items: {
+                type: 'object',
+                properties: {
+                  type: { type: 'string' },
+                  function: {
+                    type: 'object',
+                    properties: {
+                      name: { type: 'string' },
+                      description: { type: 'string' },
+                      parameters: { type: 'object' }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        Model: {
+          type: 'object',
+          properties: {
+            id: { type: 'string' },
+            object: { type: 'string', enum: ['model'] },
+            created: { type: 'integer' },
+            owned_by: { type: 'string' }
+          }
+        },
+        MCPServer: {
+          type: 'object',
+          properties: {
+            id: { type: 'string' },
+            name: { type: 'string' },
+            command: { type: 'string' },
+            args: {
+              type: 'array',
+              items: { type: 'string' }
+            },
+            env: { type: 'object' },
+            disabled: { type: 'boolean' }
+          }
+        }
+      }
+    },
+    security: [
+      {
+        BearerAuth: []
+      }
+    ]
+  },
+  apis: ['./src/main/apiServer/routes/*.ts', './src/main/apiServer/app.ts']
+}
+
+export function setupOpenAPIDocumentation(app: Express) {
+  try {
+    const specs = swaggerJSDoc(swaggerOptions)
+
+    // Serve OpenAPI JSON
+    app.get('/api-docs.json', (_req, res) => {
+      res.setHeader('Content-Type', 'application/json')
+      res.send(specs)
+    })
+
+    // Serve Swagger UI
+    app.use(
+      '/api-docs',
+      swaggerUi.serve,
+      swaggerUi.setup(specs, {
+        customCss: `
+        .swagger-ui .topbar { display: none; }
+        .swagger-ui .info .title { color: #1890ff; }
+      `,
+        customSiteTitle: 'Cherry Studio API Documentation'
+      })
+    )
+
+    logger.info('OpenAPI documentation setup complete')
+    logger.info('Documentation available at /api-docs')
+    logger.info('OpenAPI spec available at /api-docs.json')
+  } catch (error) {
+    logger.error('Failed to setup OpenAPI documentation:', error as Error)
+  }
+}

src/main/apiServer/routes/chat.ts

@@ -0,0 +1,225 @@
+import express, { Request, Response } from 'express'
+import OpenAI from 'openai'
+import { ChatCompletionCreateParams } from 'openai/resources'
+
+import { loggerService } from '../../services/LoggerService'
+import { chatCompletionService } from '../services/chat-completion'
+import { validateModelId } from '../utils'
+
+const logger = loggerService.withContext('ApiServerChatRoutes')
+
+const router = express.Router()
+
+/**
+ * @swagger
+ * /v1/chat/completions:
+ *   post:
+ *     summary: Create chat completion
+ *     description: Create a chat completion response, compatible with OpenAI API
+ *     tags: [Chat]
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             $ref: '#/components/schemas/ChatCompletionRequest'
+ *     responses:
+ *       200:
+ *         description: Chat completion response
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 id:
+ *                   type: string
+ *                 object:
+ *                   type: string
+ *                   example: chat.completion
+ *                 created:
+ *                   type: integer
+ *                 model:
+ *                   type: string
+ *                 choices:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       index:
+ *                         type: integer
+ *                       message:
+ *                         $ref: '#/components/schemas/ChatMessage'
+ *                       finish_reason:
+ *                         type: string
+ *                 usage:
+ *                   type: object
+ *                   properties:
+ *                     prompt_tokens:
+ *                       type: integer
+ *                     completion_tokens:
+ *                       type: integer
+ *                     total_tokens:
+ *                       type: integer
+ *           text/plain:
+ *             schema:
+ *               type: string
+ *               description: Server-sent events stream (when stream=true)
+ *       400:
+ *         description: Bad request
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/Error'
+ *       401:
+ *         description: Unauthorized
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/Error'
+ *       429:
+ *         description: Rate limit exceeded
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/Error'
+ *       500:
+ *         description: Internal server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/Error'
+ */
+router.post('/completions', async (req: Request, res: Response) => {
+  try {
+    const request: ChatCompletionCreateParams = req.body
+
+    if (!request) {
+      return res.status(400).json({
+        error: {
+          message: 'Request body is required',
+          type: 'invalid_request_error',
+          code: 'missing_body'
+        }
+      })
+    }
+
+    logger.info('Chat completion request:', {
+      model: request.model,
+      messageCount: request.messages?.length || 0,
+      stream: request.stream,
+      temperature: request.temperature
+    })
+
+    // Validate request
+    const validation = chatCompletionService.validateRequest(request)
+    if (!validation.isValid) {
+      return res.status(400).json({
+        error: {
+          message: validation.errors.join('; '),
+          type: 'invalid_request_error',
+          code: 'validation_failed'
+        }
+      })
+    }
+
+    // Validate model ID and get provider
+    const modelValidation = await validateModelId(request.model)
+    if (!modelValidation.valid) {
+      const error = modelValidation.error!
+      logger.warn(`Model validation failed for '${request.model}':`, error)
+      return res.status(400).json({
+        error: {
+          message: error.message,
+          type: 'invalid_request_error',
+          code: error.code
+        }
+      })
+    }
+
+    const provider = modelValidation.provider!
+    const modelId = modelValidation.modelId!
+
+    logger.info('Model validation successful:', {
+      provider: provider.id,
+      providerType: provider.type,
+      modelId: modelId,
+      fullModelId: request.model
+    })
+
+    // Create OpenAI client
+    const client = new OpenAI({
+      baseURL: provider.apiHost,
+      apiKey: provider.apiKey
+    })
+    request.model = modelId
+
+    // Handle streaming
+    if (request.stream) {
+      const streamResponse = await client.chat.completions.create(request)
+
+      res.setHeader('Content-Type', 'text/plain; charset=utf-8')
+      res.setHeader('Cache-Control', 'no-cache')
+      res.setHeader('Connection', 'keep-alive')
+
+      try {
+        for await (const chunk of streamResponse as any) {
+          res.write(`data: ${JSON.stringify(chunk)}\n\n`)
+        }
+        res.write('data: [DONE]\n\n')
+        res.end()
+      } catch (streamError: any) {
+        logger.error('Stream error:', streamError)
+        res.write(
+          `data: ${JSON.stringify({
+            error: {
+              message: 'Stream processing error',
+              type: 'server_error',
+              code: 'stream_error'
+            }
+          })}\n\n`
+        )
+        res.end()
+      }
+      return
+    }
+
+    // Handle non-streaming
+    const response = await client.chat.completions.create(request)
+    return res.json(response)
+  } catch (error: any) {
+    logger.error('Chat completion error:', error)
+
+    let statusCode = 500
+    let errorType = 'server_error'
+    let errorCode = 'internal_error'
+    let errorMessage = 'Internal server error'
+
+    if (error instanceof Error) {
+      errorMessage = error.message
+
+      if (error.message.includes('API key') || error.message.includes('authentication')) {
+        statusCode = 401
+        errorType = 'authentication_error'
+        errorCode = 'invalid_api_key'
+      } else if (error.message.includes('rate limit') || error.message.includes('quota')) {
+        statusCode = 429
+        errorType = 'rate_limit_error'
+        errorCode = 'rate_limit_exceeded'
+      } else if (error.message.includes('timeout') || error.message.includes('connection')) {
+        statusCode = 502
+        errorType = 'server_error'
+        errorCode = 'upstream_error'
+      }
+    }
+
+    return res.status(statusCode).json({
+      error: {
+        message: errorMessage,
+        type: errorType,
+        code: errorCode
+      }
+    })
+  }
+})
+
+export { router as chatRoutes }

src/main/apiServer/routes/mcp.ts

@@ -0,0 +1,153 @@
+import express, { Request, Response } from 'express'
+
+import { loggerService } from '../../services/LoggerService'
+import { mcpApiService } from '../services/mcp'
+
+const logger = loggerService.withContext('ApiServerMCPRoutes')
+
+const router = express.Router()
+
+/**
+ * @swagger
+ * /v1/mcps:
+ *   get:
+ *     summary: List MCP servers
+ *     description: Get a list of all configured Model Context Protocol servers
+ *     tags: [MCP]
+ *     responses:
+ *       200:
+ *         description: List of MCP servers
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 data:
+ *                   type: array
+ *                   items:
+ *                     $ref: '#/components/schemas/MCPServer'
+ *       503:
+ *         description: Service unavailable
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 error:
+ *                   $ref: '#/components/schemas/Error'
+ */
+router.get('/', async (req: Request, res: Response) => {
+  try {
+    logger.info('Get all MCP servers request received')
+    const servers = await mcpApiService.getAllServers(req)
+    return res.json({
+      success: true,
+      data: servers
+    })
+  } catch (error: any) {
+    logger.error('Error fetching MCP servers:', error)
+    return res.status(503).json({
+      success: false,
+      error: {
+        message: `Failed to retrieve MCP servers: ${error.message}`,
+        type: 'service_unavailable',
+        code: 'servers_unavailable'
+      }
+    })
+  }
+})
+
+/**
+ * @swagger
+ * /v1/mcps/{server_id}:
+ *   get:
+ *     summary: Get MCP server info
+ *     description: Get detailed information about a specific MCP server
+ *     tags: [MCP]
+ *     parameters:
+ *       - in: path
+ *         name: server_id
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: MCP server ID
+ *     responses:
+ *       200:
+ *         description: MCP server information
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 data:
+ *                   $ref: '#/components/schemas/MCPServer'
+ *       404:
+ *         description: MCP server not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 error:
+ *                   $ref: '#/components/schemas/Error'
+ */
+router.get('/:server_id', async (req: Request, res: Response) => {
+  try {
+    logger.info('Get MCP server info request received')
+    const server = await mcpApiService.getServerInfo(req.params.server_id)
+    if (!server) {
+      logger.warn('MCP server not found')
+      return res.status(404).json({
+        success: false,
+        error: {
+          message: 'MCP server not found',
+          type: 'not_found',
+          code: 'server_not_found'
+        }
+      })
+    }
+    return res.json({
+      success: true,
+      data: server
+    })
+  } catch (error: any) {
+    logger.error('Error fetching MCP server info:', error)
+    return res.status(503).json({
+      success: false,
+      error: {
+        message: `Failed to retrieve MCP server info: ${error.message}`,
+        type: 'service_unavailable',
+        code: 'server_info_unavailable'
+      }
+    })
+  }
+})
+
+// Connect to MCP server
+router.all('/:server_id/mcp', async (req: Request, res: Response) => {
+  const server = await mcpApiService.getServerById(req.params.server_id)
+  if (!server) {
+    logger.warn('MCP server not found')
+    return res.status(404).json({
+      success: false,
+      error: {
+        message: 'MCP server not found',
+        type: 'not_found',
+        code: 'server_not_found'
+      }
+    })
+  }
+  return await mcpApiService.handleRequest(req, res, server)
+})
+
+export { router as mcpRoutes }

src/main/apiServer/routes/models.ts

@@ -0,0 +1,73 @@
+import express, { Request, Response } from 'express'
+
+import { loggerService } from '../../services/LoggerService'
+import { chatCompletionService } from '../services/chat-completion'
+
+const logger = loggerService.withContext('ApiServerModelsRoutes')
+
+const router = express.Router()
+
+/**
+ * @swagger
+ * /v1/models:
+ *   get:
+ *     summary: List available models
+ *     description: Returns a list of available AI models from all configured providers
+ *     tags: [Models]
+ *     responses:
+ *       200:
+ *         description: List of available models
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 object:
+ *                   type: string
+ *                   example: list
+ *                 data:
+ *                   type: array
+ *                   items:
+ *                     $ref: '#/components/schemas/Model'
+ *       503:
+ *         description: Service unavailable
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/Error'
+ */
+router.get('/', async (_req: Request, res: Response) => {
+  try {
+    logger.info('Models list request received')
+
+    const models = await chatCompletionService.getModels()
+
+    if (models.length === 0) {
+      logger.warn(
+        'No models available from providers. This may be because no OpenAI providers are configured or enabled.'
+      )
+    }
+
+    logger.info(`Returning ${models.length} models (OpenAI providers only)`)
+    logger.debug(
+      'Model IDs:',
+      models.map((m) => m.id)
+    )
+
+    return res.json({
+      object: 'list',
+      data: models
+    })
+  } catch (error: any) {
+    logger.error('Error fetching models:', error)
+    return res.status(503).json({
+      error: {
+        message: 'Failed to retrieve models from available providers',
+        type: 'service_unavailable',
+        code: 'models_unavailable'
+      }
+    })
+  }
+})
+
+export { router as modelsRoutes }

src/main/apiServer/server.ts

@@ -0,0 +1,65 @@
+import { createServer } from 'node:http'
+
+import { loggerService } from '../services/LoggerService'
+import { app } from './app'
+import { config } from './config'
+
+const logger = loggerService.withContext('ApiServer')
+
+export class ApiServer {
+  private server: ReturnType<typeof createServer> | null = null
+
+  async start(): Promise<void> {
+    if (this.server) {
+      logger.warn('Server already running')
+      return
+    }
+
+    // Load config
+    const { port, host, apiKey } = await config.load()
+
+    // Create server with Express app
+    this.server = createServer(app)
+
+    // Start server
+    return new Promise((resolve, reject) => {
+      this.server!.listen(port, host, () => {
+        logger.info(`API Server started at http://${host}:${port}`)
+        logger.info(`API Key: ${apiKey}`)
+        resolve()
+      })
+
+      this.server!.on('error', reject)
+    })
+  }
+
+  async stop(): Promise<void> {
+    if (!this.server) return
+
+    return new Promise((resolve) => {
+      this.server!.close(() => {
+        logger.info('API Server stopped')
+        this.server = null
+        resolve()
+      })
+    })
+  }
+
+  async restart(): Promise<void> {
+    await this.stop()
+    await config.reload()
+    await this.start()
+  }
+
+  isRunning(): boolean {
+    const hasServer = this.server !== null
+    const isListening = this.server?.listening || false
+    const result = hasServer && isListening
+
+    logger.debug('isRunning check:', { hasServer, isListening, result })
+
+    return result
+  }
+}
+
+export const apiServer = new ApiServer()

src/main/apiServer/services/chat-completion.ts

@@ -0,0 +1,239 @@
+import OpenAI from 'openai'
+import { ChatCompletionCreateParams } from 'openai/resources'
+
+import { loggerService } from '../../services/LoggerService'
+import {
+  getProviderByModel,
+  getRealProviderModel,
+  listAllAvailableModels,
+  OpenAICompatibleModel,
+  transformModelToOpenAI,
+  validateProvider
+} from '../utils'
+
+const logger = loggerService.withContext('ChatCompletionService')
+
+export interface ModelData extends OpenAICompatibleModel {
+  provider_id: string
+  model_id: string
+  name: string
+}
+
+export interface ValidationResult {
+  isValid: boolean
+  errors: string[]
+}
+
+export class ChatCompletionService {
+  async getModels(): Promise<ModelData[]> {
+    try {
+      logger.info('Getting available models from providers')
+
+      const models = await listAllAvailableModels()
+
+      // Use Map to deduplicate models by their full ID (provider:model_id)
+      const uniqueModels = new Map<string, ModelData>()
+
+      for (const model of models) {
+        const openAIModel = transformModelToOpenAI(model)
+        const fullModelId = openAIModel.id // This is already in format "provider:model_id"
+
+        // Only add if not already present (first occurrence wins)
+        if (!uniqueModels.has(fullModelId)) {
+          uniqueModels.set(fullModelId, {
+            ...openAIModel,
+            provider_id: model.provider,
+            model_id: model.id,
+            name: model.name
+          })
+        } else {
+          logger.debug(`Skipping duplicate model: ${fullModelId}`)
+        }
+      }
+
+      const modelData = Array.from(uniqueModels.values())
+
+      logger.info(`Successfully retrieved ${modelData.length} unique models from ${models.length} total models`)
+
+      if (models.length > modelData.length) {
+        logger.debug(`Filtered out ${models.length - modelData.length} duplicate models`)
+      }
+
+      return modelData
+    } catch (error: any) {
+      logger.error('Error getting models:', error)
+      return []
+    }
+  }
+
+  validateRequest(request: ChatCompletionCreateParams): ValidationResult {
+    const errors: string[] = []
+
+    // Validate model
+    if (!request.model) {
+      errors.push('Model is required')
+    } else if (typeof request.model !== 'string') {
+      errors.push('Model must be a string')
+    } else if (!request.model.includes(':')) {
+      errors.push('Model must be in format "provider:model_id"')
+    }
+
+    // Validate messages
+    if (!request.messages) {
+      errors.push('Messages array is required')
+    } else if (!Array.isArray(request.messages)) {
+      errors.push('Messages must be an array')
+    } else if (request.messages.length === 0) {
+      errors.push('Messages array cannot be empty')
+    } else {
+      // Validate each message
+      request.messages.forEach((message, index) => {
+        if (!message.role) {
+          errors.push(`Message ${index}: role is required`)
+        }
+        if (!message.content) {
+          errors.push(`Message ${index}: content is required`)
+        }
+      })
+    }
+
+    // Validate optional parameters
+    if (request.temperature !== undefined) {
+      if (typeof request.temperature !== 'number' || request.temperature < 0 || request.temperature > 2) {
+        errors.push('Temperature must be a number between 0 and 2')
+      }
+    }
+
+    if (request.max_tokens !== undefined) {
+      if (typeof request.max_tokens !== 'number' || request.max_tokens < 1) {
+        errors.push('max_tokens must be a positive number')
+      }
+    }
+
+    return {
+      isValid: errors.length === 0,
+      errors
+    }
+  }
+
+  async processCompletion(request: ChatCompletionCreateParams): Promise<OpenAI.Chat.Completions.ChatCompletion> {
+    try {
+      logger.info('Processing chat completion request:', {
+        model: request.model,
+        messageCount: request.messages.length,
+        stream: request.stream
+      })
+
+      // Validate request
+      const validation = this.validateRequest(request)
+      if (!validation.isValid) {
+        throw new Error(`Request validation failed: ${validation.errors.join(', ')}`)
+      }
+
+      // Get provider for the model
+      const provider = await getProviderByModel(request.model!)
+      if (!provider) {
+        throw new Error(`Provider not found for model: ${request.model}`)
+      }
+
+      // Validate provider
+      if (!validateProvider(provider)) {
+        throw new Error(`Provider validation failed for: ${provider.id}`)
+      }
+
+      // Extract model ID from the full model string
+      const modelId = getRealProviderModel(request.model)
+
+      // Create OpenAI client for the provider
+      const client = new OpenAI({
+        baseURL: provider.apiHost,
+        apiKey: provider.apiKey
+      })
+
+      // Prepare request with the actual model ID
+      const providerRequest = {
+        ...request,
+        model: modelId,
+        stream: false
+      }
+
+      logger.debug('Sending request to provider:', {
+        provider: provider.id,
+        model: modelId,
+        apiHost: provider.apiHost
+      })
+
+      const response = (await client.chat.completions.create(providerRequest)) as OpenAI.Chat.Completions.ChatCompletion
+
+      logger.info('Successfully processed chat completion')
+      return response
+    } catch (error: any) {
+      logger.error('Error processing chat completion:', error)
+      throw error
+    }
+  }
+
+  async *processStreamingCompletion(
+    request: ChatCompletionCreateParams
+  ): AsyncIterable<OpenAI.Chat.Completions.ChatCompletionChunk> {
+    try {
+      logger.info('Processing streaming chat completion request:', {
+        model: request.model,
+        messageCount: request.messages.length
+      })
+
+      // Validate request
+      const validation = this.validateRequest(request)
+      if (!validation.isValid) {
+        throw new Error(`Request validation failed: ${validation.errors.join(', ')}`)
+      }
+
+      // Get provider for the model
+      const provider = await getProviderByModel(request.model!)
+      if (!provider) {
+        throw new Error(`Provider not found for model: ${request.model}`)
+      }
+
+      // Validate provider
+      if (!validateProvider(provider)) {
+        throw new Error(`Provider validation failed for: ${provider.id}`)
+      }
+
+      // Extract model ID from the full model string
+      const modelId = getRealProviderModel(request.model)
+
+      // Create OpenAI client for the provider
+      const client = new OpenAI({
+        baseURL: provider.apiHost,
+        apiKey: provider.apiKey
+      })
+
+      // Prepare streaming request
+      const streamingRequest = {
+        ...request,
+        model: modelId,
+        stream: true as const
+      }
+
+      logger.debug('Sending streaming request to provider:', {
+        provider: provider.id,
+        model: modelId,
+        apiHost: provider.apiHost
+      })
+
+      const stream = await client.chat.completions.create(streamingRequest)
+
+      for await (const chunk of stream) {
+        yield chunk
+      }
+
+      logger.info('Successfully completed streaming chat completion')
+    } catch (error: any) {
+      logger.error('Error processing streaming chat completion:', error)
+      throw error
+    }
+  }
+}
+
+// Export singleton instance
+export const chatCompletionService = new ChatCompletionService()

src/main/apiServer/services/mcp.ts

@@ -0,0 +1,251 @@
+import mcpService from '@main/services/MCPService'
+import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp'
+import {
+  isJSONRPCRequest,
+  JSONRPCMessage,
+  JSONRPCMessageSchema,
+  MessageExtraInfo
+} from '@modelcontextprotocol/sdk/types'
+import { MCPServer } from '@types'
+import { randomUUID } from 'crypto'
+import { EventEmitter } from 'events'
+import { Request, Response } from 'express'
+import { IncomingMessage, ServerResponse } from 'http'
+
+import { loggerService } from '../../services/LoggerService'
+import { reduxService } from '../../services/ReduxService'
+import { getMcpServerById } from '../utils/mcp'
+
+const logger = loggerService.withContext('MCPApiService')
+const transports: Record<string, StreamableHTTPServerTransport> = {}
+
+interface McpServerDTO {
+  id: MCPServer['id']
+  name: MCPServer['name']
+  type: MCPServer['type']
+  description: MCPServer['description']
+  url: string
+}
+
+interface McpServersResp {
+  servers: Record<string, McpServerDTO>
+}
+
+/**
+ * MCPApiService - API layer for MCP server management
+ *
+ * This service provides a REST API interface for MCP servers while integrating
+ * with the existing application architecture:
+ *
+ * 1. Uses ReduxService to access the renderer's Redux store directly
+ * 2. Syncs changes back to the renderer via Redux actions
+ * 3. Leverages existing MCPService for actual server connections
+ * 4. Provides session management for API clients
+ */
+class MCPApiService extends EventEmitter {
+  private transport: StreamableHTTPServerTransport = new StreamableHTTPServerTransport({
+    sessionIdGenerator: () => randomUUID()
+  })
+
+  constructor() {
+    super()
+    this.initMcpServer()
+    logger.silly('MCPApiService initialized')
+  }
+
+  private initMcpServer() {
+    this.transport.onmessage = this.onMessage
+  }
+
+  /**
+   * Get servers directly from Redux store
+   */
+  private async getServersFromRedux(): Promise<MCPServer[]> {
+    try {
+      logger.silly('Getting servers from Redux store')
+
+      // Try to get from cache first (faster)
+      const cachedServers = reduxService.selectSync<MCPServer[]>('state.mcp.servers')
+      if (cachedServers && Array.isArray(cachedServers)) {
+        logger.silly(`Found ${cachedServers.length} servers in Redux cache`)
+        return cachedServers
+      }
+
+      // If cache is not available, get fresh data
+      const servers = await reduxService.select<MCPServer[]>('state.mcp.servers')
+      logger.silly(`Fetched ${servers?.length || 0} servers from Redux store`)
+      return servers || []
+    } catch (error: any) {
+      logger.error('Failed to get servers from Redux:', error)
+      return []
+    }
+  }
+
+  // get all activated servers
+  async getAllServers(req: Request): Promise<McpServersResp> {
+    try {
+      const servers = await this.getServersFromRedux()
+      logger.silly(`Returning ${servers.length} servers`)
+      const resp: McpServersResp = {
+        servers: {}
+      }
+      for (const server of servers) {
+        if (server.isActive) {
+          resp.servers[server.id] = {
+            id: server.id,
+            name: server.name,
+            type: 'streamableHttp',
+            description: server.description,
+            url: `${req.protocol}://${req.host}/v1/mcps/${server.id}/mcp`
+          }
+        }
+      }
+      return resp
+    } catch (error: any) {
+      logger.error('Failed to get all servers:', error)
+      throw new Error('Failed to retrieve servers')
+    }
+  }
+
+  // get server by id
+  async getServerById(id: string): Promise<MCPServer | null> {
+    try {
+      logger.silly(`getServerById called with id: ${id}`)
+      const servers = await this.getServersFromRedux()
+      const server = servers.find((s) => s.id === id)
+      if (!server) {
+        logger.warn(`Server with id ${id} not found`)
+        return null
+      }
+      logger.silly(`Returning server with id ${id}`)
+      return server
+    } catch (error: any) {
+      logger.error(`Failed to get server with id ${id}:`, error)
+      throw new Error('Failed to retrieve server')
+    }
+  }
+
+  async getServerInfo(id: string): Promise<any> {
+    try {
+      logger.silly(`getServerInfo called with id: ${id}`)
+      const server = await this.getServerById(id)
+      if (!server) {
+        logger.warn(`Server with id ${id} not found`)
+        return null
+      }
+      logger.silly(`Returning server info for id ${id}`)
+
+      const client = await mcpService.initClient(server)
+      const tools = await client.listTools()
+
+      logger.info(`Server with id ${id} info:`, { tools: JSON.stringify(tools) })
+
+      // const [version, tools, prompts, resources] = await Promise.all([
+      //   () => {
+      //     try {
+      //       return client.getServerVersion()
+      //     } catch (error) {
+      //       logger.error(`Failed to get server version for id ${id}:`, { error: error })
+      //       return '1.0.0'
+      //     }
+      //   },
+      //   (() => {
+      //     try {
+      //       return client.listTools()
+      //     } catch (error) {
+      //       logger.error(`Failed to list tools for id ${id}:`, { error: error })
+      //       return []
+      //     }
+      //   })(),
+      //   (() => {
+      //     try {
+      //       return client.listPrompts()
+      //     } catch (error) {
+      //       logger.error(`Failed to list prompts for id ${id}:`, { error: error })
+      //       return []
+      //     }
+      //   })(),
+      //   (() => {
+      //     try {
+      //       return client.listResources()
+      //     } catch (error) {
+      //       logger.error(`Failed to list resources for id ${id}:`, { error: error })
+      //       return []
+      //     }
+      //   })()
+      // ])
+
+      return {
+        id: server.id,
+        name: server.name,
+        type: server.type,
+        description: server.description,
+        tools
+      }
+    } catch (error: any) {
+      logger.error(`Failed to get server info with id ${id}:`, error)
+      throw new Error('Failed to retrieve server info')
+    }
+  }
+
+  async handleRequest(req: Request, res: Response, server: MCPServer) {
+    const sessionId = req.headers['mcp-session-id'] as string | undefined
+    logger.silly(`Handling request for server with sessionId ${sessionId}`)
+    let transport: StreamableHTTPServerTransport
+    if (sessionId && transports[sessionId]) {
+      transport = transports[sessionId]
+    } else {
+      transport = new StreamableHTTPServerTransport({
+        sessionIdGenerator: () => randomUUID(),
+        onsessioninitialized: (sessionId) => {
+          transports[sessionId] = transport
+        }
+      })
+
+      transport.onclose = () => {
+        logger.info(`Transport for sessionId ${sessionId} closed`)
+        if (transport.sessionId) {
+          delete transports[transport.sessionId]
+        }
+      }
+      const mcpServer = await getMcpServerById(server.id)
+      if (mcpServer) {
+        await mcpServer.connect(transport)
+      }
+    }
+    const jsonpayload = req.body
+    const messages: JSONRPCMessage[] = []
+
+    if (Array.isArray(jsonpayload)) {
+      for (const payload of jsonpayload) {
+        const message = JSONRPCMessageSchema.parse(payload)
+        messages.push(message)
+      }
+    } else {
+      const message = JSONRPCMessageSchema.parse(jsonpayload)
+      messages.push(message)
+    }
+
+    for (const message of messages) {
+      if (isJSONRPCRequest(message)) {
+        if (!message.params) {
+          message.params = {}
+        }
+        if (!message.params._meta) {
+          message.params._meta = {}
+        }
+        message.params._meta.serverId = server.id
+      }
+    }
+
+    logger.info(`Request body`, { rawBody: req.body, messages: JSON.stringify(messages) })
+    await transport.handleRequest(req as IncomingMessage, res as ServerResponse, messages)
+  }
+
+  private onMessage(message: JSONRPCMessage, extra?: MessageExtraInfo) {
+    logger.info(`Received message: ${JSON.stringify(message)}`, extra)
+    // Handle message here
+  }
+}
+
+export const mcpApiService = new MCPApiService()

src/main/apiServer/utils/index.ts

@@ -0,0 +1,231 @@
+import { loggerService } from '@main/services/LoggerService'
+import { reduxService } from '@main/services/ReduxService'
+import { Model, Provider } from '@types'
+
+const logger = loggerService.withContext('ApiServerUtils')
+
+// OpenAI compatible model format
+export interface OpenAICompatibleModel {
+  id: string
+  object: 'model'
+  created: number
+  owned_by: string
+  provider?: string
+  provider_model_id?: string
+}
+
+export async function getAvailableProviders(): Promise<Provider[]> {
+  try {
+    // Wait for store to be ready before accessing providers
+    const providers = await reduxService.select('state.llm.providers')
+    if (!providers || !Array.isArray(providers)) {
+      logger.warn('No providers found in Redux store, returning empty array')
+      return []
+    }
+
+    // Only support OpenAI type providers for API server
+    const openAIProviders = providers.filter((p: Provider) => p.enabled && p.type === 'openai')
+
+    logger.info(`Filtered to ${openAIProviders.length} OpenAI providers from ${providers.length} total providers`)
+
+    return openAIProviders
+  } catch (error: any) {
+    logger.error('Failed to get providers from Redux store:', error)
+    return []
+  }
+}
+
+export async function listAllAvailableModels(): Promise<Model[]> {
+  try {
+    const providers = await getAvailableProviders()
+    return providers.map((p: Provider) => p.models || []).flat()
+  } catch (error: any) {
+    logger.error('Failed to list available models:', error)
+    return []
+  }
+}
+
+export async function getProviderByModel(model: string): Promise<Provider | undefined> {
+  try {
+    if (!model || typeof model !== 'string') {
+      logger.warn(`Invalid model parameter: ${model}`)
+      return undefined
+    }
+
+    // Validate model format first
+    if (!model.includes(':')) {
+      logger.warn(
+        `Invalid model format, must contain ':' separator. Expected format "provider:model_id", got: ${model}`
+      )
+      return undefined
+    }
+
+    const providers = await getAvailableProviders()
+    const modelInfo = model.split(':')
+
+    if (modelInfo.length < 2 || modelInfo[0].length === 0 || modelInfo[1].length === 0) {
+      logger.warn(`Invalid model format, expected "provider:model_id" with non-empty parts, got: ${model}`)
+      return undefined
+    }
+
+    const providerId = modelInfo[0]
+    const provider = providers.find((p: Provider) => p.id === providerId)
+
+    if (!provider) {
+      logger.warn(
+        `Provider '${providerId}' not found or not enabled. Available providers: ${providers.map((p) => p.id).join(', ')}`
+      )
+      return undefined
+    }
+
+    logger.debug(`Found provider '${providerId}' for model: ${model}`)
+    return provider
+  } catch (error: any) {
+    logger.error('Failed to get provider by model:', error)
+    return undefined
+  }
+}
+
+export function getRealProviderModel(modelStr: string): string {
+  return modelStr.split(':').slice(1).join(':')
+}
+
+export interface ModelValidationError {
+  type: 'invalid_format' | 'provider_not_found' | 'model_not_available' | 'unsupported_provider_type'
+  message: string
+  code: string
+}
+
+export async function validateModelId(
+  model: string
+): Promise<{ valid: boolean; error?: ModelValidationError; provider?: Provider; modelId?: string }> {
+  try {
+    if (!model || typeof model !== 'string') {
+      return {
+        valid: false,
+        error: {
+          type: 'invalid_format',
+          message: 'Model must be a non-empty string',
+          code: 'invalid_model_parameter'
+        }
+      }
+    }
+
+    if (!model.includes(':')) {
+      return {
+        valid: false,
+        error: {
+          type: 'invalid_format',
+          message: "Invalid model format. Expected format: 'provider:model_id' (e.g., 'my-openai:gpt-4')",
+          code: 'invalid_model_format'
+        }
+      }
+    }
+
+    const modelInfo = model.split(':')
+    if (modelInfo.length < 2 || modelInfo[0].length === 0 || modelInfo[1].length === 0) {
+      return {
+        valid: false,
+        error: {
+          type: 'invalid_format',
+          message: "Invalid model format. Both provider and model_id must be non-empty. Expected: 'provider:model_id'",
+          code: 'invalid_model_format'
+        }
+      }
+    }
+
+    const providerId = modelInfo[0]
+    const modelId = getRealProviderModel(model)
+    const provider = await getProviderByModel(model)
+
+    if (!provider) {
+      return {
+        valid: false,
+        error: {
+          type: 'provider_not_found',
+          message: `Provider '${providerId}' not found, not enabled, or not supported. Only OpenAI providers are currently supported.`,
+          code: 'provider_not_found'
+        }
+      }
+    }
+
+    // Check if model exists in provider
+    const modelExists = provider.models?.some((m) => m.id === modelId)
+    if (!modelExists) {
+      const availableModels = provider.models?.map((m) => m.id).join(', ') || 'none'
+      return {
+        valid: false,
+        error: {
+          type: 'model_not_available',
+          message: `Model '${modelId}' not available in provider '${providerId}'. Available models: ${availableModels}`,
+          code: 'model_not_available'
+        }
+      }
+    }
+
+    return {
+      valid: true,
+      provider,
+      modelId
+    }
+  } catch (error: any) {
+    logger.error('Error validating model ID:', error)
+    return {
+      valid: false,
+      error: {
+        type: 'invalid_format',
+        message: 'Failed to validate model ID',
+        code: 'validation_error'
+      }
+    }
+  }
+}
+
+export function transformModelToOpenAI(model: Model): OpenAICompatibleModel {
+  return {
+    id: `${model.provider}:${model.id}`,
+    object: 'model',
+    created: Math.floor(Date.now() / 1000),
+    owned_by: model.owned_by || model.provider,
+    provider: model.provider,
+    provider_model_id: model.id
+  }
+}
+
+export function validateProvider(provider: Provider): boolean {
+  try {
+    if (!provider) {
+      return false
+    }
+
+    // Check required fields
+    if (!provider.id || !provider.type || !provider.apiKey || !provider.apiHost) {
+      logger.warn('Provider missing required fields:', {
+        id: !!provider.id,
+        type: !!provider.type,
+        apiKey: !!provider.apiKey,
+        apiHost: !!provider.apiHost
+      })
+      return false
+    }
+
+    // Check if provider is enabled
+    if (!provider.enabled) {
+      logger.debug(`Provider is disabled: ${provider.id}`)
+      return false
+    }
+
+    // Only support OpenAI type providers
+    if (provider.type !== 'openai') {
+      logger.debug(
+        `Provider type '${provider.type}' not supported, only 'openai' type is currently supported: ${provider.id}`
+      )
+      return false
+    }
+
+    return true
+  } catch (error: any) {
+    logger.error('Error validating provider:', error)
+    return false
+  }
+}

src/main/apiServer/utils/mcp.ts

@@ -0,0 +1,76 @@
+import mcpService from '@main/services/MCPService'
+import { Server } from '@modelcontextprotocol/sdk/server/index.js'
+import { CallToolRequestSchema, ListToolsRequestSchema, ListToolsResult } from '@modelcontextprotocol/sdk/types.js'
+import { MCPServer } from '@types'
+
+import { loggerService } from '../../services/LoggerService'
+import { reduxService } from '../../services/ReduxService'
+
+const logger = loggerService.withContext('MCPApiService')
+
+const cachedServers: Record<string, Server> = {}
+
+async function handleListToolsRequest(request: any, extra: any): Promise<ListToolsResult> {
+  logger.debug('Handling list tools request', { request: request, extra: extra })
+  const serverId: string = request.params._meta.serverId
+  const serverConfig = await getMcpServerConfigById(serverId)
+  if (!serverConfig) {
+    throw new Error(`Server not found: ${serverId}`)
+  }
+  const client = await mcpService.initClient(serverConfig)
+  return client.listTools()
+}
+
+async function handleCallToolRequest(request: any, extra: any): Promise<any> {
+  logger.debug('Handling call tool request', { request: request, extra: extra })
+  const serverId: string = request.params._meta.serverId
+  const serverConfig = await getMcpServerConfigById(serverId)
+  if (!serverConfig) {
+    throw new Error(`Server not found: ${serverId}`)
+  }
+  const client = await mcpService.initClient(serverConfig)
+  return client.callTool(request.params)
+}
+
+async function getMcpServerConfigById(id: string): Promise<MCPServer | undefined> {
+  const servers = await getServersFromRedux()
+  return servers.find((s) => s.id === id || s.name === id)
+}
+
+/**
+ * Get servers directly from Redux store
+ */
+async function getServersFromRedux(): Promise<MCPServer[]> {
+  try {
+    const servers = await reduxService.select<MCPServer[]>('state.mcp.servers')
+    logger.silly(`Fetched ${servers?.length || 0} servers from Redux store`)
+    return servers || []
+  } catch (error: any) {
+    logger.error('Failed to get servers from Redux:', error)
+    return []
+  }
+}
+
+export async function getMcpServerById(id: string): Promise<Server> {
+  const server = cachedServers[id]
+  if (!server) {
+    const servers = await getServersFromRedux()
+    const mcpServer = servers.find((s) => s.id === id || s.name === id)
+    if (!mcpServer) {
+      throw new Error(`Server not found: ${id}`)
+    }
+
+    const createMcpServer = (name: string, version: string): Server => {
+      const server = new Server({ name: name, version }, { capabilities: { tools: {} } })
+      server.setRequestHandler(ListToolsRequestSchema, handleListToolsRequest)
+      server.setRequestHandler(CallToolRequestSchema, handleCallToolRequest)
+      return server
+    }
+
+    const newServer = createMcpServer(mcpServer.name, '0.1.0')
+    cachedServers[id] = newServer
+    return newServer
+  }
+  logger.silly('getMcpServer ', { server: server })
+  return server
+}

src/main/index.ts

@@ -27,6 +27,7 @@ import { registerShortcuts } from './services/ShortcutService'
 import { TrayService } from './services/TrayService'
 import { windowService } from './services/WindowService'
 import process from 'node:process'
+import { apiServerService } from './services/ApiServerService'
 
 const logger = loggerService.withContext('MainEntry')
 
@@ -145,6 +146,17 @@ if (!app.requestSingleInstanceLock()) {
 
     //start selection assistant service
     initSelectionService()
+
+    // Start API server if enabled
+    try {
+      const config = await apiServerService.getCurrentConfig()
+      logger.info('API server config:', config)
+      if (config.enabled) {
+        await apiServerService.start()
+      }
+    } catch (error: any) {
+      logger.error('Failed to check/start API server:', error)
+    }
   })
 
   registerProtocolClient(app)
@@ -190,6 +202,7 @@ if (!app.requestSingleInstanceLock()) {
     // 简单的资源清理，不阻塞退出流程
     try {
       await mcpService.cleanup()
+      await apiServerService.stop()
     } catch (error) {
       logger.warn('Error cleaning up MCP service:', error as Error)
     }

src/main/ipc.ts

@@ -15,6 +15,7 @@ import { FileMetadata, Provider, Shortcut, ThemeMode } from '@types'
 import { BrowserWindow, dialog, ipcMain, ProxyConfig, session, shell, systemPreferences, webContents } from 'electron'
 import { Notification } from 'src/renderer/src/types/notification'
 
+import { apiServerService } from './services/ApiServerService'
 import appService from './services/AppService'
 import AppUpdater from './services/AppUpdater'
 import BackupManager from './services/BackupManager'
@@ -782,6 +783,9 @@ export function registerIpc(mainWindow: BrowserWindow, app: Electron.App) {
       addStreamMessage(spanId, modelName, context, msg)
   )
 
+  // API Server
+  apiServerService.registerIpcHandlers()
+
   // Anthropic OAuth
   ipcMain.handle(IpcChannel.Anthropic_StartOAuthFlow, () => anthropicService.startOAuthFlow())
   ipcMain.handle(IpcChannel.Anthropic_CompleteOAuthWithCode, (_, code: string) =>

src/main/services/ApiServerService.ts

@@ -0,0 +1,108 @@
+import { IpcChannel } from '@shared/IpcChannel'
+import { ApiServerConfig } from '@types'
+import { ipcMain } from 'electron'
+
+import { apiServer } from '../apiServer'
+import { config } from '../apiServer/config'
+import { loggerService } from './LoggerService'
+const logger = loggerService.withContext('ApiServerService')
+
+export class ApiServerService {
+  constructor() {
+    // Use the new clean implementation
+  }
+
+  async start(): Promise<void> {
+    try {
+      await apiServer.start()
+      logger.info('API Server started successfully')
+    } catch (error: any) {
+      logger.error('Failed to start API Server:', error)
+      throw error
+    }
+  }
+
+  async stop(): Promise<void> {
+    try {
+      await apiServer.stop()
+      logger.info('API Server stopped successfully')
+    } catch (error: any) {
+      logger.error('Failed to stop API Server:', error)
+      throw error
+    }
+  }
+
+  async restart(): Promise<void> {
+    try {
+      await apiServer.restart()
+      logger.info('API Server restarted successfully')
+    } catch (error: any) {
+      logger.error('Failed to restart API Server:', error)
+      throw error
+    }
+  }
+
+  isRunning(): boolean {
+    return apiServer.isRunning()
+  }
+
+  async getCurrentConfig(): Promise<ApiServerConfig> {
+    return config.get()
+  }
+
+  registerIpcHandlers(): void {
+    // API Server
+    ipcMain.handle(IpcChannel.ApiServer_Start, async () => {
+      try {
+        await this.start()
+        return { success: true }
+      } catch (error: any) {
+        return { success: false, error: error instanceof Error ? error.message : 'Unknown error' }
+      }
+    })
+
+    ipcMain.handle(IpcChannel.ApiServer_Stop, async () => {
+      try {
+        await this.stop()
+        return { success: true }
+      } catch (error: any) {
+        return { success: false, error: error instanceof Error ? error.message : 'Unknown error' }
+      }
+    })
+
+    ipcMain.handle(IpcChannel.ApiServer_Restart, async () => {
+      try {
+        await this.restart()
+        return { success: true }
+      } catch (error: any) {
+        return { success: false, error: error instanceof Error ? error.message : 'Unknown error' }
+      }
+    })
+
+    ipcMain.handle(IpcChannel.ApiServer_GetStatus, async () => {
+      try {
+        const config = await this.getCurrentConfig()
+        return {
+          running: this.isRunning(),
+          config
+        }
+      } catch (error: any) {
+        return {
+          running: this.isRunning(),
+          config: null
+        }
+      }
+    })
+
+    ipcMain.handle(IpcChannel.ApiServer_GetConfig, async () => {
+      try {
+        return this.getCurrentConfig()
+      } catch (error: any) {
+        return null
+      }
+    })
+  }
+}
+
+// Export singleton instance
+export const apiServerService = new ApiServerService()

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -15,6 +15,7 @@ import {
   NotebookPen,
   Package,
   PictureInPicture2,
+  Server,
   Settings2,
   TextCursorInput,
   Zap
@@ -37,6 +38,7 @@ import QuickAssistantSettings from './QuickAssistantSettings'
 import QuickPhraseSettings from './QuickPhraseSettings'
 import SelectionAssistantSettings from './SelectionAssistantSettings/SelectionAssistantSettings'
 import ShortcutSettings from './ShortcutSettings'
+import { ApiServerSettings } from './ToolSettings/ApiServerSettings'
 import WebSearchSettings from './WebSearchSettings'
 
 const SettingsPage: FC = () => {
@@ -108,6 +110,12 @@ const SettingsPage: FC = () => {
               {t('memory.title')}
             </MenuItem>
           </MenuItemLink>
+          <MenuItemLink to="/settings/api-server">
+            <MenuItem className={isRoute('/settings/api-server')}>
+              <Server size={18} />
+              {t('apiServer.title')}
+            </MenuItem>
+          </MenuItemLink>
           <MenuItemLink to="/settings/docprocess">
             <MenuItem className={isRoute('/settings/docprocess')}>
               <FileCode size={18} />
@@ -152,6 +160,7 @@ const SettingsPage: FC = () => {
             <Route path="provider" element={<ProviderList />} />
             <Route path="model" element={<ModelSettings />} />
             <Route path="websearch" element={<WebSearchSettings />} />
+            <Route path="api-server" element={<ApiServerSettings />} />
             <Route path="docprocess" element={<DocProcessSettings />} />
             <Route path="quickphrase" element={<QuickPhraseSettings />} />
             <Route path="mcp/*" element={<MCPSettings />} />

src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/ApiServerSettings.tsx

@@ -0,0 +1,425 @@
+// TODO: Refactor this component to use HeroUI
+import { useTheme } from '@renderer/context/ThemeProvider'
+import { loggerService } from '@renderer/services/LoggerService'
+import { RootState, useAppDispatch } from '@renderer/store'
+import { setApiServerApiKey, setApiServerEnabled, setApiServerPort } from '@renderer/store/settings'
+import { formatErrorMessage } from '@renderer/utils/error'
+import { IpcChannel } from '@shared/IpcChannel'
+import { Button, Input, InputNumber, Tooltip, Typography } from 'antd'
+import { Copy, ExternalLink, Play, RotateCcw, Square } from 'lucide-react'
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import styled from 'styled-components'
+import { v4 as uuidv4 } from 'uuid'
+
+import { SettingContainer } from '../..'
+
+const logger = loggerService.withContext('ApiServerSettings')
+const { Text, Title } = Typography
+
+const ApiServerSettings: FC = () => {
+  const { theme } = useTheme()
+  const dispatch = useAppDispatch()
+  const { t } = useTranslation()
+
+  // API Server state with proper defaults
+  const apiServerConfig = useSelector((state: RootState) => state.settings.apiServer)
+
+  const [apiServerRunning, setApiServerRunning] = useState(false)
+  const [apiServerLoading, setApiServerLoading] = useState(false)
+
+  // API Server functions
+  const checkApiServerStatus = async () => {
+    try {
+      const status = await window.electron.ipcRenderer.invoke(IpcChannel.ApiServer_GetStatus)
+      setApiServerRunning(status.running)
+    } catch (error: any) {
+      logger.error('Failed to check API server status:', error)
+    }
+  }
+
+  useEffect(() => {
+    checkApiServerStatus()
+  }, [])
+
+  const handleApiServerToggle = async (enabled: boolean) => {
+    setApiServerLoading(true)
+    try {
+      if (enabled) {
+        const result = await window.electron.ipcRenderer.invoke(IpcChannel.ApiServer_Start)
+        if (result.success) {
+          setApiServerRunning(true)
+          window.toast.success(t('apiServer.messages.startSuccess'))
+        } else {
+          window.toast.error(t('apiServer.messages.startError') + result.error)
+        }
+      } else {
+        const result = await window.electron.ipcRenderer.invoke(IpcChannel.ApiServer_Stop)
+        if (result.success) {
+          setApiServerRunning(false)
+          window.toast.success(t('apiServer.messages.stopSuccess'))
+        } else {
+          window.toast.error(t('apiServer.messages.stopError') + result.error)
+        }
+      }
+    } catch (error) {
+      window.toast.error(t('apiServer.messages.operationFailed') + formatErrorMessage(error))
+    } finally {
+      dispatch(setApiServerEnabled(enabled))
+      setApiServerLoading(false)
+    }
+  }
+
+  const handleApiServerRestart = async () => {
+    setApiServerLoading(true)
+    try {
+      const result = await window.electron.ipcRenderer.invoke(IpcChannel.ApiServer_Restart)
+      if (result.success) {
+        await checkApiServerStatus()
+        window.toast.success(t('apiServer.messages.restartSuccess'))
+      } else {
+        window.toast.error(t('apiServer.messages.restartError') + result.error)
+      }
+    } catch (error) {
+      window.toast.error(t('apiServer.messages.restartFailed') + (error as Error).message)
+    } finally {
+      setApiServerLoading(false)
+    }
+  }
+
+  const copyApiKey = () => {
+    navigator.clipboard.writeText(apiServerConfig.apiKey)
+    window.toast.success(t('apiServer.messages.apiKeyCopied'))
+  }
+
+  const regenerateApiKey = () => {
+    const newApiKey = `cs-sk-${uuidv4()}`
+    dispatch(setApiServerApiKey(newApiKey))
+    window.toast.success(t('apiServer.messages.apiKeyRegenerated'))
+  }
+
+  const handlePortChange = (value: string) => {
+    const port = parseInt(value) || 23333
+    if (port >= 1000 && port <= 65535) {
+      dispatch(setApiServerPort(port))
+    }
+  }
+
+  const openApiDocs = () => {
+    if (apiServerRunning) {
+      window.open(`http://localhost:${apiServerConfig.port}/api-docs`, '_blank')
+    }
+  }
+
+  return (
+    <Container theme={theme}>
+      {/* Header Section */}
+      <HeaderSection>
+        <HeaderContent>
+          <Title level={3} style={{ margin: 0, marginBottom: 8 }}>
+            {t('apiServer.title')}
+          </Title>
+          <Text type="secondary">{t('apiServer.description')}</Text>
+        </HeaderContent>
+        {apiServerRunning && (
+          <Button type="primary" icon={<ExternalLink size={14} />} onClick={openApiDocs}>
+            {t('apiServer.documentation.title')}
+          </Button>
+        )}
+      </HeaderSection>
+
+      {/* Server Control Panel with integrated configuration */}
+      <ServerControlPanel $status={apiServerRunning}>
+        <StatusSection>
+          <StatusIndicator $status={apiServerRunning} />
+          <StatusContent>
+            <StatusText $status={apiServerRunning}>
+              {apiServerRunning ? t('apiServer.status.running') : t('apiServer.status.stopped')}
+            </StatusText>
+            <StatusSubtext>
+              {apiServerRunning ? `http://localhost:${apiServerConfig.port}` : t('apiServer.fields.port.description')}
+            </StatusSubtext>
+          </StatusContent>
+        </StatusSection>
+
+        <ControlSection>
+          {apiServerRunning && (
+            <Tooltip title={t('apiServer.actions.restart.tooltip')}>
+              <RestartButton
+                $loading={apiServerLoading}
+                onClick={apiServerLoading ? undefined : handleApiServerRestart}>
+                <RotateCcw size={14} />
+                <span>{t('apiServer.actions.restart.button')}</span>
+              </RestartButton>
+            </Tooltip>
+          )}
+
+          {/* Port input when server is stopped */}
+          {!apiServerRunning && (
+            <StyledInputNumber
+              value={apiServerConfig.port}
+              onChange={(value) => handlePortChange(String(value || 23333))}
+              min={1000}
+              max={65535}
+              disabled={apiServerRunning}
+              placeholder="23333"
+              size="middle"
+            />
+          )}
+
+          <Tooltip title={apiServerRunning ? t('apiServer.actions.stop') : t('apiServer.actions.start')}>
+            {apiServerRunning ? (
+              <StopButton
+                $loading={apiServerLoading}
+                onClick={apiServerLoading ? undefined : () => handleApiServerToggle(false)}>
+                <Square size={20} style={{ color: 'var(--color-status-error)' }} />
+              </StopButton>
+            ) : (
+              <StartButton
+                $loading={apiServerLoading}
+                onClick={apiServerLoading ? undefined : () => handleApiServerToggle(true)}>
+                <Play size={20} style={{ color: 'var(--color-status-success)' }} />
+              </StartButton>
+            )}
+          </Tooltip>
+        </ControlSection>
+      </ServerControlPanel>
+
+      {/* API Key Configuration */}
+      <ConfigurationField>
+        <FieldLabel>{t('apiServer.fields.apiKey.label')}</FieldLabel>
+        <FieldDescription>{t('apiServer.fields.apiKey.description')}</FieldDescription>
+
+        <StyledInput
+          value={apiServerConfig.apiKey}
+          readOnly
+          placeholder={t('apiServer.fields.apiKey.placeholder')}
+          size="middle"
+          suffix={
+            <InputButtonContainer>
+              {!apiServerRunning && (
+                <RegenerateButton onClick={regenerateApiKey} disabled={apiServerRunning} type="link">
+                  {t('apiServer.actions.regenerate')}
+                </RegenerateButton>
+              )}
+              <Tooltip title={t('apiServer.fields.apiKey.copyTooltip')}>
+                <InputButton icon={<Copy size={14} />} onClick={copyApiKey} disabled={!apiServerConfig.apiKey} />
+              </Tooltip>
+            </InputButtonContainer>
+          }
+        />
+
+        {/* Authorization header info */}
+        <AuthHeaderSection>
+          <FieldLabel>{t('apiServer.authHeader.title')}</FieldLabel>
+          <StyledInput
+            style={{ height: 38 }}
+            value={`Authorization: Bearer ${apiServerConfig.apiKey || 'your-api-key'}`}
+            readOnly
+            size="middle"
+          />
+        </AuthHeaderSection>
+      </ConfigurationField>
+    </Container>
+  )
+}
+
+// Styled Components
+const Container = styled(SettingContainer)`
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--navbar-height));
+`
+
+const HeaderSection = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+`
+
+const HeaderContent = styled.div`
+  flex: 1;
+`
+
+const ServerControlPanel = styled.div<{ $status: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-radius: 8px;
+  background: var(--color-background);
+  border: 1px solid ${(props) => (props.$status ? 'var(--color-status-success)' : 'var(--color-border)')};
+  transition: all 0.3s ease;
+  margin-bottom: 16px;
+`
+
+const StatusSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`
+
+const StatusIndicator = styled.div<{ $status: boolean }>`
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: ${(props) => (props.$status ? 'var(--color-status-success)' : 'var(--color-status-error)')};
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: 50%;
+    background: ${(props) => (props.$status ? 'var(--color-status-success)' : 'var(--color-status-error)')};
+    opacity: 0.2;
+    animation: ${(props) => (props.$status ? 'pulse 2s infinite' : 'none')};
+  }
+
+  @keyframes pulse {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 0.2;
+    }
+    50% {
+      transform: scale(1.5);
+      opacity: 0.1;
+    }
+  }
+`
+
+const StatusContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`
+
+const StatusText = styled.div<{ $status: boolean }>`
+  font-weight: 600;
+  font-size: 14px;
+  color: ${(props) => (props.$status ? 'var(--color-status-success)' : 'var(--color-text-1)')};
+  margin: 0;
+`
+
+const StatusSubtext = styled.div`
+  font-size: 12px;
+  color: var(--color-text-3);
+  margin: 0;
+`
+
+const ControlSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`
+
+const RestartButton = styled.div<{ $loading: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--color-text-2);
+  cursor: ${(props) => (props.$loading ? 'not-allowed' : 'pointer')};
+  opacity: ${(props) => (props.$loading ? 0.5 : 1)};
+  font-size: 12px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: ${(props) => (props.$loading ? 'var(--color-text-2)' : 'var(--color-primary)')};
+  }
+`
+
+const StyledInputNumber = styled(InputNumber)`
+  width: 80px;
+  border-radius: 6px;
+  border: 1.5px solid var(--color-border);
+  margin-right: 5px;
+`
+
+const StartButton = styled.div<{ $loading: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${(props) => (props.$loading ? 'not-allowed' : 'pointer')};
+  opacity: ${(props) => (props.$loading ? 0.5 : 1)};
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: ${(props) => (props.$loading ? 'scale(1)' : 'scale(1.1)')};
+  }
+`
+
+const StopButton = styled.div<{ $loading: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ${(props) => (props.$loading ? 'not-allowed' : 'pointer')};
+  opacity: ${(props) => (props.$loading ? 0.5 : 1)};
+  transition: all 0.2s ease;
+
+  &:hover {
+    transform: ${(props) => (props.$loading ? 'scale(1)' : 'scale(1.1)')};
+  }
+`
+
+const ConfigurationField = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
+  background: var(--color-background);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+`
+
+const FieldLabel = styled.div`
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-1);
+  margin: 0;
+`
+
+const FieldDescription = styled.div`
+  font-size: 12px;
+  color: var(--color-text-3);
+  margin: 0;
+`
+
+const StyledInput = styled(Input)`
+  width: 100%;
+  border-radius: 6px;
+  border: 1.5px solid var(--color-border);
+`
+
+const InputButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`
+
+const InputButton = styled(Button)`
+  border: none;
+  padding: 0 4px;
+  background: transparent;
+`
+
+const RegenerateButton = styled(Button)`
+  padding: 0 4px;
+  font-size: 12px;
+  height: auto;
+  line-height: 1;
+  border: none;
+  background: transparent;
+`
+
+const AuthHeaderSection = styled.div`
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export default ApiServerSettings

src/renderer/src/pages/settings/ToolSettings/ApiServerSettings/index.tsx

@@ -0,0 +1 @@
+export { default as ApiServerSettings } from './ApiServerSettings'