VietNam- English
VietNamEnglish
Để hoàn thành hướng dẫn này, bạn cần:
Ở bước này, bạn sẽ tạo một dự án Next.js mới và cài đặt các phụ thuộc cần thiết để xây dựng trợ lý AI.
Trước hết, tạo ứng dụng Next.js mới bằng lệnh create-next-app:
npx create-next-app@latest ai-assistant --typescript --tailwind --app
Khi được hỏi, chọn các tùy chọn sau:
Lệnh này sẽ tạo dự án Next.js mới với TypeScript, Tailwind CSS, và các phụ thuộc cần thiết để xây dựng trợ lý AI của bạn.
Tiếp theo, điều hướng vào thư mục dự án:
cd ai-assistant
Tiếp tục, cài đặt SDK OpenAI và các phụ thuộc bổ sung để xử lý giao diện chat:
npm install openai react-markdown remark-gfm
Gói openai cung cấp client JavaScript chính thức để tương tác với API OpenAI. Các gói react-markdown và remark-gfm sẽ giúp hiển thị câu trả lời được định dạng từ trợ lý AI.
Tạo file .env.local trong thư mục gốc dự án để lưu khóa API OpenAI:
touch .env.local
Thêm khóa API OpenAI vào file .env.local:
OPENAI_API_KEY=your_openai_api_key
Thay your_openai_api_key bằng khóa API thực tế của bạn. Biến môi trường này sẽ giữ khóa API an toàn và tách biệt khỏi mã nguồn.
Bạn đã thiết lập môi trường phát triển với Next.js và các phụ thuộc cần thiết. Bước tiếp theo bạn sẽ tạo điểm cuối API để xử lý yêu cầu AI.
Ở bước này, bạn sẽ tạo điểm cuối API để xử lý các yêu cầu AI.
Bạn sẽ tạo một route API Next.js xử lý giao tiếp với API OpenAI, bao gồm cả cuộc trò chuyện văn bản và yêu cầu tạo hình ảnh.
Tạo thư mục và file điểm cuối API:
mkdir -p src/app/api/chat
touch src/app/api/chat/route.ts
Mở src/app/api/chat/route.ts và thêm mã để xử lý yêu cầu API sử dụng client OpenAI, nhận tin nhắn và chế độ ('chat' hoặc 'image'). Ở chế độ 'chat', tạo hoàn thành văn bản bằng GPT-4o; ở chế độ 'image', tạo hình ảnh với DALL-E 3.
Điểm cuối API này cung cấp dịch vụ tích hợp AI mạnh mẽ và linh hoạt, hỗ trợ cả tương tác trò chuyện và tạo hình ảnh.
Tạo giao diện chat hiện đại, phản hồi nhanh giống thiết kế của ChatGPT, gồm lịch sử tin nhắn và xử lý nhập liệu.
Xây dựng component React src/components/ChatInterface.tsx hỗ trợ trạng thái tin nhắn, vùng nhập liệu, chọn chế độ (chat hoặc tạo hình ảnh), chọn mô hình, và xử lý giao tiếp API với điểm cuối.
Sử dụng Tailwind CSS để tạo kiểu và ReactMarkdown để render câu trả lời văn bản phong phú do AI tạo.
Tích hợp component giao diện chat vào ứng dụng Next.js bằng cách cập nhật src/app/page.tsx để bao gồm ChatInterface.
Cập nhật bố cục trong src/app/layout.tsx để cung cấp tiêu đề trang và nhập các kiểu toàn cục.
Tạo component ranh giới lỗi src/app/error.tsx để hiển thị thông báo lỗi thân thiện với người dùng khi có lỗi runtime xảy ra.
Khởi động server phát triển bằng:
npm run dev
Mở http://localhost:3000 để tương tác với trợ lý AI, chuyển đổi giữa chế độ chat và tạo hình ảnh, xác nhận tất cả tính năng hoạt động như mong đợi.
Triển khai trợ lý AI JavaScript của bạn lên Nền tảng Ứng dụng DigitalOcean bằng cách thiết lập Máy chủ MCP DigitalOcean với token API DigitalOcean tạo sẵn.
Tạo token trong phần Cài đặt API của DigitalOcean, cấu hình MCP trong công cụ Cursor với định dạng JSON phù hợp cho máy chủ.
Kiểm tra chức năng Máy chủ MCP trong Cursor bằng các lệnh như 'Liệt kê tất cả các ứng dụng đang hoạt động trên tài khoản của tôi' hoặc 'Tạo ứng dụng flask mới'.
Triển khai trợ lý AI qua Máy chủ MCP, cho phép quản lý liên tục và mở rộng trên nền tảng DigitalOcean.
Bạn đã xây dựng và triển khai thành công trợ lý AI đa phương thức JavaScript có khả năng xử lý văn bản và hình ảnh, tích hợp API OpenAI với các framework frontend hiện đại, và triển khai trên DigitalOcean với Máy chủ MCP.
Hãy tiếp tục khám phá thêm các hướng dẫn về trợ lý lập trình AI, nền tảng GenAI, và quản lý ứng dụng với Máy chủ MCP để phát triển kỹ năng và dự án nâng cao.