从零开始开发一款人工智能应用可能极具挑战性。无论您是想构建一个简单的聊天机器人还是一个高级的智能虚拟助手，成功开发出所需的应用都可能需要数周时间。但 Julep 正是为此而生。
Julep是一个平台，可帮助构建有状态且功能齐全的 LLM（生命周期管理）应用程序。借助 Julep，您只需几行代码即可构建功能完善的 AI 应用。
OpenAI 的 GPT-3、微软的 Azure Bot 服务和谷歌的 Dialogflow 等平台都可以构建 AI 应用。然而，Julep 的优势在于其状态管理功能，可以跟踪对话历史和上下文，易于与多种语言学习管理系统 (LLM) 集成，并且拥有用户友好的界面来管理用户、代理和会话。
在本篇博客中，我们将创建 Movio，一款基于人工智能的电影伴侣应用，它可以为用户提供任何电影的推荐和信息。我们将逐步介绍每个步骤，并帮助您了解如何在项目中使用 Julep。
我们开始吧！
请确保您的设备上已安装 Node.js。请从 Node.js官方网站下载并安装。
如果您喜欢 Julep 博客上的文章，请考虑在 GitHub 上给 Julep 点个星，这有助于我们接触并帮助更多开发者。
我们非常高兴地欢迎新成员加入 Julep 项目！我们创建了一些“入门指南”来帮助您快速上手。以下是您可以贡献内容的方式：
您的贡献，无论大小，对我们都弥足珍贵。让我们携手共创辉煌！🚀
激动人心的消息！我们将参加2024年10月举行的DevFest.AI！🗓️
要创建 React 应用，请在终端中运行以下命令：
npm create-vite@latest
您可以查看Vite 文档来创建 React 应用。
在文件中创建基本结构App.jsx。添加一个<input>标签，允许用户输入查询：
<div className="container">
<h1>Hi, I'm Movio</h1>
<h4>Your Ultimate Movie Companion</h4>
<div id="conversation">
{conversation.map((item, index) => (
<p key={index} className={item.role}>
{item.message}
</p>
))}
</div>
<input
type="text"
id="queryInput"
placeholder="Ask me anything about Movies..."
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button onClick={sendQuery}>Submit</button>
</div>
为了处理和捕获用户的查询，我们定义了以下功能：
const [query, setQuery] = useState("");
const [conversation, setConversation] = useState([]);
我们使用useState()hook 来定义变量query及其conversation状态更新函数。
const sendQuery = async () => {
if (!query) return;
// Append user message to conversation
setConversation((prev) => [...prev, { role: "user", message: query }]);
setQuery("");
try {
const response = await axios.post("http://localhost:3000/chat", {
query,
});
const agentResponse = response.data.response;
// Append agent response to conversation
setConversation((prev) => [
...prev,
{ role: "agent", message: agentResponse },
]);
} catch (error) {
console.error("Error fetching response:", error);
}
};
该函数sendQuery()首先检查查询是否为空。如果不为空，它会更新conversation状态，添加一个新对象，并将role`as`"user"和message`as` 都作为参数添加到状态中query。然后，它query使用 `.` 将状态重置为空字符串setQuery("")。
在 try 代码块中，axios将用户的查询发送到端点。服务器的响应存储在从数据agentResponse中提取出来的数据中response。
接下来，setConversation再次使用该函数将代理的响应添加到conversation状态中，角色为"agent"，消息为agentResponse。
最后，axios 请求期间的任何错误都会在 catch 代码块中捕获并记录到控制台。
以下是完整App.jsx代码：
import React, { useState } from "react";
import axios from "axios";
function App() {
const [query, setQuery] = useState("");
const [conversation, setConversation] = useState([]);
const sendQuery = async () => {
if (!query) return;
// Append user message to conversation
setConversation((prev) => [...prev, { role: "user", message: query }]);
setQuery("");
try {
const response = await axios.post("http://localhost:3000/chat", {
query,
});
const agentResponse = response.data.response;
// Append agent response to conversation
setConversation((prev) => [
...prev,
{ role: "agent", message: agentResponse },
]);
} catch (error) {
console.error("Error fetching response:", error);
}
};
return (
<div className="container">
<h1>Hi, I'm Movio</h1>
<h4>Your Ultimate Movie Companion</h4>
<div id="conversation">
{conversation.map((item, index) => (
<p key={index} className={item.role}>
{item.message}
</p>
))}
</div>
<input
type="text"
id="queryInput"
placeholder="Ask me anything about Movies..."
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button onClick={sendQuery}>Submit</button>
</div>
);
}
export default App;
让我们开始将 Julep 集成到我们的项目中。
对于 Movie Companion 应用，我们将安装一些必要的库。这些库包括：
.env - 用于检索存储在文件中的值运行以下命令安装库：
npm install express @julep/sdk cors body-parser dotenv axios
要集成 Julep，我们需要一个 API 密钥。
访问platform.julep.ai并使用 Google 帐户凭据登录。复制右上角显示的您的 API 令牌。
此 API 令牌将用作您的 API 密钥。
.env在项目目录中创建一个文件，并将以下代码粘贴到该文件中：
JULEP_API_KEY = “api_key”
替换api_key为复制的 API 令牌。
在目录中创建一个文件src并命名server.js。所有 Julep 代码都将放在这个文件中。
首先，我们将导入所需的库。
import express from "express";
import julep from "@julep/sdk";
import bodyParser from "body-parser";
import cors from "cors";
import { fileURLToPath } from "url"; // Import the fileURLToPath function
import path from "path";
import dotenv from "dotenv";
client使用 Julep SDK 的类创建一个新的Client客户端。该客户端与 Julep API 交互，并初始化代理、用户、会话、文档、记忆和工具的管理器。
const apiKey = process.env.JULEP_API_KEY;
const client = new julep.Client({ apiKey });
现在，我们将创建一个 Express 应用实例作为后端服务器。使用该实例bodyparser.json()配置应用以自动解析传入的 JSON 请求，并cors()启用跨域资源共享 (CORS)，允许来自多个源的请求。
const app = express();
app.use(bodyParser.json());
app.use(cors());
为向 Express 应用/chat端点发送 POST 请求设置异步路由处理程序。
app.post("/chat", async (req, res) => {
在 try 代码块中，创建一个query变量来存储用户输入的查询。
try {
const query = req.body.query;
现在，让我们创建用户、代理和会话，以便与 Julep API 进行交互。
用户对象代表与应用程序交互的实体，可以是真人或系统。每个使用 Julep 开发的 AI 应用程序都支持多个用户，每个用户都可以与智能体交互。每个用户都是独立的，这意味着他们拥有各自独特的身份和分配的角色。
用户是可选的，应用程序即使不定义用户也能正常运行。但是，为了更好地进行管理和跟踪，建议为每个与代理交互的个人或系统创建用户配置文件。具体来说，添加一些用户的基本信息可以帮助应用程序更好地了解他们的行为。这使得应用程序能够提供根据用户偏好和需求量身定制的个性化结果。
在创建用户方面，Julep 提供了一种users.create()可用于client创建用户的方法。创建用户需要 4 个属性：
举个例子：
const user = await client.users.create({
name: "Sam",
about: "Machine Learning Developer and AI Enthusiast",
docs:[{"title": "AI Efficiency Report", "content": "...", "metadata": {"page": 1}}], // Optional
metadata:{"db_uuid": "1234"}, // Optional
});
现在，让我们为电影伴侣应用创建一个用户：
const user = await client.users.create({
name: "Ayush",
about: "A developer",
});
在这里，我们创建了一个用户，名称Ayush和A developer描述如下。
智能代理是连接用户和应用程序的智能界面，负责处理所有交互并提升用户体验。智能代理经过编程，能够处理用户提出的查询，并提供量身定制的结果或建议。
代理包含您希望在 AI 应用中使用的 LLM 模型的所有配置和设置。这使得应用能够执行特定任务并满足用户的个性化偏好。
这些代理可以像聊天机器人一样简单，也可以是高度复杂的人工智能驱动的智能助手，能够理解自然语言并执行复杂的任务。
与用户类似，Julep 也提供了agents.create()创建代理的方法。创建代理需要一系列属性：
举个例子：
const agent = client.agents.create(
(name = "Cody"),
(about =
"Cody is an AI powered code reviewer. It can review code, provide feedback, suggest improvements, and answer questions about code."),
(instructions = [
"On every new issue, Review the issue made in the code. Summarize the issue made in the code and add a comment",
"Scrutinize the changes very deeply for potential bugs, errors, security vulnerabilities. Assume the worst case scenario and explain your reasoning for the same.",
]),
(tools = [
{
type: "function",
function: {
name: "github_comment",
description:
"Posts a comment made on a GitHub Pull Request after every new commit. The tool will return a boolean value to indicate if the comment was successfully posted or not.",
parameters: {
type: "object",
properties: {
comment: {
type: "string",
description:
"The comment to be posted on the issue. It should be a summary of the changes made in the PR and the feedback on the same.",
},
pr_number: {
type: "number",
description:
"The issue number on which the comment is to be posted.",
},
},
required: ["comment", "pr_number"],
},
},
},
]),
(model = "gpt-4"),
(default_settings = {
temperature: 0.7,
top_p: 1,
min_p: 0.01,
presence_penalty: 0,
frequency_penalty: 0,
length_penalty: 1.0,
}),
(docs = [{ title: "API Reference", content: "...", metadata: { page: 1 } }]),
(metadata = { db_uuid: "1234" })
);
现在，让我们为 Movio 应用创建代理：
const agent = await client.agents.create({
name: "Movie suggesting assistant",
model: "gpt-4-turbo",
});
如您所见，我们gpt-4-turbo在此代理中使用了 LLM 模型，但 Julep 支持多种 LLM 模型，您可以使用这些模型创建 AI 应用程序。请查阅文档了解更多信息。
会话是用户与代理交互的实体，指的是用户与代理之间交互的时间段。它为整个交互过程提供了一个框架，包括来回的消息传递、查询以及任何其他相关细节。
会话会存储用户和代理之间交换的所有消息记录。该记录有助于人工智能更好地理解正在进行的对话，并提供更加个性化的答案。
要创建会话，我们可以使用 sessions.create() 方法。让我们来看看它需要哪些属性：
情境属性在会话中扮演着至关重要的角色，因为它为交互或对话提供了上下文。情境信息有助于智能体更好地理解和计算用户的查询，并提供更具针对性的回复。
举个例子：
// Assuming 'client' is an object with a 'sessions' property containing a 'create' method
let session = client.sessions.create({
agent_id: agent.id,
user_id: user.id,
situation: `
You are James a Software Developer, public speaker & renowned educator.
You are an educator who is qualified to train students, developers & entrepreneurs.
About you:
...
Important guidelines:
...
`,
metadata: { db_uuid: "1234" },
});
让我们为 Movio 应用创建一个会话：
const session = await client.sessions.create({
agentId: agent.id,
userId: user.id,
situation:
"You are Movio. You tell the people about movies they ask for, and recommend movies to the users",
});
这里，agentID和分别userId是我们之前创建的代理和用户的 ID，是situation为交互提供的简短上下文。
创建用户、代理和会话之后，我们需要处理交互。我们将使用该sessions.chat()方法来处理聊天交互并获取响应消息。
此方法需要两个属性才能运行——session.id 和一个包含 messages 数组的对象。
const chatParams = {
messages: [
{
role: "user",
name: "Ayush",
content: query,
},
],
};
const chatResponse = await client.sessions.chat(session.id, chatParams);
const responseMessage = chatResponse.response[0][0].content;
res.json({ response: responseMessage });
这里，chatParams对象包含 messages 数组，该数组包含一个具有三个属性的对象：
然后，该sessions.chat()方法被调用，并将client结果对象作为参数传递给它。结果对象存储在 chatResponse 中。session.idchatParams
content从中提取属性值chatResponse并存储在responseMessage。
为了处理错误，我们将使用该catch代码块来捕获错误并显示它。
catch (error) {
res.status(500).json({ error: error.message });
}
要在本地主机上启动服务器，我们使用指定端口号listen()的方法。app
app.listen(3000, () => {
console.log("Server is running on port 3000");
});
这将启动服务器localhost:3000并在控制台窗口中打印定义的字符串。
恭喜！您的AI应用已成功创建。
项目已经完成，我们将运行并进行测试。
要运行该应用程序，首先，我们将运行server.js文件来初始化 Julep API，然后运行用户界面的 html 文件。
运行以下命令启动服务器：
node src/server.js
要运行 React 应用，请运行以下命令：
npm run dev
这将在本地主机上运行您的项目。以下是项目演示：
您的应用运行正常。
项目链接 - https://github.com/ayush2390/julep-movio
试试 Movio - https://stackblitz.com/github/ayush2390/movio?file=README.md
想看看 Julep 还有哪些功能吗？只需点击一下即可开启探索之旅。访问代码仓库并给它点个赞：https://github.com/julep-ai/julep
查看教程，深入了解 Julep。
有任何疑问或反馈？欢迎加入 Julep Discord 社区
文章来源：https://dev.to/julep/building-your-first-ai-application-with-julep-a-step-by-step-guide-4n71