首页
/ 5个步骤掌握React AI集成：构建高性能智能应用开发指南

5个步骤掌握React AI集成：构建高性能智能应用开发指南

2026-05-03 11:52:22作者：郜逊炳
ai
The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents
项目地址：https://gitcode.com/GitHub_Trending/ai/ai

在现代Web开发中，React已成为构建交互式用户界面的首选框架，而AI技术的快速发展为应用增添了智能交互能力。如何在React项目中高效集成AI功能？怎样解决实时交互中的数据流同步问题？本指南将通过"问题发现→方案设计→实战开发→优化迭代"四个阶段，帮助开发者掌握React与AI SDK集成的核心技术，打造响应迅速、用户体验卓越的智能应用。无论你是刚接触React的新手，还是寻求AI集成方案的资深开发者，都能通过本文系统学习React AI开发的关键要点，轻松应对实时交互应用的各种挑战。

一、问题发现：React AI集成的核心挑战

在React应用中集成AI功能时，开发者常常面临一系列独特挑战，这些问题直接影响应用性能和用户体验。理解这些核心难点是构建高质量AI应用的第一步。

1.1 实时数据流管理的复杂性

React的单向数据流模型在处理AI生成的流式响应时面临特殊挑战。传统的状态更新机制难以满足AI响应的实时性要求，特别是在处理大型语言模型返回的连续数据流时，容易出现界面卡顿或状态不同步问题。

典型场景：当用户输入查询后，AI模型返回流式响应，前端需要实时将内容展示给用户。如果使用常规的setState方法，每次状态更新都会触发组件重渲染，在长文本生成场景下会导致性能下降。

1.2 组件状态与AI响应的同步问题

React组件的状态管理在AI交互中变得更加复杂。AI响应通常包含多种数据类型（文本、图像、工具调用等），如何在组件间高效共享这些状态，同时保持React的单向数据流特性，是开发者需要解决的关键问题。

数据流向挑战：

  • 从AI服务接收的流式响应需要实时更新UI
  • 用户操作可能中断或修改当前AI请求
  • 多轮对话历史需要持久化和状态恢复

1.3 服务端渲染与AI交互的兼容性

在Next.js等支持SSR的React框架中，AI交互面临额外挑战。服务端环境中无法直接访问浏览器API，而AI SDK通常依赖客户端环境。如何在保持SSR优势的同时，实现无缝的AI交互体验，是构建生产级应用必须解决的问题。

1.4 错误处理与用户体验平衡

AI服务可能因网络问题、API限制或模型错误而失败。在React应用中，如何优雅地处理这些错误，同时保持良好的用户体验，需要精心设计的错误边界和重试机制。

二、方案设计：React AI集成架构与策略

针对上述挑战，我们需要设计一套完整的React AI集成方案。这一方案不仅要解决技术难题，还要提供清晰的实施路径，帮助开发者根据项目需求选择合适的架构和工具。

2.1 React AI数据流架构设计

React与AI SDK集成的核心是建立高效的数据流管道。以下是经过实践验证的架构设计，它结合了React的响应式特性与AI服务的实时数据处理能力。

React AI数据流架构

React AI集成架构示意图 - 展示了数据在组件、状态管理和AI服务之间的流动

该架构包含以下关键组件：

  • AI服务抽象层：统一不同AI提供商的API，实现无缝切换
  • 数据流管理：基于React Context和Hooks的状态管理策略
  • 流式响应处理：专用的流解析和状态更新机制
  • 错误边界：隔离AI交互错误，防止影响整个应用

2.2 前后端数据流对比分析

在React AI应用中，有两种主要的数据流模式，各有适用场景和优缺点：

客户端直接调用模式：

  • 优势：实现简单，延迟低，适合原型开发
  • 劣势：API密钥暴露风险，浏览器资源限制
  • 适用场景：小型应用，演示项目，无敏感数据处理

服务端代理模式：

  • 优势：安全性高，可实现复杂业务逻辑，便于监控和限流
  • 劣势：增加服务器负载，延迟略高
  • 适用场景：生产环境，处理敏感数据，需要复杂权限控制
