BuildShip with Webstudio - Adding AI Assistant to your website

Webstudio
25 Apr 202472:52

TLDRIn this live stream, the host is joined by OLG, the founder of Web Studio, to demonstrate the integration of AI assistants into websites using BuildShip and Web Studio. BuildShip is introduced as a low-code backend builder that allows for the creation of APIs, scheduled jobs, and AI workflows visually. Web Studio, on the other hand, is a tool for building flexible frontends without the complexity of backends. Together, they form a powerful combination for complete app development. The session showcases how to build a chat widget that interfaces with Google Sheets data, allowing users to engage in a conversational UI to inquire about products, customer support, or make decisions. The process involves creating workflows in BuildShip, using templates, and then integrating these workflows into Web Studio to create a seamless user experience. The live stream also addresses potential issues like API timeouts and the future of real-time streaming responses in web development.

Takeaways

  • 🚀 **BuildShip and WebStudio Integration**: BuildShip is a low-code backend builder that allows users to create APIs, scheduled jobs, and AI workflows visually. WebStudio is a tool for building flexible frontends. Together, they offer a complete app-building experience.
  • 📚 **Workflow Templates**: BuildShip provides templates to start with, which can be customized for specific use cases without starting from scratch.
  • 🤖 **AI Assistant Integration**: The session focused on integrating AI assistants into websites, showcasing how to connect them with data sources like Google Sheets for a dynamic user experience.
  • 💡 **Visual Backend Creation**: Users can generate missing nodes in BuildShip workflows using AI, and each node's code is available for inspection and customization.
  • 📈 **WebStudio's Frontend Flexibility**: WebStudio allows for building frontends without backend complications, focusing on providing the best visual frontend experience.
  • 🔗 **API Endpoints**: Once a workflow is shipped in BuildShip, an instant API endpoint is provided, which can be used in any frontend application.
  • 📝 **Chat Widget Customization**: WebStudio enables customization of chat widgets, allowing users to change styles and behaviors without writing code.
  • 🔌 **Plug-and-Play Experience**: The integration between BuildShip and WebStudio is designed to be plug-and-play, making it easy for users to connect their frontends with backend workflows.
  • ⚙️ **Custom API Calls**: For users who prefer not to use the chat widget, BuildShip also supports direct API calls, offering flexibility for different operational and AI workflow use cases.
  • 🌐 **Server-Side Rendering**: WebStudio's frontend is server-rendered, which means the chat widget can be made functional by leveraging server-side capabilities.
  • ✂️ **Decoupling Frontend and Backend**: The tutorial emphasized the benefits of decoupling the frontend and backend, allowing developers to build each independently and then integrate them as needed.

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 the creation of these elements through a drag-and-drop interface and can generate missing nodes with AI if needed.

  • How does Web Studio differ from BuildShip in terms of its focus?

    -Web Studio is focused on building flexible frontends while abstracting away the complexities of backends. It provides a tool for creating the best possible frontend experience visually without writing code, whereas BuildShip is designed for building dynamic backend components that require databases, user data, and gated content.

  • What is the use case that the session aims to build?

    -The session aims to build an AI assistant that can be integrated and showcased on a website. The AI assistant will be connected to the user's own data, possibly from a database like Google Sheets, and will allow users to interact with it through a chat widget for customer support, user acquisition, or product inquiries.

  • How can BuildShip workflows be triggered?

    -BuildShip workflows can be triggered through an API, which can be a GET or POST type of request. The API endpoint is provided once the workflow is shipped, and this URL can be used in the frontend to trigger the backend processes.

  • What is the advantage of using Web Studio for frontend development?

    -Web Studio offers a visual, no-code approach to building frontends, allowing for flexibility and customization without the need for coding. It also supports server-rendering, which can improve performance and SEO, and it can be used to create custom components that can be integrated into any framework or technology.

  • How can BuildShip and Web Studio be combined to create a complete app-building experience?

    -BuildShip can be used to create the backend logic, APIs, and workflows, while Web Studio can be used to design and build the frontend interface. The two can be combined by using the API endpoint from BuildShip within the Web Studio frontend to create a seamless user experience and a fully functional application.

  • What is the process for integrating BuildShip with Web Studio?

    -The integration process involves creating a backend workflow in BuildShip, shipping it to get an API endpoint, and then using this endpoint in Web Studio to make API calls that trigger the backend processes. This can be done by embedding a widget provided by BuildShip or by directly using the API in custom-built frontend components.

  • Can Web Studio create CMS-driven sites?

    -Web Studio is designed to work with any CMS that has an HTTP API. It is capable of generating pages and content based on data fetched from the CMS. Web Studio is not a CMS itself but can serve as a frontend for any CMS, handling the presentation layer while the CMS manages the content.

  • How does BuildShip handle real-time events or streaming responses?

    -BuildShip can listen to real-time events from databases like Firebase, and it can be configured to trigger workflows based on these events. For handling streaming responses, BuildShip can use its AI capabilities to generate nodes that can process and respond to streaming data.

  • What kind of support do BuildShip and Web Studio offer for e-commerce integrations?

    -BuildShip can be connected to e-commerce platforms like Shopify using APIs. It can trigger workflows based on events such as new subscriptions or updates to the shopping cart. Web Studio can visually build e-commerce frontends, and with the addition of API integrations, it can interact with e-commerce backends seamlessly.

  • How can BuildShip and Web Studio be used for building internal dashboards?

    -Both BuildShip and Web Studio are suitable for building internal dashboards. BuildShip can handle the backend data processing and API creation, while Web Studio can be used to visually design and build the dashboard frontend, connecting to the APIs to display real-time 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 also introduced as a tool for building flexible front ends without the backend complexities. The session's agenda includes building AI assistants, integrating them into a website, and connecting them with user data from databases like Google Sheets.

