AI.JSX — 用于 JavaScript 的 AI 应用框架

关于 AI.JSX

AI.JSX 是一个使用 JavaScript 和 JSX 构建 AI 应用的框架。借助 AI.JSX，您可以获得强大的提示工程工具，并让大语言模型在其响应中渲染 React 组件（而不仅仅是文本）。这意味着您可以提供一组 React 组件，让大语言模型在运行时动态构建您的 UI。AI.JSX 还原生支持工具、文档问答等功能。

AI.JSX 可以用于创建独立的 LLM 应用程序，这些应用程序可以在任何支持 Node.js 的环境中部署；也可以作为更大规模 React 应用程序的一部分来使用。

特性

AI.JSX 开箱即用，具备以下特性：

• 组件化 → 通过模块化、可复用的组件进行 LLM 提示工程。
• 模型支持 → 支持 OpenAI、Anthropic、Llama2 或 BYOM。可在不同模型提供商和 LLM 配置（如温度）之间无缝切换。
• 完整的 AI 工具箱 → 内置对工具、文档问答等功能的支持。
• 生成式 UI → 将 LLM 调用与标准 UI 组件无缝融合。LLM 可以根据您提供的组件集动态渲染 UI。
• 流式传输 → 内置流式支持。
• 现代 Web 技术栈支持 → 对 NextJS 和 Create React App 的一流支持。（更多功能即将推出）
• LangChain 集成 → 完全支持 LangChainJS。

学习 AI.JSX

要开始使用 AI.JSX，请按照以下步骤操作：

1. 查看 入门指南。
2. 按照 AI.JSX 教程 逐步实践。
3. 通过克隆 ai-jsx-template 来体验“Hello AI World”。
4. 在 examples 包 中探索更多用例。
5. 如果您是 AI 新手，请阅读 AI 新手指南。

示例

以下是一个使用 AI.JSX 生成 AI 响应的简单示例：

import * as AI from 'ai-jsx';
import { ChatCompletion, UserMessage } from 'ai-jsx/core/completion';

const app = (
  <ChatCompletion>
    <UserMessage>写一首关于 AI 模型的莎士比亚式十四行诗。</UserMessage>
  </ChatCompletion>
);
const renderContext = AI.createRenderContext();
const response = await renderContext.render(app);
console.log(response);

您可以在我们的 实时演示应用 上试用，或查看 源代码。有关完整示例，请参阅 examples 包。

请观看 2 分钟的 介绍视频。

贡献

我们欢迎贡献！有关如何开始的详细信息，请参阅 贡献指南。

许可证

AI.JSX 是开源软件，采用 MIT 许可证 发布。

AI.JSX 快速上手指南

AI.JSX 是一个基于 JavaScript 和 JSX 构建 AI 应用的框架。它允许你通过模块化的组件进行提示词工程，并让大语言模型（LLM）直接动态渲染 React 组件，而不仅仅是返回文本。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

• Node.js: 版本 18.0 或更高（推荐最新 LTS 版本）。
• 包管理器: npm, yarn 或 pnpm。
• API Key: 需要准备好大模型服务商的 API Key（如 OpenAI, Anthropic 等），并在环境变量中配置。

国内开发者提示：如果访问 npm 源较慢，建议临时切换至国内镜像源（如淘宝镜像）：

npm config set registry https://registry.npmmirror.com

安装步骤

你可以通过克隆官方模板快速启动项目，也可以在现有项目中安装。

方式一：使用官方模板（推荐）

这是最快开始的方式，包含了基础配置和示例。

npx create-next-app -e https://github.com/fixie-ai/ai-jsx-template my-ai-app
cd my-ai-jsx-app
npm install

方式二：在现有项目中安装

如果你想在现有的 React 或 Next.js 项目中集成 AI.JSX：

npm install ai-jsx

安装完成后，请确保在项目根目录创建 .env 文件并配置你的 API Key（例如）：

OPENAI_API_KEY=your_openai_api_key_here

基本使用

AI.JSX 的核心思想是将 LLM 调用视为 JSX 组件。以下是一个最简单的示例，展示如何让 AI 生成一首关于 AI 模型的莎士比亚风格十四行诗。

创建一个 TypeScript 文件（例如 app.tsx）：

import * as AI from 'ai-jsx';
import { ChatCompletion, UserMessage } from 'ai-jsx/core/completion';

const app = (
  <ChatCompletion>
    <UserMessage>Write a Shakespearean sonnet about AI models.</UserMessage>
  </ChatCompletion>
);

async function main() {
  const renderContext = AI.createRenderContext();
  const response = await renderContext.render(app);
  console.log(response);
}

main();

运行该文件（确保已配置好 TypeScript 环境和 API Key）：

npx ts-node app.tsx

进阶特性简述

• 生成式 UI：你可以定义一组 React 组件，让 LLM 根据用户意图动态选择并渲染这些组件。
• 流式输出：内置支持 Streaming，可实时显示 AI 生成的内容。
• 多模型支持：无缝切换 OpenAI、Anthropic、Llama2 等模型提供商。

更多详细用法和复杂示例，请参考 官方文档 或查看 GitHub 示例仓库。