The AI Assistant trend is sweeping the internet. Now, picture merging it with low-code to create your own AI Assistant, trained on any data, directly on your website—this time with Webflow!
Low-code backend for Webflow
Over 2,000 + organisations use Webflow to power their frontend with no-code. Webflow is great for building visually pleasing websites, right from your browser. You can add functional logic building blocks to showcase UI changes in your website.
But what about your backend? Do we have to resort to the conventional coding dilemma to flesh out your backend infrastructure? Well, no, because we have BuildShip.
BuildShip is a low-code visual backend builder that helps you build powerful APIs, backend tasks and scheduled jobs right from your browser—all without conventional coding. And yes, we'll use it to develop your AI assistant.
Now imagine the ability to extend this power of no-code to your backend, and along the course building out your very own AI assistant too?
Excited? This is where this blog comes in.
AI Assistant using any model in Webflow
BuildShip comes with its own set of integration nodes which also include the AI Assistant nodes. You can integrate any AI model like OpenAI, Claude and Azure to build out your Assistant right into your Webflow website.
Moreover, you can connect your AI Assistant to any tool or database like Supabase, Firebase, Postgres, etc. or tools like Stripe, Notion, Slack, etc. In this blog, we’ll learn how to connect to your Google Spreadsheets data and have your AI Assistant answer customer queries and take actions connected to your tools and databases right from your Webflow site.
Let’s get started!
Step 1: Clone a ChatBot Template on BuildShip
To get started, head over to BuildShip and clone one of the assistant templates, such as "Chat with Google Sheets." This template is perfect for connecting your chatbot to a Google Sheet containing information about your products or services.
Step 2: Configure Your Assistant
Once you've cloned the template, you'll need to provide a few key pieces of information, such as your OpenAI API key, assistant ID, and the link to your Google Sheet.
You can also add any other tools you want your assistant to access, such as Airtable, Supabase, Google Sheets or Firebase.
Step 3: Customize the User Prompt
BuildShip provides a no-code style of function calling, where you can specify the tools you want your assistant to use and provide specific instructions on what job it should do and how it should use the tools. This is known as prompt engineering, and it's crucial for ensuring your assistant performs its tasks effectively.
Step 4: Ship Your Assistant as an API or Chat Widget
With your assistant configured and the prompt engineering complete, you can now ship your assistant as either an API endpoint or a ready-made chat widget that can be easily plugged into your Webflow website.
Step 5: Customising and EmbeddingYour Chat Widget
Before embedding the chat widget into your Webflow website, you can customize various parameters, such as the chat widget button name, chat title, starting message, and seeded examples. You can also explore advanced options like streaming responses or automatically opening the widget on page load.
Next, to embed the chat widget into your Webflow website, simply copy the code snippet provided by BuildShip and add an embed component to your desired page in Webflow.
Paste the code snippet into the embed settings, and you're almost done!
You can also style your chat widget button to match your website's design. To do so, add a class to the button widget and style it using CSS. You can customize the background color, border color, display, font weight, and any other properties to make it blend easily with your website's aesthetic.
Step 6: Publish and Start Chatting!
Once you've saved and published your changes, your AI-powered chatbot assistant will be live on your Webflow website, ready to engage with your visitors and provide them with meaningful answers and actions based on your connected tools and databases.
For more in-depth information on adding tools, setting up instructions, and other advanced features, be sure to check out the documentation and video linked below.
Conclusion
By following the steps above and using the power of BuildShip and Webflow, you can create an AI assistant that can generate leads, support customers, and take actions on behalf of your users. The possibilities are endless, and we can't wait to see what you build!
The AI Assistant trend is sweeping the internet. Now, picture merging it with low-code to create your own AI Assistant, trained on any data, directly on your website—this time with Webflow!
Low-code backend for Webflow
Over 2,000 + organisations use Webflow to power their frontend with no-code. Webflow is great for building visually pleasing websites, right from your browser. You can add functional logic building blocks to showcase UI changes in your website.
But what about your backend? Do we have to resort to the conventional coding dilemma to flesh out your backend infrastructure? Well, no, because we have BuildShip.
BuildShip is a low-code visual backend builder that helps you build powerful APIs, backend tasks and scheduled jobs right from your browser—all without conventional coding. And yes, we'll use it to develop your AI assistant.
Now imagine the ability to extend this power of no-code to your backend, and along the course building out your very own AI assistant too?
Excited? This is where this blog comes in.
AI Assistant using any model in Webflow
BuildShip comes with its own set of integration nodes which also include the AI Assistant nodes. You can integrate any AI model like OpenAI, Claude and Azure to build out your Assistant right into your Webflow website.
Moreover, you can connect your AI Assistant to any tool or database like Supabase, Firebase, Postgres, etc. or tools like Stripe, Notion, Slack, etc. In this blog, we’ll learn how to connect to your Google Spreadsheets data and have your AI Assistant answer customer queries and take actions connected to your tools and databases right from your Webflow site.
Let’s get started!
Step 1: Clone a ChatBot Template on BuildShip
To get started, head over to BuildShip and clone one of the assistant templates, such as "Chat with Google Sheets." This template is perfect for connecting your chatbot to a Google Sheet containing information about your products or services.
Step 2: Configure Your Assistant
Once you've cloned the template, you'll need to provide a few key pieces of information, such as your OpenAI API key, assistant ID, and the link to your Google Sheet.
You can also add any other tools you want your assistant to access, such as Airtable, Supabase, Google Sheets or Firebase.
Step 3: Customize the User Prompt
BuildShip provides a no-code style of function calling, where you can specify the tools you want your assistant to use and provide specific instructions on what job it should do and how it should use the tools. This is known as prompt engineering, and it's crucial for ensuring your assistant performs its tasks effectively.
Step 4: Ship Your Assistant as an API or Chat Widget
With your assistant configured and the prompt engineering complete, you can now ship your assistant as either an API endpoint or a ready-made chat widget that can be easily plugged into your Webflow website.
Step 5: Customising and EmbeddingYour Chat Widget
Before embedding the chat widget into your Webflow website, you can customize various parameters, such as the chat widget button name, chat title, starting message, and seeded examples. You can also explore advanced options like streaming responses or automatically opening the widget on page load.
Next, to embed the chat widget into your Webflow website, simply copy the code snippet provided by BuildShip and add an embed component to your desired page in Webflow.
Paste the code snippet into the embed settings, and you're almost done!
You can also style your chat widget button to match your website's design. To do so, add a class to the button widget and style it using CSS. You can customize the background color, border color, display, font weight, and any other properties to make it blend easily with your website's aesthetic.
Step 6: Publish and Start Chatting!
Once you've saved and published your changes, your AI-powered chatbot assistant will be live on your Webflow website, ready to engage with your visitors and provide them with meaningful answers and actions based on your connected tools and databases.
For more in-depth information on adding tools, setting up instructions, and other advanced features, be sure to check out the documentation and video linked below.
Conclusion
By following the steps above and using the power of BuildShip and Webflow, you can create an AI assistant that can generate leads, support customers, and take actions on behalf of your users. The possibilities are endless, and we can't wait to see what you build!
The AI Assistant trend is sweeping the internet. Now, picture merging it with low-code to create your own AI Assistant, trained on any data, directly on your website—this time with Webflow!
Low-code backend for Webflow
Over 2,000 + organisations use Webflow to power their frontend with no-code. Webflow is great for building visually pleasing websites, right from your browser. You can add functional logic building blocks to showcase UI changes in your website.
But what about your backend? Do we have to resort to the conventional coding dilemma to flesh out your backend infrastructure? Well, no, because we have BuildShip.
BuildShip is a low-code visual backend builder that helps you build powerful APIs, backend tasks and scheduled jobs right from your browser—all without conventional coding. And yes, we'll use it to develop your AI assistant.
Now imagine the ability to extend this power of no-code to your backend, and along the course building out your very own AI assistant too?
Excited? This is where this blog comes in.
AI Assistant using any model in Webflow
BuildShip comes with its own set of integration nodes which also include the AI Assistant nodes. You can integrate any AI model like OpenAI, Claude and Azure to build out your Assistant right into your Webflow website.
Moreover, you can connect your AI Assistant to any tool or database like Supabase, Firebase, Postgres, etc. or tools like Stripe, Notion, Slack, etc. In this blog, we’ll learn how to connect to your Google Spreadsheets data and have your AI Assistant answer customer queries and take actions connected to your tools and databases right from your Webflow site.
Let’s get started!
Step 1: Clone a ChatBot Template on BuildShip
To get started, head over to BuildShip and clone one of the assistant templates, such as "Chat with Google Sheets." This template is perfect for connecting your chatbot to a Google Sheet containing information about your products or services.
Step 2: Configure Your Assistant
Once you've cloned the template, you'll need to provide a few key pieces of information, such as your OpenAI API key, assistant ID, and the link to your Google Sheet.
You can also add any other tools you want your assistant to access, such as Airtable, Supabase, Google Sheets or Firebase.
Step 3: Customize the User Prompt
BuildShip provides a no-code style of function calling, where you can specify the tools you want your assistant to use and provide specific instructions on what job it should do and how it should use the tools. This is known as prompt engineering, and it's crucial for ensuring your assistant performs its tasks effectively.
Step 4: Ship Your Assistant as an API or Chat Widget
With your assistant configured and the prompt engineering complete, you can now ship your assistant as either an API endpoint or a ready-made chat widget that can be easily plugged into your Webflow website.
Step 5: Customising and EmbeddingYour Chat Widget
Before embedding the chat widget into your Webflow website, you can customize various parameters, such as the chat widget button name, chat title, starting message, and seeded examples. You can also explore advanced options like streaming responses or automatically opening the widget on page load.
Next, to embed the chat widget into your Webflow website, simply copy the code snippet provided by BuildShip and add an embed component to your desired page in Webflow.
Paste the code snippet into the embed settings, and you're almost done!
You can also style your chat widget button to match your website's design. To do so, add a class to the button widget and style it using CSS. You can customize the background color, border color, display, font weight, and any other properties to make it blend easily with your website's aesthetic.
Step 6: Publish and Start Chatting!
Once you've saved and published your changes, your AI-powered chatbot assistant will be live on your Webflow website, ready to engage with your visitors and provide them with meaningful answers and actions based on your connected tools and databases.
For more in-depth information on adding tools, setting up instructions, and other advanced features, be sure to check out the documentation and video linked below.
Conclusion
By following the steps above and using the power of BuildShip and Webflow, you can create an AI assistant that can generate leads, support customers, and take actions on behalf of your users. The possibilities are endless, and we can't wait to see what you build!
