ad
ad

Streaming API Workshop with BuildShip x FlutterFlow

Science & Technology

Introduction

Welcome

Welcome to our Streaming API Workshop! My name is Stuart, and I am the Lead Builder Engagement for BuildShip. It brings me great pleasure to talk to you about streaming APIs today. We’ve got a good session planned, especially with the new developments in the streaming space in the low-code environment. We'll discuss how we can enhance user experiences and improve our overall app development.

Agenda

In this session, we will cover several topics:

  1. Why are we here?
    • Understanding streaming API responses vs. traditional REST APIs.
  2. The Full Stack in Low Code
    • Exploring the full stack in low-code environments.
    • How streaming APIs fit into the low-code ecosystem.
  3. Practical Examples
    • Building low-code examples in BuildShip.
    • Examples in FlutterFlow for text-to-audio streaming and AI assistant enhancement.
  4. Q&A Session
    • Answering questions from the audience.

Understanding Streaming APIs

What Are Streaming APIs?

When discussing streamed APIs, it’s vital to understand they are stateful, meaning they manage a connection within a session and context. Unlike REST APIs, which are stateless and handle each request independently, streaming APIs can continually update. There are two main benefits:

  1. Improved Performance: Immediate processing of data and reduced latency.
  2. Enhanced User Experience: Deliver a more responsive and smoother user interaction.

BuildShip in the Wider Ecosystem

What is BuildShip?

BuildShip is a backend visual low-code builder. Think of it as an AI-powered workflow accelerator that handles behind-the-scenes grunt work efficiently. BuildShip makes building APIs a visual process by defining inputs, processes, and outputs.

  • Templates & Integrations: Numerous pre-built workflows and hundreds of integrations.
  • Generated Nodes with AI: Utilizes AI to generate nodes for connecting services.
  • Openness: Low-code but not a black box—you can see, edit, and take the code elsewhere.
  • Ship Button: Activates and deploys your workflows.

Full Stack Paradigm

In the traditional software development world, roles are clear-cut:

  • Backend Developers
  • Frontend Developers
  • Database Administrators

However, in the low-code world, these lines blur. BuildShip fits beautifully with any database, frontend, or backend. Here’s how it integrates with various platforms:

  • Frontend: FlutterFlow for UI & UX.
  • Backend: BuildShip for business logic and secure operations.
  • Database: Agnostic to Firebase, Supabase, SQL, MongoDB, and more.

Practical Streaming API Examples

Text-to-Audio Streaming

We use a BuildShip workflow that starts with a REST API call to ChatGPT to generate a poem. Using Eleven Labs for text-to-audio conversion, the streaming API accelerates response time and enhances the user experience. Here's a brief on how it works:

  1. Send a REST GET request to ChatGPT
  2. Receive streamed responses from ChatGPT
  3. Convert text to audio using Eleven Labs, streaming audio as it processes

Streaming AI Assistant

In this example, we'll build an AI assistant using BuildShip's assistant nodes connected to OpenAI’s API for streamed responses. The assistant role involves web research based on URLs provided by the user. Here's how it is configured:

  1. Set API Keys in BuildShip
  2. Provide Assistant Instructions
    • Role: Research Assistant
    • Task: Web research from provided URLs
  3. Assign Tools & Set Response Type
    • Utilize “get website tool”
    • Ensure responses are streamed
  4. Deploy the AI Assistant

The example also shows configuring the assistant in the OpenAI playground, copying the assistant ID, and finalizing the workflow to test using BuildShip’s Chat Widget.

Integration with FlutterFlow

FlutterFlow supports streamed API responses, and BuildShip integrates seamlessly:

  1. Using BuildShip URL in FlutterFlow’s API Call Section
  2. Configure API URL and parameters manually if needed
  3. Set up streaming response type in FlutterFlow

Questions & Answers

Common Questions

  1. Importing YAML into FlutterFlow:

    • A paid account is required for YAML imports. Alternatively, manually copy your endpoint URL into FlutterFlow.

  2. Structured AI Assistant Responses:

    • Configure assistant to respond with JSON objects based on predefined schema and integrate with databases like Firestore.

  3. Integrating with Non-FlutterFlow Front Ends:

    • Follow detailed documentation available for integrating with other platforms such as Bubble, Webflow, etc.

Wrap Up

Our Discord community is highly active for further questions and support. Join us using the QR code below. Also, stay tuned for the upcoming V2 of BuildShip!

Join Discord

Thank you for joining this workshop. Stay connected for more updates and tutorials!

Keywords

Streaming APIs, BuildShip, FlutterFlow, Low-Code Development, AI Assistant, Text-to-Audio Streaming, OpenAI, Web Scraping, Backend Visual Builder, Enhanced User Experience

FAQ

How do I import YAML files into FlutterFlow?

  • You need a paid account in FlutterFlow to import YAML files. Alternatively, manually input your endpoint URL and configure parameters as needed.

How can I set up predefined questions and capture responses to store in a database?

  • Configure your assistant with JSON object responses, specify schema fields in the assistant’s instructions, and use BuildShip’s nodes to save responses directly into your preferred database.

What platforms besides FlutterFlow can I integrate streaming BuildShip endpoints with?

  • Platforms like Bubble, Webflow, Framer, and more. Detailed documentation is available on docs.build.com.

How do streaming API responses enhance user experience?

  • They provide data progressively, reducing perceived latency and making applications feel faster and more responsive.

What are the core benefits of using BuildShip?

  • Streamlined backend development, numerous integrations, AI-assisted node generation, open code access, and efficient API management.

How to join the BuildShip community for support and updates?

  • Join the Discord community using the provided QR code link for active support and latest updates on BuildShip developments.