// 服务端代理模式实现示例 (Next.js API路由)
// pages/api/ai/chat.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { openai } from '@ai-sdk/openai';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { messages } = req.body;
    
    // 可以在这里添加身份验证、权限检查、请求限流等
    
    const stream = await openai.chat.completions.create({
      model: 'gpt-4',
      messages,
      stream: true,
    });
    
    res.setHeader('Content-Type', 'text/event-stream');
    
    for await (const chunk of stream) {
      res.write(`data: ${JSON.stringify(chunk)}\n\n`);
    }
    
    res.end();
  } catch (error) {
    console.error('AI请求错误:', error);
    res.status(500).json({ error: 'AI服务请求失败' });
  }
}

2.3 状态管理策略选择

根据应用规模和复杂度，React AI集成可以选择不同的状态管理策略：

轻量级方案：React Context + useReducer 适合中小型应用，实现简单，学习成本低。

中大型应用方案：Redux Toolkit + RTK Query 提供更强大的缓存、乐观更新和状态规范化能力，适合复杂的AI交互场景。

框架集成方案：Next.js App Router + React Server Components 利用React 18的新特性，实现服务端与客户端状态的无缝协同。

💡 决策指南：如果你的应用主要是简单的问答功能，Context API足够胜任；如果需要处理复杂的多轮对话、工具调用或多模态交互，考虑使用Redux或其他专业状态管理库。

2.4 框架选择决策树

为帮助开发者选择最适合的React AI集成方案，以下决策树提供了清晰的选择路径：

  1. 项目规模：

    • 小型项目/原型 → React + 基础AI SDK Hooks
    • 中大型应用 → Next.js + 状态管理库

  2. 部署环境：

    • 静态托管 → 客户端直接调用模式
    • 服务端环境 → 服务端代理模式

  3. AI功能需求：

    • 仅文本交互 → 基础聊天Hooks
    • 多模态交互 → 高级AI组件
    • 工具调用能力 → Agent框架集成

三、实战开发：构建React AI智能应用

经过问题分析和方案设计，现在我们进入实战开发阶段。本节将通过一个完整的智能聊天应用示例，展示React与AI SDK集成的具体实现步骤，包括环境配置、核心组件开发和数据流管理。

3.1 开发环境搭建

首先，我们需要搭建一个React项目并集成必要的AI SDK依赖。我们将使用Next.js作为框架，它提供了良好的服务端渲染支持和API路由功能。

npx create-next-app@latest react-ai-chat-app
cd react-ai-chat-app
npm install ai @ai-sdk/openai

项目结构组织如下：

react-ai-chat-app/
├── app/
│   ├── api/
│   │   └── chat/
│   │       └── route.ts  # AI服务代理端点
│   ├── components/
│   │   ├── ChatInterface.tsx  # 聊天界面组件
│   │   ├── MessageList.tsx    # 消息列表组件
│   │   └── InputArea.tsx      # 输入区域组件
│   ├── context/
│   │   └── ChatContext.tsx    # 聊天状态管理
│   ├── page.tsx               # 主页面
│   └── globals.css            # 全局样式
├── public/
└── package.json

3.2 核心Hooks实现原理分析

React AI SDK提供了多个实用的Hooks，简化AI功能集成。让我们深入分析两个核心Hooks的实现原理和使用方法。

useChat Hook：多轮对话管理

useChat Hook是处理对话式AI交互的核心工具，它管理对话历史、加载状态和错误处理。

// 简化版useChat实现原理
import { useState, useCallback, useEffect } from 'react';

