BuildShip with Webstudio - Adding AI Assistant to your website

In a live stream session, the founder of Web Studio, OLG, and the host discuss the integration of AI assistants into websites using BuildShip and Web Studio. They demonstrate how to build a backend workflow with BuildShip that can be triggered via API, showcasing a chatbot example that interfaces with Google Sheets. The session then shifts to Web Studio, where they illustrate how to visually build a front end, connect it to the BuildShip backend, and customize the chat widget. The discussion highlights the flexibility and power of combining visual front-end building with a low-code backend platform, emphasizing the potential for various applications, including e-commerce and internal dashboards. The presenters also touch on future capabilities, such as real-time event listening and deeper integration with e-commerce platforms like Shopify.

Takeaways

• 🚀 **BuildShip Overview**: BuildShip is a visual low-code backend builder that allows users to create APIs, scheduled jobs, AI workflows, and more through a step-by-step visual interface.
• 🌐 **Web Studio Introduction**: Web Studio is designed for building flexible frontends without backend complexities, focusing on providing the best visual frontend experience without writing code.
• 🤝 **Integration Benefits**: Combining BuildShip and Web Studio offers a powerful way to build complete applications, with Web Studio handling the frontend and BuildShip managing the backend logic and workflows.
• 💡 **Use Case Example**: The session focused on building AI assistants that can be integrated into websites, interact with databases like Google Sheets, and provide a chat widget for customer support or user engagement.
• 📚 **Google Sheets Integration**: AI assistants can be instructed to access and utilize data from Google Sheets to have informed conversations with users, making them more informative and helpful.
• 🔗 **API Endpoints**: Once a workflow is shipped, BuildShip provides an instant API endpoint URL that can be used to integrate the backend logic with any frontend application.
• 📈 **Customizability**: Web Studio allows for the customization of widgets and buttons, enabling developers to tailor the user interface to match the website's design and functionality.
• 🔧 **Building with Web Studio**: Web Studio enables the creation of components and pages that can be visually developed and then integrated into any framework or technology stack.
• 🔁 **Real-time Data Handling**: There is a potential for Web Studio to handle real-time data streams, which could be useful for features like live updates or instant notifications.
• ⚙️ **Future CMS Integration**: Web Studio is working on a universal way to connect with any CMS that has an HTTP API, allowing for the generation of pages and content management directly within Web Studio.
• ✅ **Stripe Integration**: BuildShip can integrate with Stripe, allowing for the creation of workflows that respond to events such as new subscriptions or payments, enhancing e-commerce capabilities.

Q & A

What is the primary function of BuildShip?

BuildShip is a visual low-code backend builder that allows users to create APIs, scheduled jobs, AI workflows, and other backend functionalities in a visual, step-by-step manner. It enables users to drag and drop different nodes and generate missing nodes with AI. When ready, users can ship their creation to get an instant API.

How does Web Studio complement BuildShip?

Web Studio is a tool designed to build flexible front-end interfaces without the complexity of backends. It complements BuildShip by providing the frontend experience, while BuildShip handles the backend requirements such as dynamic content, databases, and user data. Together, they offer a complete app-building experience with a good visual balance between front-end and back-end development.

What is the use case that the session focuses on building?

The session focuses on building AI assistants that can be integrated and showcased on a website. It discusses how to connect these assistants with personal data, such as from Google Sheets or databases, and how users can interact with them through a chat widget for customer support, user acquisition, or product inquiries.

How does the integration of BuildShip and Web Studio work for creating a chat widget?

The integration involves creating a workflow in BuildShip that triggers an API, connecting to an AI assistant, and fetching data from sources like Google Sheets. This data is then used to have a meaningful conversation with users. On the Web Studio side, the chat widget is embedded using a provided code snippet, which can be customized visually within Web Studio.

What are the options for using the BuildShip API in a front-end application?

Users can either use the provided chat widget builder that allows for customization and easy integration or directly use the API by making REST API calls (GET or POST) from the front end to trigger backend workflows. This provides flexibility for developers to build their front-end experience as desired.

How does the AI assistant node in BuildShip connect to external databases like Google Sheets?

The AI assistant node in BuildShip is configured to connect to external databases by providing a URL and performing OAuth-based authentication. Once connected, the assistant can access and utilize the data from the database to engage in conversations with users, providing information relevant to the website and company.

What are the benefits of using Web Studio for visual development?

Web Studio offers a cloud-based visual development environment that allows for server-rendered applications. It enables developers to create and customize components without writing code, making it a flexible tool for building front-end interfaces. It also provides the ability to publish and preview the application in real-time.

How can one customize the chat widget's button in Web Studio?

