大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 NLUX

The Conversational AI JavaScript Library — UI for any LLM, supporting LangChain / HuggingFace / Vercel AI, and more React, Next.js, and plain JavaScript ??

NLUX 是用于构建对话式 AI 界面的 React 和 JavaScript 开源库，其使构建由大型语言模型 (LLM) 和 AI 支持的 Web 应用程序变得非常简单。只需几行代码，开发者就可以添加对话式 AI 功能并与最喜欢的 AI 模型进行交互。

NLUX 的典型特征包括：

• 在几分钟内构建 AI 聊天界面 ： 只需几行代码即可构建高质量的对话式 AI 界面。
• React 组件和 Hooks：用于 UI 的 和 useChatAdapter Hooks，便于集成。
• Next.js 和 Vercel AI ：为 Next.js 和 Vercel AI 提供开箱即用的支持、演示和示例。
• 支持 React 服务器组件 (RSC) 和生成式 UI ： 使用 Next.js 或任何兼容 RSC 框架
• LLM 适配器 ：支持 ChatGPT、LangChain、LangServe API、Hugging Face 等等
• 提供一个灵活的界面，可为任何 LLM 创建自己的适配器而且支持流或批处理模式。
• 支持助手和用户角色 、主题、布局等高度可定制
• 零依赖 、 轻量级代码库：核心零依赖，无需外部 UI 库。

目前 NLUX 在 Github 开源，短短时间有接近 1k 的 star，是一个值得关注的前端开源项目。

如何使用 NLUX

开发者可以使用 nlux-cli 快速启动集成了 NLUX 的新 Next.js、React 或 Vanilla TypeScript 项目。

// Next.js 和 NLUX 集成项目
npx nlux-cli create next my-next-app
//  React ?? , Vite 和 NLUX 集成
npx nlux-cli create react my-react-app
//  vanilla TypeScript  , Vite 和 NLUX 集成项目
npx nlux-cli create vanilla my-vanilla-app

开发者可以依据不同的技术栈选择不同的项目集成方式，比如：

?? React JS 包：

• @nlux/react：用于 NLUX 的 React JS 组件。
• @nlux/langchain-react：使用 LangChain 的 LangServe 库创建的 API 的 React 钩子和适配器。
• @nlux/openai-react：用于 OpenAI API 的 React 钩子，用于测试和开发。
• @nlux/hf-react：用于 Hugging Face Inference API 的 React 钩子和预处理器
• @nlux/nlbridge-react：与 nlbridge（NLUX 团队的 Express.js LLM 中间件）集成。

Vanilla JS 包：

• @nlux/core：可与任何 Web 框架一起使用的核心 Vanilla JS 库。
• @nlux/langchain：使用 LangChain 的 LangServe 库创建的 API 的适配器。
• @nlux/openai：用于 OpenAI API 的适配器，用于测试和开发。
• @nlux/hf ： Hugging Face Inference API 的适配器和预处理器。
• @nlux/nlbridge ： 与 NLUX 团队的 Express.js LLM 中间件 nlbridge 集成。

主题和扩展：

• @nlux/themes ： 默认 Luna 主题和 CSS 样式。
• @nlux/markdown ： Markdown 流解析器，用于在生成 markdown 时对其进行渲染。
• @nlux/highlighter ： 基于 Highlight.js 的语法高亮器。 请访问每个包的 NPM 页面以获取有关如何使用它的信息。

以下示例展示了如何使用 React JS 组件构建一个简单的 AI 助手。其使用 NLUX 的演示 API，该 API 连接到 OpenAI GPT-4o 模型。

import {AiChat, useAsStreamAdapter} from '@nlux/react';
import '@nlux/themes/nova.css';
import {send} from './send';
import {personas} from './personas';
export default () => {
    const adapter = useAsStreamAdapter(send, []);
    return (
        <AiChat
            adapter={adapter}
            personaOptions={personas}
            displayOptions={{colorScheme: 'dark'}}
        />
    );
};

下面示例说明如何使用 NLUX 连接到通过 LangServe 提供的 LangChain 可运行程序：

import {AiChat} from '@nlux/react';
import {useChatAdapter} from '@nlux/langchain-react';
import '@nlux/themes/nova.css';

import {personasOptions} from './personas';

export default () => {
  // LangServe adapter that connects to a demo LangChain Runnable API
  // It fetches data in streaming mode
  const adapter = useChatAdapter({
    url: 'https://pynlux.api.nlkit.com/pirate-speak',
    dataTransferMode: 'stream'
  });

  return (
    <AiChat
      adapter={adapter}
      personaOptions={personasOptions}
      displayOptions={{colorScheme: 'dark'}}
    />
  );
};

使用 NLUX，开发者还可以选择定义助理角色和用户角色。 以下是如何配置助理角色的一些示例。

import {AiChat, useAsStreamAdapter} from '@nlux/react';
import '@nlux/themes/nova.css';
import {send} from './send';
import {user} from './personas';
export default () => {
  const adapter = useAsStreamAdapter(send, []);
  return (
    <AiChat
      personaOptions={{
        assistant: {
          name: 'HarryBotter',
          avatar: 'https://docs.nlkit.com/nlux/images/personas/harry-botter.png',
          tagline: 'Mischievously Making Magic With Mirthful AI!'
        },
        user
      }}
      adapter={adapter}
      displayOptions={{colorScheme: 'dark'}}
    />
  );
};

下面是 personas 的内容：

export const user = {
  name: 'Alex',
  avatar: 'https://docs.nlkit.com/nlux/images/personas/alex.png'
};

以下示例展示了用户如何编写生成 Markdown 内容流的提示。 格式化的 Markdown 在由 LLM 生成时以流式传输并显示给用户。

import {AiChat, useAsStreamAdapter} from '@nlux/react';
import '@nlux/themes/nova.css';

import {send} from './send';
import {personas} from './personas';

export default () => {
    const adapter = useAsStreamAdapter(send, []);
  // Markdown parsing is enabled by default
  // No addtional configuration needed
  // Just type a prompt that would result in a markdown response
  return (
    <AiChat
      adapter={adapter}
      personaOptions={personas}
      displayOptions={{colorScheme: 'dark'}}
    />
  );
};

更多关于 NLUX 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/nlkitai/nlux

https://docs.nlkit.com/nlux

https://www.youtube.com/watch?v=iI95_WTdtao

https://blog.streamlit.io/build-a-chatbot-with-custom-data-sources-powered-by-llamaindex/