export function useChat({
  api = '/api/chat',
  initialMessages = [],
  onError,
}) {
  const [messages, setMessages] = useState(initialMessages);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const appendMessage = useCallback((message) => {
    setMessages(prev => [...prev, message]);
  }, []);
  
  const handleSubmit = useCallback(async (input) => {
    setIsLoading(true);
    setError(null);
    
    // 添加用户消息
    const userMessage = { role: 'user', content: input };
    appendMessage(userMessage);
    
    try {
      // 创建AI响应消息占位符
      const assistantMessageId = Date.now().toString();
      appendMessage({
        id: assistantMessageId,
        role: 'assistant',
        content: '',
      });
      
      // 调用AI服务
      const response = await fetch(api, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: [...messages, userMessage],
        }),
      });
      
      if (!response.ok) throw new Error('AI请求失败');
      
      // 处理流式响应
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value);
        // 更新助手消息内容
        setMessages(prev => prev.map(msg => 
          msg.id === assistantMessageId 
            ? { ...msg, content: msg.content + chunk } 
            : msg
        ));
      }
    } catch (err) {
      setError(err);
      onError?.(err);
    } finally {
      setIsLoading(false);
    }
  }, [messages, api, onError, appendMessage]);
  
  return {
    messages,
    isLoading,
    error,
    handleSubmit,
  };
}

实际使用示例：

// components/ChatInterface.tsx
import { useChat } from 'ai/react';

export function ChatInterface() {
  const { messages, isLoading, error, handleSubmit } = useChat({
    api: '/api/chat',
    initialMessages: [
      { 
        role: 'system', 
        content: '你是一个专业的React技术助手，帮助开发者解决问题' 
      }
    ],
    onError: (err) => {
      console.error('聊天错误:', err);
      alert('无法连接到AI服务，请稍后重试');
    }
  });
  
  const [input, setInput] = useState('');
  
  const handleInputSubmit = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    
    handleSubmit(input);
    setInput('');
  };
  
  return (
    <div className="chat-container">
      <MessageList messages={messages} />
      
      <form onSubmit={handleInputSubmit} className="input-form">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入你的问题..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? '发送中...' : '发送'}
        </button>
      </form>
      
      {error && (
        <div className="error-message">
          ⚠️ {error.message}
        </div>
      )}
    </div>
  );
}

useCompletion Hook：文本生成功能

useCompletion Hook适用于单次文本生成场景，如内容创作、摘要生成等。

// 简化版useCompletion实现原理
import { useState, useCallback } from 'react';

export function useCompletion({
  api = '/api/completion',
  initialInput = '',
}) {
  const [input, setInput] = useState(initialInput);
  const [completion, setCompletion] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);
  
  const generateCompletion = useCallback(async () => {
    if (!input.trim()) return;
    
    setIsLoading(true);
    setError(null);
    setCompletion('');
    
    try {
      const response = await fetch(api, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: input }),
      });
      
      if (!response.ok) throw new Error('文本生成失败');
      
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        const chunk = decoder.decode(value);
        setCompletion(prev => prev + chunk);
      }
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [input, api]);
  
  return {
    input,
    setInput,
    completion,
    isLoading,
    error,
    generateCompletion,
  };
}

3.3 完整组件实现与组合

现在我们来实现完整的聊天应用组件结构。良好的组件设计可以提高代码复用性和维护性。

组件层次设计

React AI组件层次结构 - 展示组件间的组合关系

消息列表组件

// components/MessageList.tsx
import { Message } from 'ai';

interface MessageListProps {
  messages: Message[];
}

export function MessageList({ messages }: MessageListProps) {
  // 过滤掉系统消息，只显示用户和助手消息
  const displayMessages = messages.filter(
    msg => msg.role !== 'system'
  );
  
  return (
    <div className="message-list">
      {displayMessages.map((message, index) => (
        <div 
          key={index} 
          className={`message message-${message.role}`}
        >
          <div className="message-role">
            {message.role === 'user' ? '你' : 'AI助手'}
          </div>
          <div className="message-content">
            {message.content}
          </div>
        </div>
      ))}
    </div>
  );
}

输入区域组件

// components/InputArea.tsx
import { useState } from 'react';

interface InputAreaProps {
  onSubmit: (input: string) => void;
  isLoading: boolean;
}

