25 篇文章带有标签 “typescript”

链接

Excalidraw - 开源手绘风格虚拟白板

Excalidraw 是一款广受欢迎的开源虚拟白板工具，主打“手绘风格”的图表绘制体验。它让用户在数字画布上画出看起来像随手涂鸦、却又结构清晰的示意图，既保留了手绘的自然感，又具备现代协作工具的便利。

其核心定位可以概括为以下几个方面：

1. 产品核心能力

  • 手绘风格画布：无限画布 + 手绘质感线条，默认的“潦草”风格让技术图表少了些冰冷，多了些亲和力。
  • 实时多人协作：支持多人同时编辑，并通过端到端加密保护协作数据。
  • 本地优先：自动保存到浏览器本地，断网也能继续绘制；支持导出 .excalidraw JSON 文件。
  • 丰富导出格式：可导出 PNG、SVG，或复制到剪贴板，也能生成只读分享链接。
  • 完整绘图工具：矩形、圆形、菱形、箭头、自由绘制、文字、橡皮擦、素材库等一应俱全。

2. 技术栈与开源信息

  • 主要基于 TypeScript 和 React 构建，代码质量高，社区活跃。
  • 采用 MIT 许可证，完全免费开源。
  • 在 GitHub 上已获得超过 126k Stars 和 14.2k Forks。
  • 支持 PWA，可离线使用；也提供 Docker 部署方式。

3. 生态集成

Excalidraw 不只是独立的在线白板，它已经被集成到众多知名工具中：

  • Obsidian：通过插件在笔记中直接绘图。
  • VS Code：官方扩展让开发者在编辑器内画架构图。
  • Notion、Replit、CodeSandbox、Google Cloud：均被采用为内置或推荐绘图方案。
  • npm 包 @excalidraw/excalidraw：开发者可将白板能力嵌入自己的 React 应用。
excalidraw whiteboard diagram drawing-tools open-source collaboration react typescript pwa

KiloCode AGENTS.md - OpenCode 智能体指南

构建/测试 (Build/Test)

  • 运行 (Run): bun run --conditions=browser ./src/index.ts
  • 测试 (Test): bun test（运行所有测试）或 bun test test/tool/tool.test.ts（运行单个测试）
  • 类型检查 (Typecheck): bun run typecheck（运行 tsgo --noEmit）

