How To Build An AI Agent Or AI ChatBot Using GenAI Platform On DigitalOcean & Add It To Your Website
21In this video, you will learn how to make an AI agent also known as an AI assistant (AI Chatbot) using DigitalOcean's generative artificial intelligence (AI) platform also known as GenAI. The GenAI platform allows for simple creation, quick deployment, integration, and scale of AI agents, no AI expertise required. Customization options for your AI agents is plentiful, from diverse AI model selections, to service tools like Knowledge Bases which enable retrieval augmented-generation (RAG) to reference data for answers. Customization is not only limited to the technical back-end but also to the visual, including the AI agent user interface (UI) when interacted with its embed location publicly on your website (such as a WordPress site as demonstrated in this video) or application.
🔵 Free $200 DigitalOcean cloud credits using my referral link: https://digitalocean.pxf.io/c/1245219/1373759/15890
How To Get $200 In Free DigitalOcean Cloud Credits • How To Get $200 In Free DigitalOcean ...
Steps To Make An AI Agent Using DigitalOcean's GenAI Platform:
1. Go to https://digitalocean.pxf.io/c/1245219/1373759/15890 and create a free DigitalOcean account. The above link is my referral link granting you $200 in free cloud credit for 60 days as a new user
2. On your projects dashboard, click create and select Agent
3. Configure your AI agent, by adding a name, adding agent instructions, and selecting a model. Models available at the time of recording include:
● DeepSeek R1 Distill Llama 70B
● Llama 3.3 Instruct (70B)
● Anthropic Claude 3.5 Sonnet
● Anthropic Claude 3.5 Haiku
● Anthropic Claude 3 Opus
● Llama 3.1 Instruct (8B)
● Llama 3.1 Instruct (70B)
● Mistral Nemo Instruct
4. Once configured, click Create Agent
5. Click Resources tab
6. Click Create knowledge base
7. Configure your knowledge base, by adding a base name, selecting a data source from either a space bucket/folder or upload a file that you have saved on your local device, choose a datacentre region, and select an embeddings model. Embedding models available at the time of recording are as follows:
● All MiniLM L6 v2
● Multi QA MPNet Base Dot v1
● GTE Large EN v1.5
8. Click Create Knowledge Base
9. Once your knowledge base has been created and indexed automatically, click the Agents tab.
10. Click on your agents name
11. Click the Resources tab
12. Click Add knowledge bases
13. Click on your knowledge base name to select it
14. Click Add knowledge base
15. Click Playground and tweak your AI agents instructions and Settings if necessary. Don't forget to click on Update settings if you made any changes.
16. Click Overview tab
17. Scroll down to Agent Essentials, under Endpoint, click Edit
18. Click Public and Save
19. Scroll down to chatbot and click Customize to add some uniqueness to your AI agent. Design options include the following:
Chatbot name
● Primary Color (AI agent speech bubble)
● Secondary Color (Guest or users speech bubble)
● Button Background Color (The button to send the message to the agent)
● Starting Message (AI Agent greeting)
● Logo URL (The Ai agents image or overlay displayed on your website or app)
20. Once customized, click Save. Now view your custom agent UI and if satisfied, move on to the next step below
21. Click Copy, to copy the custom script snippet displayed
22. Paste this script code into your desired location on your website or application and save the changes. If you have a WordPress website like in this video tutorial then follow the steps below.
Steps To Integrate Or Embed A GenAI Chatbot Into A WordPress Website:
0. Make sure you have copied the script code snippet from step 21 above
1. Log in to your WordPress admin account at https://URL/wp-admin (If you have an SSL certificate) or http://URL/wp-admin (no SSL)
2. Hover over your WordPress site name and click Dashboard
3. Click Plugins
4. Click Add New Plugin
5. In the plugin search box, search for the following keywords: insert headers and footers
6. Click Install Now for the plugin with the same name as the keywords
7. Click Activate
8. Hover over Settings, and click WP Headers and Footers
9. Click Skip This Step
10. Scroll down to Scripts in Footer and right click in the empty search box and paste in the script code snippet from earlier
11. Click Save Changes
12. Hover over your WordPress site name at the top left once again and click on Visit Site to see a live version of your website
13. You will now see your embedded AI agent you created in DigitalOcean's GenAI platform. Click your custom AI Agent logo to open the agents UI
14. Type and send a message to the agent to converse.
Timestamps:
0:00 - Intro & Context
1:57 - Create An AI Agent
4:12 - Create A Knowledge Base
6:56 - Attach Knowledge Base To AI Agent
7:53 - Experiment & Test AI Agent In Agent Playground
9:11 - Set Agent Endpoint Availability To Public
9:56 - Customize & Preview AI Agent UI
13:50 - Embed AI Agent To WordPress Website Or Any Site/App
16:07 - Closing & Outro
#GenAI #AI #DigitalOcean