In Web Studio, developers can remove the hardcoded button from the widget code and replace it with a Web Studio button component. This allows for full customization of the button's appearance, such as changing the background color, text color, and corner radius, through the visual interface.

What is the process for testing the integration of BuildShip and Web Studio?

Testing involves sending a request from the front end to the BuildShip API, checking the logs in BuildShip to ensure the request was received, and then verifying that the response from the API is correctly displayed in the Web Studio front end. This process helps ensure that the integration is functioning as expected.

What are the future enhancements planned for BuildShip and Web Studio?

Future enhancements include the ability to stream responses in real-time, better handling of loading states, and improved support for connecting to various databases and APIs. Additionally, there are plans to simplify the process of creating CMS-driven sites and integrating with e-commerce platforms like Shopify.

How can BuildShip and Web Studio be used to build internal dashboards?

Both BuildShip and Web Studio can be used to build internal dashboards by leveraging their capabilities to connect and display data from various sources through a user interface. BuildShip can handle backend data processing and API creation, while Web Studio can be used to design and build the frontend visualization of that data.

Outlines

00:00

😀 Introduction to Bill Ship and Web Studio

The video begins with an introduction to Bill Ship, a visual low-code backend builder that allows users to create APIs, scheduled jobs, AI workflows, and more in a visual, step-by-step manner. Web Studio is highlighted as a tool for building flexible front ends without the complexity of backends. The session aims to demonstrate building AI assistants and integrating them with data sources like Google Sheets for a dynamic website experience.

05:03

📚 Exploring Bill Ship's Workflow and Nodes

The presenter dives into the workflow capabilities of Bill Ship, showcasing how to use templates, trigger workflows with APIs, and manipulate various nodes to perform tasks. The system can generate missing nodes with AI, and users can even incorporate custom code snippets. The video also explains how to connect to external services like OpenAI for creating AI assistants and Google Sheets for data integration.

10:03

🔗 Adding Additional Tools and Building the Assistant

The process of adding more tools to the AI assistant built in Bill Ship is explained. The presenter demonstrates how to connect additional services like Notion to the assistant for more comprehensive data retrieval. The assistant's functionality is further detailed, including configuring user prompts and maintaining conversational threads.

15:05

🖥️ Integrating Bill Ship with Web Studio Frontend

The focus shifts to integrating the Bill Ship backend with the Web Studio frontend. The presenter outlines the process of creating a project in Web Studio and adding a chat widget by embedding a code snippet. The chat widget is customized to fit the frontend's design, and the server-rendering capabilities of Web Studio are discussed.

20:07

🔗 Creating a REST API Call for Frontend Integration

The presenter discusses creating a REST API call to trigger a backend workflow from the frontend. Differentiating between GET and POST requests, the video shows how to ship the workflow and obtain a URL endpoint for frontend usage. The concept of using the URL in frontend applications is introduced.

25:10

🏗️ Building the Chat Interface in Web Studio

The process of building a chat interface in Web Studio is detailed. The presenter guides through creating a form with an input field and a submit button, then styling and positioning them within the chat container. The form is designed to send a message to the backend, which will be processed and returned by the AI assistant.

30:11

🔌 Connecting the Frontend to the Backend API

The presenter explains how to connect the frontend form to the backend API. This involves capturing the user's input from the form, sending it as a POST request to the API, and displaying the response in the chat interface. The importance of setting the correct headers for JSON and using system variables for dynamic content is emphasized.

35:12

📈 Debugging and Testing the Integration

The video covers debugging and testing the integration between the frontend and the backend. The presenter discusses handling responses, including error checking and ensuring the correct data is being sent and received. They also touch on the importance of user experience, such as displaying a loading state during long processing times.

40:14

🌐 Discussing Real-time Integrations and Future Plans

The conversation shifts to real-time integrations and future plans for both Web Studio and Bill Ship. Topics include listening to real-time events from databases like Firestore, connecting to e-commerce platforms like Shopify, and building internal dashboards. The potential for a universal real-time interface and simplifying API integrations with AI-generated nodes are also explored.

45:14

🔍 Answering Community Questions and Wrapping Up

The video concludes with a Q&A session where the presenters answer community questions about various topics, including the possibility of building a blog with Web Studio, integrating with Next.js, and working with Stripe for checkout and subscriptions. They also discuss the potential for generating PDF templates and emails through Bill Ship and the flexibility of Web Studio for building CMS-driven sites.

Keywords

💡BuildShip

BuildShip is a visual low-code backend builder that allows users to create APIs, scheduled jobs, AI workflows, and other backend functionalities in a visual, step-by-step manner. It is designed to work well with platforms like Web Studio by providing the backend components needed for dynamic web applications. In the video, BuildShip is used to create a workflow that integrates with AI and databases like Google Sheets.