导入别名 (Import Aliases)

  • @/* 映射到 ./src/*
  • @tui/* 映射到 ./src/cli/cmd/tui/*

核心模式 (Key Patterns)

命名空间模块 (Namespace modules) —— 代码以 TypeScript 命名空间（Namespace）的形式组织，而不是类（Class）。每个模块导出一个包含其 Zod schema、类型和函数的命名空间：

export namespace Session {
  export const Info = z.object({ ... })
  export type Info = z.infer<typeof Info>
  export const create = fn(z.object({ ... }), async (input) => { ... })
}

Instance.

kilocodeopencodeagents-mdtypescriptbunzodsolidjshonovercel-ai-sdk智能体指南

Pi Agent Event Examples

事件流

事件类型

事件 描述
agent_start 智能体开始处理
agent_end 运行的最终事件。为此事件等待的订阅者仍会计入结算
turn_start 新轮次开始（一次 LLM 调用 + 工具执行）
turn_end 轮次完成，包含助手消息和工具结果
message_start 任何消息开始（user、assistant、toolResult）
message_update 仅限助手。 包含带有增量的 assistantMessageEvent
message_end 消息完成
tool_execution_start 工具开始执行
tool_execution_update 工具流式传输进度
tool_execution_end 工具执行完成

prompt() 事件序列

当你调用 prompt("Hello") 时：

pi-agentevent-driventypescriptagent-lifecycletool-executionstreaming-eventsopenai-apilongcat事件流智能体示例

Pi Agent SDK 参考文档

本 SDK 提供对 Pi 智能体能力的程序化访问。可用于将 Pi 嵌入其他应用、构建自定义界面，或集成到自动化工作流中。

典型使用场景：

  • 构建自定义界面（网页、桌面、移动端）
  • 将智能体能力集成到现有应用
  • 用智能体推理创建自动化流程
  • 构建可生成子智能体的自定义工具
  • 以编程方式测试智能体行为

参见 examples/sdk/，获取从极简到全量控制的可运行示例。

快速上手 import { AuthStorage, createAgentSession, ModelRegistry, SessionManager } from "@earendil-works/pi-coding-agent"; // 设置凭证存储与模型注册器 const authStorage = AuthStorage.create(); const modelRegistry = ModelRegistry.create(authStorage); const { session } = await createAgentSession({ sessionManager: SessionManager.inMemory(), authStorage, modelRegistry, }); // 订阅事件流 session.subscribe((event) => { if (event.

pi-agentsdktypescriptagent-sessionagent-frameworkllm-toolsevent-streamingsession-management智能体开发扩展开发

Pi - AI 编码智能体架构设计文档

Pi 是一个模块化的 AI 编码智能体 Monorepo，使用 TypeScript 构建。它提供统一的 LLM 抽象层、通用的智能体运行时、丰富的终端 UI 框架，以及完全可扩展的编码智能体命令行工具。

1. 项目概览

Pi（@earendil-works/pi-mono）是由 Mario Zechner 开发的 AI 编码智能体 Monorepo，设计理念是模块化、可扩展、供应商无关。它将多个 LLM 供应商的复杂性抽象为统一 API，提供强大的智能体运行时和工具执行能力，并附带生产就绪的终端 UI。

核心能力

能力 说明
统一 LLM API 9 种 API 协议和 30+ 供应商品牌的单一接口。只需修改一个字符串即可切换供应商。
智能体运行时 完整的智能体循环，支持并行工具执行、消息注入队列和上下文压缩。
丰富的终端 UI 独立的终端 UI 框架，支持差异化渲染、文本编辑器、图片显示和浮层系统。
扩展系统 80+ 扩展示例、20+ 生命周期钩子。可注册工具、命令、快捷键和供应商。
Web 组件 基于 Lit 的聊天 UI，支持沙箱化 Artifact 渲染（HTML、SVG、PDF、DOCX 等）。
多运行模式 交互式终端、管道友好的打印模式，以及用于 IDE 集成的 JSONL RPC 模式。

包依赖关系图

pi-agent智能体架构设计typescriptmonorepollmtuilittailwind-cssextension

Kilo Code：基于智能体工程的自动化软件开发平台

Kilo Code

简介

Kilo Code 是一个开源的一站式智能体工程（Agentic Engineering）平台，旨在通过 AI 智能体（Agents）自动化软件开发全流程。它是目前 GitHub 上非常活跃的项目，核心定位是作为开发者的 AI 辅助引擎，帮助构建、部署和迭代代码。

安装

# npm
npm install -g @kilocode/cli

# Or run directly with npx
npx @kilocode/cli

Kilo CLI

主要功能

Kilo项目核心能力分析

基于项目文档和代码结构分析，Kilo是一个开源的AI编码智能体平台，主要用于加速软件开发过程。它是OpenCode项目的fork版本，增强为全面的agentic工程平台。以下是其核心能力的详细分析：

  1. AI驱动的代码生成与自动化 核心功能：支持从自然语言描述生成代码，例如用户输入"add input validation to the signup form"，智能体会自动生成相应的代码片段。 自动化任务：能够自动化重复性编码任务，如重构代码、运行测试、修复错误等。智能体会自我检查工作，确保代码质量。 内联自动完成：提供实时AI驱动的代码补全建议，提升编码效率。
kilo-code智能体coding-agentagentic-engineeringmcpclivs-code-extensionhonovercel-ai-sdktypescript

Claude Code 源代码分析

创建 CLAUDE.md

这样它会将项目的规范、构建命令和架构要点记录下来，后续对话中它会自动参考这个文件，不再需要你重复解释背景。有利于后续的代码分析、调试和功能开发。

运行 /init 命令

/init - 自动分析该项目并生成 CLAUDE.md

我已为该仓库成功创建了CLAUDE.md文件。以下是文件包含的内容：

### CLAUDE.md 内容概要
1. **概述** - 包含项目统计信息（约1884个文件、51.2万行代码、40+工具、80+命令）的项目说明，以及法律免责声明。

2. **命令** - 构建与开发相关命令：
    - `npm run prepare-src` - 准备源码
    - `npm run build` - 使用esbuild构建
    - `npm run check` - 执行类型检查
    - `npm start` - 运行编译后的命令行工具

3. **高层架构**：
    - src/query.ts中的核心智能体循环模式
    - 核心目录（入口点、命令行、命令、工具、组件、服务、状态、工具函数）
    - 关键文件及其用途
// ...

CLAUDE.md

本文件用于指导 Claude Code（claude.ai/code）处理此代码仓库中的代码。

概述

本仓库包含 Claude Code v2.1.

claude-codeai-agentsource-code-analysistypescriptquery-enginesubagentmcpcontext-managementpermissions智能编码助手

Claude Code 项目概览及架构设计

一、项目概述

Claude Code 是 Anthropic 开发的一款终端智能体编码工具，通过自然语言与开发者交互，理解代码库上下文，自动化完成日常编码任务、代码审查、Git 工作流管理等工作。

核心特性

  • 基于 Anthropic Claude 大语言模型
  • 高度可扩展的插件架构
  • 安全的工具调用和权限管理
  • 支持多种工作流和集成

二、项目目录结构

claude-codeai-agentcoding-agentanthropictypescriptnodejsbunmcpplugin-system智能编码助手

Next AI Draw.io 架构设计分析

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. 整体架构

next-ai-draw-iodrawiodiagram-generationvercel-ai-sdknextjsreacttypescriptelectron

Vercel AI SDK 架构设计分析

1. 项目概述

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

核心特性

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

2. 整体架构

vercel-ai-sdkai-sdktypescriptagenttool-callingstreamingreactprovider-abstraction

elizaOS 多智能体架构设计分析

📋 概述

elizaOS 是一个开源的多智能体 AI 开发框架，用于构建、部署和管理自主 AI 智能体。采用现代化、可扩展的全功能平台设计。

核心特性

  • 🔌 丰富的连接器：内置 Discord、Telegram、Farcaster 等支持
  • 🧠 模型无关：支持 OpenAI、Gemini、Anthropic、Llama、Grok 等主流模型
  • 🖥️ 现代 Web UI：专业仪表板，实时管理智能体、群组和对话
  • 🤖 多智能体架构：从底层设计支持创建和编排专业智能体组
  • 📄 文档摄取：轻松摄取文档，支持 RAG 检索和问答
  • 🛠️ 高度可扩展：强大的插件系统构建自定义功能
  • 📦 开箱即用：无缝的设置和开发体验

🏗️ 系统架构概览

项目结构

elizaosmulti-agentagent-frameworkarchitectureplugin-systemragtypescriptsandbox

需求即代码：ZeroAI 让开发触手可及

ZeroAI 是一个通用的 AI 驱动软件开发助手，能够按照标准化的五步流程开发任意软件应用。从需求理解到代码生成，让 AI 帮你完成整个软件开发周期。

特性

  • 🚀 五步开发流程：需求分析 → 接口设计 → 数据库设计 → 业务逻辑设计 → 代码生成
  • 💾 版本管理：完整的项目版本控制，支持创建、查看和加载历史版本
  • 📝 Word 导出：一键导出项目文档到 Word 格式
  • 🎯 交互式审查：每一步生成结果都可查看、审批或重新生成
  • 📊 实时日志：完整记录 AI 开发过程中的所有操作和输出
  • 🔄 数据持久化：使用 SQLite 数据库存储项目数据

技术栈

核心依赖

  • 框架: Next.js 16 (App Router)
  • 语言: TypeScript
  • 样式: Tailwind CSS 4
  • 数据库: Better-SQLite3
  • AI: OpenAI API (兼容 LongCat 等第三方 API)
  • 文档导出: docx

测试依赖

  • 测试框架: Vitest
  • 测试 UI: Vitest UI
  • React 测试: @testing-library/react
  • DOM 断言: @testing-library/jest-dom
  • 用户事件: @testing-library/user-event
  • 浏览器环境: jsdom

快速开始

环境配置

  1. 复制环境变量模板：
cp .env.example .env
zeroaiagentsoftware-developmentnextjstypescriptsqliteopenai-apivitest

本地 AI 助手 OpenClaw：macOS 实操指南 + 核心架构分析

OpenClaw 简介

自2025年11月由PSPDFKit创始人Peter Steinberger作为周末项目启动（最初名为Clawd/Clawdbot），OpenClaw（曾短暂更名为Moltbot）在2026年1月迅速走红，成为当年上半年增长最快的开源AI智能体框架之一。该项目GitHub星数已超过13万（部分报道接近15万），其最大亮点在于真正实现了“本地优先、本地执行”的自主任务能力，而非单纯的云端聊天。

OpenClaw不是传统AI聊天助手，而是一个运行在用户本地硬件（Mac、PC、服务器）上的自动化中枢。它通过消息类应用（如WhatsApp、Telegram、iMessage、Discord等）接收自然语言指令，能够执行真实电脑操作：读写文件、运行命令、操作浏览器、管理邮件日历、甚至自主编写新技能。

OpenClaw 项目架构概览

设计哲学 OpenClaw 被设计为一个模块化、可扩展且强健的个人 AI 助手系统。其核心理念包括： 解耦 (Decoupling)：将智能体逻辑与传输层（如 Discord、Telegram 等通道）以及控制平面（Gateway）分离。 可扩展性 (Extensibility)：通过 Hook 和插件系统支持注入上下文或对智能体运行进行后处理。

openclawagentlocal-aimacosskilldiscordgatewaytypescriptnodejspersonal-ai-assistant

Gemini CLI 项目分析与开发指南

本文档围绕着初学者如何分析并开发一个类似 Gemini CLI 的项目提供了详尽的指南。核心思想是将复杂的项目分解为可管理的部分，并提供分步学习路径。指南强调了理解项目架构（如前端CLI和后端Core的职责）、熟悉代码结构、掌握核心功能（如API交互和工具系统）、以及通过实践进行学习的重要性。通过阅读文档、运行和调试代码、并尝试进行小修改，学习者能够逐步掌握此类项目的开发技能。在 VSCode 中，使用 GitHub Copilot 的 Ask 模式分别对大模型（如 GPT-4.1、GPT-4o、Gemini 2.5 Pro 和 Claude Sonnet 系列）进行提问并总结。

问题

#codebase 我作为初学者，如何开始分析这个项目，以达到学习的目的，可以手动开发这种类型的项目。

下面是不同大模型给出的回答：

GPT-4.1

作为初学者，分析并学习 Gemini CLI 这样的大型项目，可以按照以下步骤进行，帮助你理解架构、掌握开发流程，并为将来手动开发类似项目打下基础：

1. 阅读架构文档，理解整体结构

你可以从 architecture.md 开始，重点关注以下内容：

  • 核心组件：项目分为 CLI 前端（cli）、Core 后端（core）和工具模块（tools）。
  • 交互流程：用户输入 → CLI 处理 → Core 构建请求并与 Gemini API 通信 → 工具调用（如有）→ 返回结果 → CLI 展示。
  • 设计原则：模块化、可扩展性、良好的用户体验。
gemini-cligithub-copilotproject-analysislearning-guidetypescriptmonorepomcpllm软件开发

Cline 概览 - Cline 扩展架构和开发指南

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）提供类型安全的状态访问。
clinevscode-extensiontypescriptreactai-coding-assistantmcpapi-providertask-executioncontext-management架构设计

Cline Documentation

Cline 文档目录

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

入门指南

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

提升提示工程技能

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

探索 Cline 的工具

为 Cline 做贡献

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

其他资源

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

Cline 入门指南 | 新手程序员

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

你需要准备的东西

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

  • 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 扩展。
clinecline-docvscode-extensionai-coding-assistantopenrouterreacttypescriptmcp文档入门指南

MCP 服务器开发协议

开发协议

有效的 MCP 服务器开发的核心是遵循结构化的协议。该协议通过位于 MCP 工作目录根目录（/Users/your-name/Documents/Cline/MCP）中的 .clinerules 文件实现。

使用 .clinerules 文件

.clinerules 文件是一个特殊的配置文件，Cline 会在放置该文件的目录中工作时自动读取。这些文件：

  • 配置 Cline 的行为并执行最佳实践
  • 将 Cline 切换到专门的 MCP 开发模式
  • 提供构建服务器的分步协议
  • 实施安全措施，如防止过早完成
  • 指导您完成规划、实施和测试阶段

以下是应放置在 .clinerules 文件中的完整 MCP 服务器开发协议：

clinemcpmodel-context-protocolmcp-serverclinerulesmcp-sdktypescriptpython测试开发协议