export function InputArea({ onSubmit, isLoading }: InputAreaProps) {
  const [input, setInput] = useState('');
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim() || isLoading) return;
    
    onSubmit(input);
    setInput('');
  };
  
  return (
    <form onSubmit={handleSubmit} className="input-area">
      <textarea
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入你的问题..."
        disabled={isLoading}
        rows={3}
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? '思考中...' : '发送'}
      </button>
    </form>
  );
}

主应用组件

// app/page.tsx
'use client';

import { ChatInterface } from './components/ChatInterface';

export default function Home() {
  return (
    <main className="app-container">
      <h1>React AI智能聊天助手</h1>
      <ChatInterface />
    </main>
  );
}

3.4 服务端渲染兼容处理

在Next.js等支持SSR的环境中，我们需要特别处理AI SDK的客户端依赖。以下是实现服务端渲染兼容的关键技术：

动态导入客户端组件

// app/page.tsx (服务端组件)
import dynamic from 'next/dynamic';

// 动态导入客户端AI组件
const ChatInterface = dynamic(
  () => import('./components/ChatInterface'),
  { 
    ssr: false,  // 禁用服务端渲染
    loading: () => <div>加载AI聊天界面...</div>
  }
);

export default function Home() {
  return (
    <main className="app-container">
      <h1>React AI智能聊天助手</h1>
      <ChatInterface />
    </main>
  );
}

服务端API路由实现

// app/api/chat/route.ts
import { NextResponse } from 'next/server';
import { openai } from '@ai-sdk/openai';

export async function POST(request: Request) {
  try {
    const { messages } = await request.json();
    
    // 调用OpenAI API
    const stream = await openai.chat.completions.create({
      model: 'gpt-4',
      messages,
      stream: true,
    });
    
    // 将流式响应转换为SSE格式
    const responseStream = new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          const content = chunk.choices[0]?.delta?.content || '';
          if (content) {
            controller.enqueue(`data: ${JSON.stringify({ content })}\n\n`);
          }
        }
        controller.close();
      },
    });
    
    return new NextResponse(responseStream, {
      headers: {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
      },
    });
  } catch (error) {
    console.error('AI API错误:', error);
    return NextResponse.json(
      { error: 'AI服务请求失败' },
      { status: 500 }
    );
  }
}

3.5 错误处理完整实现

健壮的错误处理是生产级应用的必备功能。以下是完整的错误处理策略实现：

// components/AIErrorBoundary.tsx
import { Component, ErrorInfo, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallback: ReactNode;
}

interface State {
  hasError: boolean;
  error?: Error;
}

