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

什么是 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/