💡Web Studio

Web Studio is a tool for building flexible front-end web applications while abstracting away the complexities of backend development. It focuses on providing a visually appealing front-end experience without the need for a backend, CMS, or database. In the context of the video, Web Studio is used to create the user interface for a website that will be connected to a backend built with BuildShip.

💡API

An API, or Application Programming Interface, is a set of rules and protocols that allows different software applications to communicate and interact with each other. In the video, the creation of an instant API with BuildShip is discussed, which will be used to connect the front end built in Web Studio with the backend services.

💡AI Assistant

An AI Assistant, as mentioned in the video, is a software entity that can perform tasks or services based on natural language inputs. It is integrated into the website using BuildShip's workflow capabilities, allowing users to interact with the website through a chat interface, which can be particularly useful for customer support or product recommendations.

💡Google Sheets

Google Sheets is a cloud-based spreadsheet system that is part of Google's online office suite. In the video, it is used as a database to store information about products, which the AI assistant can access and utilize during its interactions with users on the website.

💡Workflow

A workflow in the context of the video refers to a sequence of steps or processes through which a certain task is completed. BuildShip uses workflows to automate tasks and connect different services, such as the AI assistant and Google Sheets, to perform complex operations in a streamlined manner.

💡Server-Side Rendering

Server-Side Rendering (SSR) is a technique where the server generates the HTML of a web page and sends it to the client instead of the client generating the HTML through JavaScript. Web Studio uses SSR to improve the performance and SEO of the websites it builds, as it allows the content to be immediately accessible to search engines and users without waiting for JavaScript to execute.

💡Chat Widget

A chat widget is a user interface element that allows users to engage in real-time conversations with AI assistants or customer service representatives. In the video, the integration of a chat widget on a website using BuildShip's API is demonstrated, showcasing how users can interact with the AI assistant through this widget.

💡Open AI

Open AI refers to the OpenAI API, which is used in the video to create an AI assistant that can be integrated into the website built with Web Studio. The assistant is given specific instructions and data sources, like Google Sheets, to provide meaningful and informed responses to user queries.

💡Visual Building Experience

The visual building experience is a method of creating web applications using a graphical interface, where users can drag and drop elements to design their web pages without writing code. Both Web Studio and BuildShip offer this type of experience, allowing for the quick and intuitive assembly of web applications and their backend functionalities.

💡Cloudflare Workers

Cloudflare Workers is a serverless computing platform that allows developers to run JavaScript code directly within Cloudflare's global network. Web Studio mentions the use of Cloudflare Workers for server-side rendering, highlighting the performance benefits of having web content served from the edge of the network, close to the end-users.

Highlights

BuildShip is a visual low-code backend builder that allows users to create APIs, scheduled jobs, AI workflows, and more through a visual step-by-step interface.

Web Studio is a tool designed to build flexible front-end experiences without the complexity of backend systems, offering a visual approach to front-end development.

Combining BuildShip and Web Studio enables developers to create complete applications with a dynamic backend and a customizable front end.

The session demonstrates building AI assistants and integrating them into a website, allowing users to interact through a chat widget.

Google Sheets can be used as a data source for AI assistants to provide informed responses to user queries on a website.

BuildShip offers templates to help users start building workflows without starting from scratch.

Users can generate missing nodes in BuildShip workflows using AI, and even incorporate custom npm packages.

BuildShip provides an endpoint URL once a workflow is shipped, which can be integrated into any front-end platform like Web Studio.

Web Studio allows for server-rendered components, enabling the creation of widgets that function without client-side JavaScript.

The integration of BuildShip and Web Studio can be done using either a provided widget or by directly using the API for more customized solutions.

Web Studio's approach to building front ends is visually oriented, allowing for the creation of complex user interfaces without writing code.

BuildShip's assistant node can connect to various databases and tools, such as Google Sheets, Firebase, and Notion, to enhance the functionality of AI assistants.

The live session showcases a practical example of integrating BuildShip's backend capabilities with Web Studio's front-end flexibility.

Web Studio's cloud-based rendering allows for the creation of fast, SEO-friendly, and cached web pages that are served quickly to users.

BuildShip's AI capabilities enable the generation of custom nodes, expanding the potential integrations and functionalities within a workflow.

The session discusses the potential for real-time event listening and streaming responses, suggesting future enhancements for interactive web applications.

Web Studio is planning to launch a feature that allows for the creation of CMS-driven sites, providing a universal way to configure URLs and content.

Both BuildShip and Web Studio emphasize the importance of flexibility and customization, catering to a wide range of use cases from simple to complex applications.