Agent前端开发入门：从零构建你的第一个智能代理界面

1次阅读

共计 4522 个字符，预计需要花费 12 分钟才能阅读完成。

Agent 前端是一种新型的前端开发范式，专注于构建能与智能代理（Agent）进行交互的用户界面。与传统前端不同，Agent 前端需要处理更多异步交互、状态管理和复杂的数据流。智能代理可以是聊天机器人、推荐系统、自动化工具等，它们能理解用户意图并做出智能响应。

在现代应用中，Agent 前端的价值主要体现在：

提供更自然的用户交互体验
实现复杂的业务流程自动化
整合多种 AI 服务的能力
构建自适应和个性化的界面

与传统前端开发相比，Agent 前端有几个核心差异：

状态管理复杂度：Agent 前端需要维护对话历史、上下文状态等多种数据
异步交互：与 Agent 的通信往往是异步的，需要处理延迟、错误等情况
响应式设计：界面需要实时反映 Agent 的状态变化
数据流：数据流动是双向且持续的，而不是简单的请求 - 响应模式

下面我们使用 React 18 和 TypeScript 来实现一个基本的 Agent 前端界面。

首先创建一个新的 React TypeScript 项目：

npx create-react-app agent-frontend --template typescript
cd agent-frontend
npm install @types/node @types/react @types/react-dom @types/jest

创建 agentService.ts 文件，封装与 Agent 的通信逻辑：

interface AgentMessage {
  id: string;
  content: string;
  sender: 'user' | 'agent';
  timestamp: Date;
}

class AgentService {
  private static instance: AgentService;

  private constructor() {}

  public static getInstance(): AgentService {if (!AgentService.instance) {AgentService.instance = new AgentService();
    }
    return AgentService.instance;
  }

  async sendMessage(message: string): Promise<AgentMessage> {
    // 模拟网络延迟
    await new Promise(resolve => setTimeout(resolve, 500));

    return {id: Math.random().toString(36).substring(7),
      content: `Agent 回应: ${message}`,
      sender: 'agent',
      timestamp: new Date(),};
  }
}

export default AgentService.getInstance();

使用 React Context 和 Reducer 来管理对话状态。创建AgentContext.tsx：

import React, {createContext, useReducer, useContext} from 'react';

type AgentState = {messages: AgentMessage[];
  isLoading: boolean;
  error: string | null;
};

type AgentAction = 
  | {type: 'SEND_MESSAGE'; payload: string}
  | {type: 'RECEIVE_MESSAGE'; payload: AgentMessage}
  | {type: 'SET_LOADING'; payload: boolean}
  | {type: 'SET_ERROR'; payload: string | null};

const initialState: AgentState = {messages: [],
  isLoading: false,
  error: null,
};

function agentReducer(state: AgentState, action: AgentAction): AgentState {switch (action.type) {
    case 'SEND_MESSAGE':
      return {
        ...state,
        messages: [
          ...state.messages,
          {id: Math.random().toString(36).substring(7),
            content: action.payload,
            sender: 'user',
            timestamp: new Date(),},
        ],
        isLoading: true,
      };
    case 'RECEIVE_MESSAGE':
      return {
        ...state,
        messages: [...state.messages, action.payload],
        isLoading: false,
      };
    case 'SET_LOADING':
      return {...state, isLoading: action.payload};
    case 'SET_ERROR':
      return {...state, error: action.payload};
    default:
      return state;
  }
}

const AgentContext = createContext<{
  state: AgentState;
  dispatch: React.Dispatch<AgentAction>;
}>({
  state: initialState,
  dispatch: () => null,});

export const AgentProvider: React.FC = ({children}) => {const [state, dispatch] = useReducer(agentReducer, initialState);

  return (<AgentContext.Provider value={{ state, dispatch}}>
      {children}
    </AgentContext.Provider>
  );
};

export const useAgent = () => useContext(AgentContext);

创建主界面组件AgentInterface.tsx：

import React, {useState, useCallback} from 'react';
import {useAgent} from './AgentContext';
import AgentService from './agentService';

const AgentInterface: React.FC = () => {const { state, dispatch} = useAgent();
  const [inputValue, setInputValue] = useState('');

  const handleSendMessage = useCallback(async () => {if (!inputValue.trim()) return;

    try {dispatch({ type: 'SEND_MESSAGE', payload: inputValue});
      setInputValue('');

      const response = await AgentService.sendMessage(inputValue);
      dispatch({type: 'RECEIVE_MESSAGE', payload: response});
    } catch (error) {dispatch({ type: 'SET_ERROR', payload: '发送消息失败'});
      dispatch({type: 'SET_LOADING', payload: false});
    }
  }, [inputValue, dispatch]);

  return (
    <div className="agent-interface">
      <div className="messages">
        {state.messages.map((message) => (<div key={message.id} className={`message ${message.sender}`}>
            <p>{message.content}</p>
            <small>{message.timestamp.toLocaleTimeString()}</small>
          </div>
        ))}
        {state.isLoading && (
          <div className="message agent">
            <p> 思考中...</p>
          </div>
        )}
      </div>

      <div className="input-area">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()}
          placeholder="输入消息..."
          disabled={state.isLoading}
        />
        <button 
          onClick={handleSendMessage}
          disabled={state.isLoading || !inputValue.trim()}
        >
          发送
        </button>
      </div>

      {state.error && <div className="error">{state.error}</div>}
    </div>
  );
};

export default AgentInterface;

处理异步回调时，需要注意以下几点：