AI导哈

微件开发框架

一个用于快速开发和部署微件的全栈框架，包含开发服务器和构建工具。

  • by Listo-Labs-Ltd
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 Listo-Labs-Ltd/mcp-app-template

使用说明

｛｛项目名称｝｝

｛｛描述｝｝

快速开始

# Install dependencies
pnpm install
cd server && pnpm install && cd ..

# Start development
pnpm dev          # Start widget dev server on :4444
cd server && pnpm start  # Start MCP server on :8000

# Build for production
pnpm build

项目结构

.
├── server/               # MCP Server
│   ├── src/
│   │   ├── server.ts    # Main server entry point
│   │   └── types.ts     # Zod schemas and types
│   └── package.json
├── src/                  # Widget Components
│   ├── components/       # Widget implementations
│   │   └── {widget}/
│   │       └── index.tsx
│   ├── types.ts          # OpenAI globals types
│   ├── use-*.ts          # Shared hooks
│   └── index.css         # Global styles
├── assets/               # Built widget bundles (gitignored)
├── package.json
└── vite.config.mts

发展

添加新小部件

  1. 创建新目录： src/components/{widget-name}/
  2. 添加一个 index.tsx 使用React组件创建文件
  3. 构建系统将自动检测并捆绑它
  4. 在中添加相应的工具 server/src/server.ts

环境变量

复制 .env.example 到 .env 并配置：

  • PORT -服务器端口（默认值：8000）
  • API_BASE_URL -您的后端API URL
  • ASSETS_BASE_URL -小部件资产（生产）的公共URL

部署

使用附带的Dockerfile构建和部署：

docker build -t {{PROJECT_NAME}} .
docker run -p 8000:8000 {{PROJECT_NAME}}

相关 MCP