export class AIErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    // 可以在这里添加错误日志记录
    console.error('AI组件错误:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

// 使用错误边界包装AI组件
export function AIWithErrorHandling({ children }) {
  return (
    <AIErrorBoundary
      fallback={
        <div className="error-boundary">
          <h3>⚠️ AI功能加载失败</h3>
          <p>无法连接到AI服务，请检查您的网络连接或稍后再试。</p>
          <button 
            onClick={() => window.location.reload()}
            className="retry-button"
          >
            重试
          </button>
        </div>
      }
    >
      {children}
    </AIErrorBoundary>
  );
}

四、优化迭代：提升React AI应用质量

构建基本功能后，我们需要关注应用的性能优化、用户体验提升和长期维护。本阶段将介绍关键的优化策略和最佳实践，帮助你打造生产级别的React AI应用。

4.1 性能优化技巧

React AI应用的性能优化需要从多个维度考虑，包括渲染效率、网络请求和资源管理。

1. 组件渲染优化

使用React.memo和useMemo减少不必要的重渲染：

// 优化消息项组件
const MessageItem = React.memo(({ message }) => {
  return (
    <div className={`message message-${message.role}`}>
      <div className="message-role">{message.role}</div>
      <div className="message-content">{message.content}</div>
    </div>
  );
});

// 优化消息列表
function MessageList({ messages }) {
  // 只在messages变化时重新计算显示消息
  const displayMessages = useMemo(
    () => messages.filter(msg => msg.role !== 'system'),
    [messages]
  );
  
  return (
    <div className="message-list">
      {displayMessages.map((message, index) => (
        <MessageItem key={index} message={message} />
      ))}
    </div>
  );
}

2. 请求缓存策略

实现请求结果缓存，避免重复调用AI服务：

// hooks/useCachedChat.ts
import { useChat } from 'ai/react';
import { useLocalStorage } from './useLocalStorage';

export function useCachedChat({ api, initialMessages }) {
  // 使用本地存储缓存对话历史
  const [cachedMessages, setCachedMessages] = useLocalStorage(
    'chat-history', 
    initialMessages
  );
  
  const { messages, ...rest } = useChat({
    api,
    initialMessages: cachedMessages,
    onMessageChange: (newMessages) => {
      // 保存对话历史到本地存储
      setCachedMessages(newMessages);
    },
  });
  
  return { messages, ...rest };
}

3. 流式响应处理优化

实现更高效的流式响应处理，减少重渲染次数：

// 优化的流式响应处理
const [completion, setCompletion] = useState('');
const [buffer, setBuffer] = useState('');
const bufferTimeout = useRef(null);

// 缓冲更新，每100ms更新一次UI
const handleStreamChunk = (chunk) => {
  setBuffer(prev => {
    const newBuffer = prev + chunk;
    
    // 清除之前的超时
    if (bufferTimeout.current) {
      clearTimeout(bufferTimeout.current);
    }
    
    // 设置新的超时，延迟更新以减少重渲染
    bufferTimeout.current = setTimeout(() => {
      setCompletion(prev => prev + newBuffer);
      setBuffer('');
    }, 100);
    
    return newBuffer;
  });
};

// 组件卸载时清除超时
useEffect(() => {
  return () => {
    if (bufferTimeout.current) {
      clearTimeout(bufferTimeout.current);
    }
  };
}, []);

4.2 性能测试指标

为确保React AI应用的性能达到生产标准，以下是关键的性能测试指标和参考标准：

指标 目标值 测量方法
首次内容绘制 (FCP) < 1.5秒 Lighthouse
最大内容绘制 (LCP) < 2.5秒 Lighthouse
首次输入延迟 (FID) < 100ms Web Vitals
AI响应首次字节时间 < 300ms 自定义性能计时
流式响应更新频率 10-20次/秒 自定义性能计时
内存使用峰值 < 200MB Chrome DevTools

实现性能监控的代码示例：

// hooks/usePerformanceMonitor.ts
import { useEffect, useRef } from 'react';

export function usePerformanceMonitor() {
  const aiRequestStart = useRef(0);
  
  const startAIRequestTimer = () => {
    aiRequestStart.current = performance.now();
  };
  
  const endAIRequestTimer = (requestType: string) => {
    if (aiRequestStart.current === 0) return;
    
    const duration = performance.now() - aiRequestStart.current;
    console.info(`AI ${requestType} 请求耗时: ${duration.toFixed(2)}ms`);
    
    // 可以在这里发送性能数据到分析服务
    // analytics.track('ai_request_performance', {
    //   type: requestType,
    //   duration,
    //   timestamp: new Date().toISOString()
    // });
    
    aiRequestStart.current = 0;
  };
  
  return {
    startAIRequestTimer,
    endAIRequestTimer,
  };
}

4.3 常见兼容性问题排查清单

在React AI应用开发过程中，可能会遇到各种兼容性问题。以下是常见问题的排查清单：

浏览器兼容性

  • [ ] 检查流式响应在各浏览器中的支持情况
  • [ ] 测试TextDecoder API的兼容性
  • [ ] 验证ReadableStream的实现差异

框架兼容性

  • [ ] 确认React版本与AI SDK的兼容性
  • [ ] 检查Next.js App Router与AI SDK的集成问题
  • [ ] 验证服务端渲染模式下的客户端水合问题

网络问题

  • [ ] 实现离线状态检测和友好提示
  • [ ] 添加网络错误自动重试机制
  • [ ] 设计弱网络环境下的降级策略

安全问题

  • [ ] 确保API密钥未暴露在客户端代码中
  • [ ] 实现请求频率限制，防止滥用
  • [ ] 添加输入验证，防止注入攻击

4.4 功能扩展与未来迭代

React AI应用的迭代可以从以下几个方向展开：

多模态支持

扩展应用以支持图像生成和理解：

// 图像生成组件示例
import { useGenerateImage } from 'ai/react';

function ImageGenerator() {
  const { 
    generateImage, 
    isLoading, 
    images, 
    error 
  } = useGenerateImage({
    api: '/api/generate-image',
  });
  
  const [prompt, setPrompt] = useState('');
  
  return (
    <div className="image-generator">
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="描述你想要生成的图像..."
      />
      <button 
        onClick={() => generateImage(prompt)}
        disabled={isLoading || !prompt}
      >
        生成图像
      </button>
      
      {isLoading && <div>生成中...</div>}
      
      {error && <div className="error">⚠️ {error.message}</div>}
      
      <div className="image-grid">
        {images.map((image, index) => (
          <img 
            key={index} 
            src={image.url} 
            alt={`AI生成图像: ${prompt}`}
          />
        ))}
      </div>
    </div>
  );
}

AI助手个性化

添加用户偏好设置，实现个性化AI交互：

// 个性化设置上下文
const AIContext = createContext();

export function AIProvider({ children }) {
  const [preferences, setPreferences] = useState({
    model: 'gpt-4',
    tone: 'friendly',
    responseLength: 'medium',
    // 其他个性化设置
  });
  
  return (
    <AIContext.Provider value={{ preferences, setPreferences }}>
      {children}
    </AIContext.Provider>
  );
}

// 在聊天组件中使用个性化设置
function ChatWithPreferences() {
  const { preferences } = useContext(AIContext);
  
  const { messages, handleSubmit } = useChat({
    api: '/api/chat',
    initialMessages: [
      { 
        role: 'system', 
        content: `你是一个${preferences.tone}的助手，回答应该${
          preferences.responseLength === 'short' ? '简洁' : 
          preferences.responseLength === 'medium' ? '详细' : '非常详尽'
        }。` 
      }
    ],
  });
  
  // ...
}

AI生成图像示例

AI生成的卡通熊形象 - 展示React AI应用的多模态能力

总结与展望

通过本文的四个阶段——问题发现、方案设计、实战开发和优化迭代，我们全面覆盖了React与AI SDK集成的关键技术和最佳实践。从理解核心挑战到实现高性能应用，每个阶段都提供了可操作的代码示例和清晰的实施路径。

React AI集成是一个快速发展的领域，随着React 18的并发特性和AI模型能力的不断增强，未来将有更多创新的交互模式和应用场景出现。作为开发者，保持对新技术的关注，持续优化用户体验，是构建成功AI应用的关键。

希望本文提供的指南能够帮助你在React项目中顺利集成AI功能，打造出既智能又高效的现代Web应用。记住，最好的AI应用不仅需要强大的技术支持，还需要深入理解用户需求，创造真正有价值的智能体验。

祝你的React AI开发之旅顺利！

ai
The AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents
项目地址：https://gitcode.com/GitHub_Trending/ai/ai
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起
kernelkernel
deepin linux kernel
C
28
16
atomcodeatomcode
Claude Code 的开源替代方案。连接任意大模型，编辑代码，运行命令，自动验证 — 全自动执行。用 Rust 构建，极致性能。 ｜ An open-source alternative to Claude Code. Connect any LLM, edit code, run commands, and verify changes — autonomously. Built in Rust for speed. Get Started
Rust
572
99
docsdocs
暂无描述
Dockerfile
710
4.51 K
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
958
955
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.61 K
942
pytorchpytorch
Ascend Extension for PyTorch
Python
572
694
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
413
339
cherry-studiocherry-studio
🍒 Cherry Studio 是一款支持多个 LLM 提供商的桌面客户端
TypeScript
1.43 K
116
flutter_flutterflutter_flutter
暂无简介
Dart
952
235
nop-entropynop-entropy
Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用
Java
12
2