从0到1搭建一个基于langchain4j的agent

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

最近开始学习AI相关的内容，秉承着学习就要多练的思想开始准备从0到1开始搭建一个agent的应用。今天先创建一个前端项目chatAgent的react的项目脚手架，并且记录过程以供后续回顾

一、创建应用

使用Vite作为构建工具开始构建，执行下列命令：

npm create vite@latest chatAgent -- --template react

创建成功：

二、调整目录结构

1.模版调整目录结构

代码如下：

src/
├── components/          # 可复用UI组件
│   ├── common/         # 全局通用组件（Button、Modal等）
│   └── features/       # 业务相关组件
├── hooks/              # 自定义React Hooks
├── pages/              # 页面级组件（路由入口）
├── layouts/            # 页面布局组件
├── utils/              # 工具函数
├── services/           # API请求层
├── stores/             # 状态管理（Zustand/Redux）
├── constants/          # 常量配置
├── assets/             # 静态资源（图片、样式等）
├── styles/             # 全局样式
└── __tests__/          # 测试文件

2.安装常用依赖

代码如下：

# 路由
npm install react-router-dom

# 状态管理（推荐Zustand轻量级）
npm install zustand

# 或Redux
npm install @reduxjs/toolkit react-redux

# UI库（chatUI）
npm i @chatui/core -S

# HTTP客户端
npm install axios

# 代码规范
npm install eslint prettier --save-dev

3.修改App.jsx内容

import React from 'react';
// 引入组件
import Chat, { Bubble, useMessages } from '@chatui/core';
// 引入样式
import '@chatui/core/dist/index.css';

const App = () => {
    const { messages, appendMsg, setTyping } = useMessages([]);

    function handleSend(type, val) {
        if (type === 'text' && val.trim()) {
            appendMsg({
                type: 'text',
                content: { text: val },
                position: 'right',
            });

            setTyping(true);

            setTimeout(() => {
                appendMsg({
                    type: 'text',
                    content: { text: 'Bala bala' },
                });
            }, 1000);
        }
    }

    function renderMessageContent(msg) {
        const { content } = msg;
        return <Bubble content={content.text} />;
    }

    return (
        <Chat
            navbar={{ title: '智能助理' }}
            messages={messages}
            renderMessageContent={renderMessageContent}
            onSend={handleSend}
        />
    );
};

export default App

4.运行项目

npm run dev

总结

今天主要记录完成chatUI并且简单的创建了一个前端的聊天框架搭建，后面去完成相关的前端组件封装和后台服务的开发