AI导哈

AI集成React应用

一个基于React、TypeScript和Vite构建的现代化Web应用，集成了AI功能和Model Context Protocol (MCP)支持。

  • by AddisonRogers
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 AddisonRogers/MCP-Chat

使用说明

FSP MCP客户端React应用程序

一个使用TypeScript、Vite和Tailwind CSS构建的现代React应用程序，具有AI集成和模型上下文协议（MCP）支持。

🚀 快速开始

先决条件

  • Node.js（版本16或更高）
  • npm包管理器

安装

  1. 克隆存储库

  2. 安装依赖项：

    npm install

  3. 设置环境变量：

    • 复制 .env 归档并配置环境变量
VITE_AZURE_RESOURCE_NAME=
VITE_AZURE_API_KEY=
VITE_AZURE_MODEL_NAME=
VITE_AZURE_MCP_ENDPOINT=
  1. 启动开发服务器：
    npm run dev

该应用程序将在 http://localhost:5173

📦 可用脚本

  • npm run dev -使用热重载启动开发服务器
  • npm run build -构建生产应用程序
  • npm run lint -运行Biome检查代码质量和格式
  • npm run preview -在本地预览生产版本

🛠 技术栈

核心框架

  • 反应 （v19.1.1）-UI库
  • TypeScript （v5.8.3）-类型安全的JavaScript
  • 维特 （v7.1.7）-快速构建工具和开发服务器

造型和UI

  • Tailwind CSS （v4.1.13）-实用程序优先的CSS框架
  • Shadcn/Radix用户界面 -可访问的UI组件
    • 对话框、标签、插槽组件
  • Lucide反应 -图标库
  • 类别差异权限 -组件变体实用程序

人工智能和数据获取

  • AI 开发工具包 （v5.0.59）-人工智能集成工具包
  • Azure人工智能SDK （v2.0.42）-Azure人工智能服务
  • 模型上下文协议SDK （v1.18.2）-MCP集成
  • TanStack查询 （v5.90.2）-数据获取和缓存
  • 凯 （v1.11.0）-HTTP客户端

内容和文件

  • React Markdown （v10.1.0）-Markdown渲染
  • 重新键入突出显示 （v7.0.2）-语法高亮显示

开发工具

  • 生物群系 （v2.4.4）-用于web项目的快速多功能工具链
  • Vite插件React SWC -快速反应刷新

📁 项目结构


src/
├── assets/          # Static assets (images, icons, etc.)
├── components/      # Reusable React components
│   ├── chat/        # Chat-related components
│   └── ui/          # UI components (likely shadcn/ui)
├── contexts/        # React context providers
├── lib/             # Utility functions and configurations
├── pages/           # Page components
├── providers/       # Provider components
├── queries/         # TanStack Query hooks
├── types/           # TypeScript type definitions
├── App.tsx          # Main application component
├── main.tsx         # Application entry point
└── index.css        # Global styles

⚙️ 配置

Vite配置

  • 使用SWC快速刷新React
  • 顺风CSS集成
  • 路径别名(@ → src/)

生物特征配置

  • 快速梳理和格式化
  • TypeScript支持
  • JSX/React支持

Tailwind CSS

  • 配置了shadcn/ui兼容性
  • 用于主题化的CSS变量
  • Lucide图标集成

TypeScript

  • 严格类型检查
  • 针对不同环境的多个tsconfig文件
  • 现代ES2020目标

🎨 UI组件

此项目使用具有以下配置的shadcn/ui组件：

  • 风格：纽约
  • 底色：中立
  • CSS变量：已启用
  • 图标：Lucide React

🔧 环境设置

应用程序要求在中配置环境变量 .env 文件。确保为以下内容设置必要的变量：

  • AI服务配置
  • API端点
  • 认证令牌

🏗 构建和部署

生产构建

npm run build



This creates an optimized build in the `dist/` directory.

### Preview Production Build
```shell script
npm run preview

📝 代码质量

该项目通过以下方式保持代码质量：

  • 生物群系 用于代码过滤和格式化
  • TypeScript 用于类型安全

运行linting：

npm run lint

🤝 发展

添加新组件

  • 将可重复使用的组件放入 src/components/
  • 对所有组件使用TypeScript
  • 遵循现有的命名约定
  • 利用Tailwind CSS进行样式设计

状态管理

  • 使用React Context进行全局状态（参见 src/contexts/)
  • 用于服务器状态管理的TanStack查询
  • 使用React钩子的本地组件状态

造型指南

  • 使用Tailwind CSS实用程序类
  • 利用CSS变量进行主题化
  • 遵循shadcn/ui组件模式

📚 关键依赖关系

包装 用途
@ai-sdk/azure Azure AI服务集成
@modelcontextprotocol/sdk 模型上下文协议支持
@tanstack/react-query 服务器状态管理
react-markdown Markdown内容渲染
tailwindcss 实用程序优先的CSS框架
lucide-react 图标库

🚀 开发入门

  1. 安装依赖项: npm install
  2. 启动开发服务器: npm run dev
  3. 打开浏览器：导航到 http://localhost:5173
  4. 开始编码：当您进行更改时，应用程序将热重新加载

有关所用技术的更多信息：

相关 MCP