9 篇文章带有标签 “react”

1. 项目概述

Next AI Draw.io 是一个 AI 驱动的图表创建工具，通过自然语言命令和 AI 辅助可视化来创建、修改和增强 draw.io 图表。

核心特性

• LLM 驱动的图表创建：利用大语言模型通过自然语言直接创建和操作 draw.io 图表
• 基于图像的图表复制：上传现有图表或图像，让 AI 自动复制和增强
• PDF 和文本文件上传：上传 PDF 文档和文本文件以提取内容并生成图表
• AI 推理显示：查看支持模型的 AI 思考过程（OpenAI o1/o3、Gemini、Claude 等）
• 图表历史记录：全面的版本控制，跟踪所有更改
• 交互式聊天界面：与 AI 实时交流以完善图表
• 云架构图表支持：专门支持生成云架构图表（AWS、GCP、Azure）
• 动画连接器：创建动态和动画化的图表元素连接器

技术栈

• 框架：Next.js 16.x + React 19.x
• AI SDK：Vercel AI SDK (ai + @ai-sdk/*)
• 图表渲染：react-drawio
• 样式：Tailwind CSS 4.x
• UI 组件：Radix UI + shadcn/ui
• 多语言支持：i18n
• 桌面应用：Electron
• 部署：Vercel / Cloudflare Workers / EdgeOne Pages

2. 整体架构

1. 项目概述

Vercel AI SDK 是一个与提供商无关的 TypeScript 工具包，旨在帮助开发者使用流行的 UI 框架（如 Next.js、React、Svelte、Vue、Angular）和运行时（如 Node.js）构建 AI 驱动的应用程序和智能体。

核心特性

• 统一提供商架构：支持 OpenAI、Anthropic、Google 等多个模型提供商
• 多框架支持：React、Svelte、Vue、Angular
• 多种模型类型：文本生成、嵌入、图像、语音、转录、重排等
• 智能体框架：ToolLoopAgent 等工具循环代理
• 流式输出：支持实时流式响应

2. 整体架构

1. 项目概述

Cline 是一个 AI 驱动的编程助手 VS Code 扩展，基于 Claude Sonnet 的代理编程能力。它能够处理复杂的软件开发任务，包括：

• 文件创建和编辑
• 项目探索和代码分析
• 命令执行
• 浏览器自动化
• MCP (Model Context Protocol) 工具扩展

2. 整体架构图

总结

• Cline Overview

Cline 扩展架构和开发指南

项目概述

Cline 是一个 VSCode 扩展，通过核心扩展后端和基于 React 的 webview 前端的组合提供 AI 辅助功能。该扩展使用 TypeScript 构建，遵循模块化架构模式。

架构概述

定义

• 核心扩展：src 文件夹内的所有内容，按模块化组件组织
• 核心扩展状态：由 index.ts 中的 Controller 类管理，作为扩展状态的唯一真实来源。它管理多种类型的持久存储（全局状态、工作区状态和密钥），处理状态在核心扩展和 webview 组件之间的分发，并协调多个扩展实例之间的状态。这包括管理 API 配置、任务历史、设置和 MCP 配置。
• Webview：webview-ui 内的所有内容。所有用户可见的 react 或视图以及用户交互组件
• Webview 状态：由 ExtensionStateContext.tsx 中的 ExtensionStateContext 管理，通过上下文提供者模式为 React 组件提供对扩展状态的访问。它维护 UI 组件的本地状态，通过消息事件处理实时更新，管理部分消息更新，并提供状态修改方法。上下文包括扩展版本、消息、任务历史、主题、API 配置、MCP 服务器、市场目录和工作区文件路径。它通过 VSCode 的消息传递系统与核心扩展同步，并通过自定义钩子（useExtensionState）提供类型安全的状态访问。

Cline 文档目录

欢迎阅读 Cline 文档 - 这是一份全面的指南，帮助您使用和扩展 Cline 的功能。在这里，您可以找到帮助您入门、提升技能和为项目做出贡献的资源。

入门指南

• 编程新手？ 我们为您准备了温和的入门指南：
  • 编程新手入门指南

提升提示工程技能

• 想要更有效地与 Cline 沟通？ 请探索：
  • 提示工程指南
  • Cline 记忆库

探索 Cline 的工具

• 了解 Cline 的功能：
  • Cline 工具指南
  • Mentions 功能指南

• 使用 MCP 服务器扩展 Cline：
  • MCP 概述
  • 从 GitHub 构建 MCP 服务器
  • 构建自定义 MCP 服务器

为 Cline 做贡献

• 有兴趣做出贡献？ 我们欢迎您的参与：
  • 欢迎提交拉取请求
  • 贡献指南

其他资源

• Cline GitHub 仓库： https://github.com/cline/cline
• MCP 文档： https://modelcontextprotocol.org/docs

我们一直在努力改进这份文档。如果您有建议或发现需要改进的地方，请告诉我们。您的反馈有助于让 Cline 变得更好。

Cline 入门指南 | 新手程序员

欢迎使用 Cline！本指南将帮助你完成设置并开始使用 Cline 构建你的第一个项目。

你需要准备的东西

在开始之前，请确保你具备以下条件：

• VS Code： 一个免费且功能强大的代码编辑器。
  • 下载 VS Code
• 开发工具： 基础的编程软件（Homebrew、Node.js、Git 等）。
  • 在完成这里的设置后，请参考我们的安装基本开发工具指南，通过 Cline 的帮助来完成这些设置
  • Cline 将指导你安装所需的一切
• Cline 项目文件夹： 一个专门存放所有 Cline 项目的文件夹。
  • macOS：在你的文档文件夹中创建一个名为 "Cline" 的文件夹
    • 路径：/Users/[你的用户名]/Documents/Cline
  • Windows：在你的文档文件夹中创建一个名为 "Cline" 的文件夹
    • 路径：C:\Users\[你的用户名]\Documents\Cline
  • 在这个 Cline 文件夹内，为每个项目创建单独的文件夹
    • 示例：Documents/Cline/workout-app 用于健身追踪应用
    • 示例：Documents/Cline/portfolio-website 用于个人作品集
• VS Code 中的 Cline 扩展： 在 VS Code 中安装 Cline 扩展。

• 提示词：使用 React 技术实现 Tic Tac Toe 游戏

• 运行游戏

• 创建新仓库

• 快速设置仓库

• 退出游戏

• 查看已安装的 MCP 服务器

• 创建新问题（issue）

• 查看 wang-junjian/tictactoe 项目中分配给我 issue，使用 GitHub MCP 服务器的工具 list_issues

• 当前仓库 wang-junjian/tictactoe 中有1个开放的 issue

• 分步实现 issue #1 玩家获胜时添加烟花效果

• 实现 issue #1 玩家获胜时添加烟花效果

• 运行游戏 - 获胜后的烟花效果

• 创建新问题 - Refactoring

• 创建分支 git switch -c Refactoring，对项目中的代码进行重构

• 完成代码重构

• 推送到远程仓库，git push -u origin Refactoring

• Compare & pull request

• 创建拉取请求（pull request），关联问题（issue #2）

• wang-junjian/tictactoe 项目中分配给我的 PR，使用 GitHub MCP 服务器的工具 get_pull_request

• 使用 GitHub MCP 服务器的工具 get_pull_request_files 获取 PR 的变更文件列表

• 完成 PR #3 的代码评审

• 使用 GitHub MCP 服务器的工具 add_issue_comment，提交代码评审

1. 初始化Next.js项目

首先，创建一个新的Next.js项目：

npx create-next-app next-quiz-app
cd next-quiz-app

运行

npm run dev

ESLint

npm run lint

> next-quiz-app@0.1.0 lint
> next lint

✔ No ESLint warnings or errors