New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

ai-agent-plugin

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ai-agent-plugin

跨框架通用的AI Agent前端插件

latest

Source

npm

Version: 0.0.1

Version published: last month

Maintainers: 1

Created: last month

Source

AI Agent Plugin

一个能在 Vue、React、jQuery 等多框架项目中通用的 AI Agent 前端插件，采用原生 JavaScript + TypeScript + UMD 模块化规范，确保跨框架兼容性。

🔥 新增预览功能

本项目已集成 TypeScript 示例和多框架预览页面，支持本地快速预览和调试。

启动预览命令：

npm run serve

默认端口：9000
预览入口：
- http://localhost:9000/

特性

✅ 跨框架兼容：支持 Vue、React、jQuery 等任意前端项目
✅ 样式隔离：避免与宿主项目样式冲突
✅ 主题定制：支持浅色/深色主题
✅ 位置灵活：支持四角悬浮定位
✅ 简单易用：引入即可使用，无复杂配置

安装

直接引入

<script src="path/to/ai-agent.min.js"></script>

NPM 安装

npm install ai-agent-plugin --save

TypeScript 示例与预览

项目内 examples/typescript 目录下，包含完整的 React/Vue/jQuery TypeScript 示例代码和预览页面。

进入示例目录并安装依赖：

cd examples/typescript
npm install
npm start

访问对应页面即可预览和调试。

使用方法

在 jQuery 项目中使用

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="path/to/ai-agent.min.js"></script> <!-- 引入插件 -->
</head>
<body>
  <h1>jQuery 项目</h1>
  <script>
    $(document).ready(function() {
      // 初始化 AI Agent
      window.aiAgent = new AIAgent({
          host: 'http://localhost:8080',          // 后端站点主机（插件会在该 host 下拼接 /api/ai/chat/... 路径）
          // 说明：为向后兼容，如果仍传入 apiUrl（示例中旧字段），插件也会识别并适配
          secret: 'your-api-secret-key',   // API 密钥（必填）
          stream: false,                   // 是否启用流式响应
          title: 'jQuery AI 助手',
          position: 'bottom-right'
        });
    });
  </script>
</body>
</html>

在 React 项目中使用

import React, { useEffect } from 'react';
// 引入 AI Agent 插件
import AIAgent from 'ai-agent-plugin';
// 或通过 script 标签引入后，使用全局变量 window.AIAgent

function App() {
  useEffect(() => {
    // 初始化 AI Agent
    const aiAgent = new AIAgent({
  host: 'http://localhost:8080',          // 后端站点主机（可选）
  // 如果未提供 host，插件会回退到内置默认 host：
  // http://localhost:8080
  // 注意：当您提供远程（非 localhost）host 时，secret 为必填，用于后端鉴权
  secret: 'your-api-secret-key',   // API 密钥（当使用真实远端 host 时必填）
      stream: true,                    // 启用流式响应
      theme: 'dark',
      title: 'React AI 助手'
    });
    
    // 组件卸载时销毁插件
    return () => aiAgent.destroy();
  }, []);

  return <div>React 项目</div>;
}

export default App;

在 Vue 项目中使用

<template>
  <div>Vue 项目</div>
</template>

<script>
import AIAgent from 'ai-agent-plugin';
// 或通过 script 标签引入后，使用全局变量 window.AIAgent

export default {
  mounted() {
    // 初始化 AI Agent
    this.aiAgent = new AIAgent({
      host: 'http://localhost:8080',          // 后端站点主机
      // 兼容旧字段：如果仍使用 apiUrl，插件会自动转换为 host
      secret: 'your-api-secret-key',   // API 密钥（必填）
      stream: false,                   // 普通响应模式
      title: 'Vue AI 助手',
      position: 'bottom-left'
    });
  },
  beforeDestroy() {
    // 组件销毁前清理插件
    if (this.aiAgent) this.aiAgent.destroy();
  }
};
</script>

配置选项

选项	类型	默认值	必填	说明
secret	String	-	✅	API 密钥/令牌，必须提供
apiUrl	String	'/api/ai/chat'	-	后端 AI 接口地址
host	String	'http://localhost:8080'	-	后端站点主机，插件会拼接 /api/ai/chat/... 路径（向后兼容：仍支持旧字段 `apiUrl`）
stream	Boolean	false	-	是否启用流式响应
theme	String	'light'	-	主题，可选：'light'/'dark'
position	String	'bottom-right'	-	位置，可选：'bottom-right'/'bottom-left'/'top-right'/'top-left'
title	String	'AI 助手'	-	面板标题
placeholder	String	'请输入问题...'	-	输入框占位文本

后端接口说明

插件支持以下后端接口格式：

普通模式接口

POST /api/ai/chat/completion
Content-Type: application/json
Authorization: Bearer your-api-secret-key

{
  "content": "用户输入的消息"
}

流式模式接口

POST /api/ai/chat/stream
Content-Type: application/json
Authorization: Bearer your-api-secret-key

{
  "messages": [
    {"role": "user", "content": "用户输入的消息"}
  ]
}

流式响应格式为 Server-Sent Events (SSE)，响应头：Content-Type: text/event-stream

方法

方法	说明
destroy()	销毁插件，清理 DOM 和事件
togglePanel()	切换面板显示/隐藏
closePanel()	关闭面板
sendMessage(text)	发送消息到 AI 接口

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

许可证

MIT

Keywords

FAQs

What is ai-agent-plugin?

Is ai-agent-plugin well maintained?

Package last updated on 23 Feb 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

ai-agent-plugin

AI Agent Plugin

🔥 新增预览功能

特性

安装

直接引入

NPM 安装

TypeScript 示例与预览

使用方法

在 jQuery 项目中使用

在 React 项目中使用

在 Vue 项目中使用

配置选项

后端接口说明

普通模式接口

流式模式接口

方法

开发

许可证

Keywords

Related posts

Supply Chain Attack on Axios Pulls Malicious Dependency from npm

TeamPCP Compromises Telnyx Python SDK to Deliver Credential-Stealing Malware