05:03

🤖 Building AI Assistants with Bill Ship

The presenter demonstrates how to build an AI assistant using Bill Ship by connecting it with an OpenAI assistant and Google Sheets. The assistant is instructed on its role and provided with information from the Google Sheets database to have meaningful conversations with users. The process includes configuring the assistant's prompt and using built-in tools for document retrieval and code interpretation.

10:03

📚 Adding Additional Tools to the AI Assistant

The video shows how to expand the AI assistant's capabilities by adding more tools, such as fetching a page from Notion. The presenter explains how to provide descriptive information for each node and connect it to the assistant, allowing the assistant to access and utilize additional data sources.

15:05

🔗 Integrating Bill Ship Workflows with Web Studio

The presenter discusses how to integrate Bill Ship workflows with Web Studio, either by using a provided widget or directly through an API. The process involves creating a project in Web Studio, adding the widget, and customizing it to fit the website's design. The video also covers how to use the API for more customized front-end development.

20:07

🖥️ Visual Building and API Integration in Web Studio

The video demonstrates creating a chat interface in Web Studio, which includes visual elements like input boxes and buttons. The presenter then shows how to connect this interface to the backend using an API, detailing the process of fetching data, submitting search queries, and handling responses from the backend.

25:10

🔗 Completing the Backend Connection and Testing

The presenter completes the backend connection by configuring the API request to send a message to the backend and receive a response. They also troubleshoot an issue with the response rendering and discuss the importance of showing a loading state to users when fetching data.

30:11

📝 Real-time Interactions and Future Enhancements

The video explores the possibility of real-time interactions and streaming responses, which could be used for event-driven applications. The presenter also discusses future enhancements for Web Studio, including the ability to build internal dashboards, connect to e-commerce sites like Shopify, and support for Next.js.

35:12

🔍 Debugging and Exploring Bill Ship's Capabilities

The presenter debugs a response issue by checking the logs and the JSON response format. They also share insights into Bill Ship's ability to connect with various APIs and services, including the potential for creating custom integrations with AI-generated code.

40:14

🌐 Building CMS-driven Sites with Web Studio

The video addresses the question of building a CMS-driven site with Web Studio. The presenter explains that while Web Studio does not have a built-in CMS, it is designed to work with any CMS that has an HTTP API. They discuss the upcoming feature that will allow Web Studio to generate pages and content URLs from a connected CMS.

45:14

✅ Wrapping Up and Future Collaborations

The session concludes with a discussion about the potential for building large-scale websites with Web Studio and the possibility of using platforms like Airtable as a CMS backend. The presenters encourage viewers to join their Discord channels for further questions and express interest in conducting more sessions based on community feedback.

Mindmap

Keywords

💡Web Studio

Web Studio is a tool designed to build front-end web applications with a focus on flexibility when it comes to backend integration. It allows users to create visually appealing interfaces without the need for extensive coding. In the context of the video, Web Studio is used to build the frontend of a website, which is then complemented by BuildShip for the backend functionalities.

💡BuildShip

BuildShip is a visual low-code backend builder that enables users to create APIs, scheduled jobs, and AI workflows in a visual, step-by-step manner. It is used in the video to build the backend of a web application, such as an AI assistant that can interact with a database like Google Sheets.

💡AI Assistant

An AI Assistant, as discussed in the video, is a software entity that can perform tasks or services based on predefined instructions or learned patterns. It can be integrated into a website to provide interactive experiences, such as customer support or product recommendations. The AI assistant in the video is connected to Google Sheets to access product information.

💡Google Sheets

Google Sheets is a cloud-based spreadsheet tool that allows users to create, edit, and collaborate on spreadsheets in real-time. In the video, it is used as a database to store product information that the AI assistant can access and utilize to provide accurate responses to user queries.

💡API

API stands for Application Programming Interface, which is a set of protocols and tools for building software applications. APIs allow different software systems to communicate with each other. In the context of the video, an API is used to trigger the AI assistant and to connect the frontend built with Web Studio to the backend services provided by BuildShip.

💡Server-Side Rendering

Server-Side Rendering (SSR) is a technique where web pages are rendered on the server before being sent to the client. This is contrasted with client-side rendering, where the webpage is built up in the user's browser. Web Studio uses SSR, which is beneficial for performance and SEO, as indicated in the video.

💡Workflow

A workflow in the video refers to a sequence of steps or processes that are followed to complete a certain task. In the context of BuildShip, a workflow is a series of operations or nodes that are executed in response to a trigger, such as an API call, to perform a function like interacting with an AI assistant or a database.

💡Low-Code

Low-code development platforms, like BuildShip, allow users to create applications with minimal coding. Users can visually manipulate components to create application logic without writing much, if any, actual code. This approach is highlighted in the video as a way to make backend development more accessible.

💡Frontend and Backend Decoupling

Decoupling the frontend and backend refers to the practice of separating the presentation layer (frontend) from the data processing layer (backend). This architectural approach is emphasized in the video as a way to create flexible and maintainable web applications, where Web Studio handles the frontend and BuildShip manages the backend.

💡Chat Widget

A chat widget is a user interface element that allows users to interact with an AI assistant or customer service representative in real time. In the video, the chat widget is an example of how the AI assistant can be integrated into a website, providing a conversational interface for users.

💡Visual Building Tools

Visual building tools are software applications that allow users to create and design web interfaces through a graphical user interface rather than writing code. Web Studio is an example of a visual building tool that enables users to build the frontend of their web applications in a visual and intuitive way.

Highlights

BuildShip is a visual low-code backend builder that allows the creation of APIs, scheduled jobs, and AI workflows in a step-by-step visual manner.

Web Studio is a tool designed to build flexible front-end applications without the complexity of backends, providing a best-in-class front-end experience.

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, connecting with data sources like Google Sheets.

A chat widget-style interface is showcased, allowing users to interact with AI for customer support or product recommendations.

BuildShip provides templates to start workflows, which can be customized and expanded with additional nodes and AI-generated code.

The OpenAI assistant node in BuildShip allows connection with OpenAI, where detailed instructions can be provided for the assistant's tasks.

Google Sheets can be connected to BuildShip to enable AI assistants to access and utilize product information for customer interactions.

BuildShip workflows can trigger on API calls, supporting GET or POST requests, making it versatile for various backend operations.

Web Studio allows for the creation of a chat widget by embedding a code snippet from BuildShip, which can be visually customized.

Web Studio's cloud-based rendering enables server-side processing for widgets that don't require client-side execution.

BuildShip's API can be used to create a custom front-end experience, offering flexibility beyond the chat widget.

Web Studio's approach to building with components allows for the integration of AI and databases into the front-end without writing code.

The session explores the possibility of using Web Studio and BuildShip for e-commerce site integrations, like Shopify.

Web Studio is working on a universal CMS integration that will allow connection with any CMS through their HTTP API.

BuildShip can be used to create PDF templates and send them via email, leveraging its workflow capabilities.

Both Web Studio and BuildShip emphasize the importance of flexibility, customization, and the ability to connect with various tools and databases.

Master Any Task with Onion AI！

Access powerful tools in one place—write, research, and create faster than ever.

Master Any Task with Onion AI！Try It Now