DEV Community: Bhavya Verma

How To Integrate Supabase Cloud Functions With No Code Visually Using BuildShip

Bhavya Verma — Fri, 19 Jan 2024 01:30:00 +0000

The world of software development constantly evolves, and today we will witness the full potential of low-code in action. In this blog post, we will explore the process of creating and implementing cloud functions for Supabase using BuildShip, a powerful low-code platform.

With BuildShip, you can visually develop backend logic and integrate with leading AI models and third-party services like Supabase, all without needing to write a single line of code.

What is Supabase?

Supabase is one of the favorite tools for developers worldwide. It is an open source software as a service, and provides hosted backend services such as Postgres database, authentication, and file storage. Supabase also has an extensive documentation for almost every use case required to make the development process faster.

Supabase projects can be integrated with all-time favorite tools such as MySQL and TypeScript, catering to developers' preferences and requirements. Through OAuth2-powered platforms like Appsmith, Supabase users can efficiently authenticate and authorize requests, ensuring enhanced security and privacy for their applications.

With BuildShip’s ability to build robust backend APIs and Supabase platform's flexibility, developers can handle a large number of users without compromising speed or performance. Supabase's strong focus on popular database integrations and the drop-in nodes from BuildShip further enhances scalability, allowing developers to easily connect with their preferred databases and existing assets.

Supabase vs Firebase

When considering backend solutions, the comparison between Supabase and Firebase often arises. Both Supabase and Firebase offer integration options for applications. They share the convenience of setting up projects directly in the browser and provide real-time data monitoring through user-friendly dashboards.

Firebase operates as a document store, while Supabase leans on PostgreSQL, a robust SQL-based relational database management system. This foundational difference can significantly impact data handling and structure for developers.

While BuildShip supports integrations for both platforms, this blog will specifically explore integrating Supabase into your backend workflow.

Building a Workflow with Supabase and BuildShip

To demonstrate the capabilities of BuildShip, we will create a workflow that is triggered whenever a new row is inserted into a Supabase table. Our ultimate objective is to summarize and classify the large text content within the newly inserted row.

Let's dive into the step-by-step process.

Selecting the Trigger

In BuildShip, we start by creating a brand new workflow. The first step is to select a trigger. For this example, we choose the REST API call trigger, which will kick off the execution of our workflow. Once deployed, we will obtain a publicly accessible API endpoint to connect with Supabase.

Adding the Cohere Integration Nodes

We now move on to adding the Cohere integration nodes to summarize and classify the large text content from the Supabase requests in parallel. Adding a parallel node allows both nodes to be executed simultaneously, improving efficiency and reducing execution time.

Cohere Text Summarizer Node

The first node we add is the Cohere Text Summarizer. We input our Cohere API key and extract the large text field from the request body. We set the length of the summarized text to short and the format to a paragraph. Additionally, we adjust the temperature to 0.7 for optimal results.

QUICK TIP 💡: Make sure to save your sensitive data like API Keys in the BuildShip Secret Manager. Learn more how to secure your keys with BuildShip here.

Cohere Classify Node

Next, we add the Cohere Classify node. Similar to the previous one, we input our API key and pass the text we want to classify as an array item. We use the large text from the request body and provide a set of classification examples to provide context to the model.

Adding Supabase Integration

Moving forward, we focus on adding the Supabase node to update the appropriate row with the values generated by the Cohere nodes.

Navigate to the Supabase group within the nodes library and select the Update Supabase Row node.

Configure the node by setting the API URL and the Supabase Secret Key obtained from the project settings.
Specify the row you want to update by adding a filter with the ID equal to the Row ID from the request body.

Finally, define the columns to update as an object, including the summary value returned from the Cohere Text Summarizer node and the first item returned from the Cohere Classify node.

Returning Success Response

To indicate a successful execution of our workflow, we add a return node and set the status code to OK, with the value set to success.

Connecting BuildShip with Supabase

With the BuildShip workflow now complete, we can connect it to our Supabase table to start listening for changes in real-time. Here's how to set it up:

In Supabase, go to the webhook section and create a new webhook.
Provide a name, such as buildship-webhook, and select the demo table you want to listen for changes on.
Choose to listen for insert events only and set the webhook type to HTTP Request with the method as POST.
Retrieve the endpoint URL from your workflow in BuildShip and paste it in the URL field.
Save the webhook to enable real-time updates from your table.

Connecting BuildShip with Supabase - YouTube

Get started with BuildShip 👉 https://buildship.comA Low-code Visual Backend Builder with AI 💬 Chat and build together with a community of no-code/low-code ...

youtube.com

Testing and Results

At this point, we have successfully set up the integration between BuildShip and Supabase. Let's test our setup by inserting a new row into Supabase. Upon saving the row, our BuildShip workflow will be triggered, summarizing and classifying the text, and updating the corresponding row with the generated values. This end-to-end process proves the efficiency and effectiveness of the BuildShip platform. Alternatively you can always view the backend code of each node by on the “</>” icon.

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

Object Detection with BuildShip's Google Vision API Template

Bhavya Verma — Thu, 18 Jan 2024 09:40:31 +0000

Creating powerful backend solutions can often be a daunting task, especially when dealing with complex functionalities like image processing and object detection. However, with the advent of AI-powered low-code platforms, the game has changed. BuildShip is one such platform that is revolutionizing the way developers and businesses implement backend workflows.

Today, we're diving into a feature that combines the simplicity of low-code development with the power of AI: the Google Vision API object detection template in BuildShip.

Introducing the Google Vision API Template on BuildShip

BuildShip's new template leverages the Google Vision API to create an API endpoint that does more than just analyze an image. It detects objects within the image and returns a new image with those objects outlined. This feature is perfect for applications that require visual recognition capabilities, such as inventory management, security surveillance, or even social media platforms.

Step-by-Step Guide to Using the Object Detection Template

Let's walk through the process of setting up an object detection workflow using BuildShip's intuitive interface:

Step 1: Trigger Creation

First, you'll create a trigger for your workflow. This will be a GET request with a custom path. For our example, we'll name it detectobjects. This endpoint will be the entry point for our object detection service.

Step 2: Handling Image URLs

Next, you'll set up a node to handle the image URL passed as a query parameter. This parameter, named imageURL, is essential as it points to the image you want to analyze and is marked as required.

Step 3: Object Detection

Now, you'll use the detect objects in image node, which takes the imageURL from the query and utilizes the Google Cloud Vision package to identify and return the objects found in the image.

Step 4: Drawing Boundaries

After detection, the workflow passes the image and detected objects to the draw multiple object boundaries node. Here, you'll need to ensure that your Browserless key is set correctly, as the node requires this to function.

Step 5: Finalizing the Output

The last node in the workflow creates a response with the highlighted objects and their respective data. This information will be packaged neatly, ready to be returned to the user.

Step 6: Shipping the Workflow

Once everything is set up, you simply click on "ship" to deploy your workflow. BuildShip provides a URL for the newly created endpoint, which you can immediately test with any image.

Testing the Workflow

With the workflow deployed, you can use tools like Postman to send an image URL to your new endpoint. The result? A JSON response with the detected objects and a link to the processed image with the outlined objects. It's that simple and efficient.

Conclusion

BuildShip's Google Vision API object detection template is a testament to the platform's commitment to simplifying backend development. By leveraging AI and a user-friendly low-code approach, BuildShip enables developers and businesses to integrate complex functionalities like object detection with just a few clicks.

With BuildShip, you're not just building workflows; you're unlocking a world of possibilities that AI and low-code solutions bring to the table. Whether you're a seasoned developer or a business professional with no coding experience, BuildShip empowers you to create robust backend systems that cater to your unique needs.

Stay tuned for more insights on how BuildShip can help you streamline your backend development processes and harness the power of AI with ease. Happy Building!

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

How to Create a Telegram Bot with No Code - using BuildShip Workflow Builder (2024)

Bhavya Verma — Thu, 18 Jan 2024 09:16:27 +0000

Are you excited about building your very own Telegram bot, but the idea of coding makes you break into a sweat? Look no further, because we're about to take you on a journey where coding skills aren't required! In this blog post, we'll walk you through creating a powerful and interactive Telegram bot using BuildShip. With BuildShip, you can bring your bot dreams to life without writing a single line of code. Let's dive in and start building our Telegram bot together!

Step 1. Setting Up Your BuildShip Project 🚚

To kickstart this adventure, we'll need to set up our BuildShip project. It's easy! Open BuildShip, head over to your workflows, and simply click the "Add New Workflow" button to get started. The first step is to pick a trigger, and for our bot, we're going to choose the "New Telegram Bot Trigger".

This trigger lets your bot respond to incoming messages on Telegram - pretty cool, right?

Step 2. Getting Your API Token 🃏

But wait, before we dive into the fun stuff, we need an API token from Telegram. Open up Telegram and search for our trusty friend, "@botfather". This Telegram bot is here to guide us through creating our bots. If you're not on Telegram yet, create an account, and then search for "@botfather". Make sure to look for the verified checkmark next to its name - that's how you know it's the real one.

Once you're chatting with "@botfather", type /start to get things rolling. Among the options, go ahead and select /newbot to create a new bot. "@botfather" will ask for a name and a username for your bot. Let's name ours "BuildShip Bot" and give it the username "buildship_bot."

After you've wrapped up the process, "@botfather" will hand you an API token. Don't forget to copy that token – we'll need it later in BuildShip!

Step 3. Configuring the Telegram Node 📱

Back in BuildShip, we need to set up the Telegram node to enable our bot to send messages. This will let our bot send messages. Add a new node from the node library and search for "Send Telegram Message." This node lets us send messages through our bot. Now, let's fill in the required fields.

First, we need the chat ID, which is like the address of the conversation with our bot. To find it, create a new group on Telegram and invite the bot you just created, along with the "raw data bot." The "raw data bot" will provide you with the chat ID. Copy it and paste it in the designated field in BuildShip.

Next up, we need the Telegram API key. Click on the secrets field and pick the Telegram secret you created earlier. This ensures your API key is safely stored, and accessible only to your BuildShip project.

Lastly, type in the message you want your bot to send, something friendly like "Hello from BuildShip!". And just like that, we've set up the basics for our bot to chat away.

Step 4. Deploying and Testing the Workflow 🚀

With everything in place, it's time to set our workflow in motion. Hit the "Ship Workflow" button to deploy your bot. Invite your BuildShip bot to your Telegram chat group and test it out. You should receive a response from your bot, confirming that everything is working as expected.

Step 5. Enhancing Your Telegram Bot 🤖

Now that your basic bot is up and running, let's make it even more interactive and dynamic. To do that, we'll use the OpenAI GPT Text Generator node. This node lets us generate text responses based on user prompts.

Add the OpenAI GPT Text Generator node from the node library. Fill in the required fields, including the API key, user prompt, and system prompt. The API key can be obtained from OpenAI and stored securely using BuildShip secrets. The user prompt is the message sent by the user, while the system prompt is a suggestion for the bot's response.

Update the chat ID and Telegram API fields with the appropriate values. The text field will now be the response generated by the ChatGPT node. The response field will remain the same, capturing the response from the Telegram node.

Conclusion 🎬

You've done it! You've successfully brought your very own Telegram bot to life with BuildShip. In just a few easy steps, you've set up a bot that can chat and even generate dynamic responses. BuildShip offers a powerful platform that combines the simplicity of no-code development with the creative possibilities of coding. With this foundation, you can let your imagination run wild and expand your bot's capabilities. So go ahead, explore the endless possibilities, and enjoy building with BuildShip!

Remember, this blog post only scratches the surface of what you can achieve with BuildShip. Feel free to explore and experiment with other nodes and functionalities to further personalize your Telegram bot. Happy building!

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

Generate and Send Stripe Summary Reports with BuildShip

Bhavya Verma — Thu, 18 Jan 2024 08:52:11 +0000

If you're seeking a powerful tool that can help you build complex backend solutions with the ease of low-code and no-code, look no further than BuildShip. This blog will guide you on how to generate and send a Stripe summary report by email using BuildShip's new feature.

What is BuildShip?

BuildShip is an AI low-code workflow backend builder that simplifies the process of creating backend solutions. It offers a variety of templates and features that can be customized to suit your specific needs. One of these features is the ability to generate a Stripe summary report.

How to Generate a Stripe Summary Report with BuildShip

To begin with, navigate to your project in BuildShip and select the template for the workflow that suits your needs. In this case, we're focusing on the 'Stripe Summary Report' template.

Once you've selected your template, you'll see that most of the work is already done for you. There are just a few fields for you to fill in. Let's walk through each node:

Trigger Node: This is your schedule or CRON job with a location. You can set your CRON syntax schedule once a month and define the time zone.

Generate Stripe Report Node: Here, you'll see a warning that the Stripe API key is required. You can safely store your secrets in BuildShip. If you already have a Stripe key, you can select it here.

JSON to HTML Node: This node turns the JSON from Stripe into HTML. We'll delve into this more shortly.

Generate PDF Document Node: This node uses Puppeteer to convert the HTML input into a PDF document and saves it to the cloud storage. The input comes from the generated HTML, and the browserless key comes from your secrets.

Send Email Node: This is the final node, which sends emails with the PDF as an attachment. You'll be using the Resend API for this. Enter your Resend secret, recipient email, and the 'from' address.

Once you've filled in all the necessary fields, you're ready to deploy your summary report generator. After successful deployment, you can see your workflow in action.

Customizing Your Workflow

One of the standout features of BuildShip is its ability to customize and tweak parts of your workflow. For instance, if you want to add a footer to the HTML of your Stripe report, you can use the AI feature in BuildShip to do this. Simply click on the magic wand button next to the node, write your prompt, and let the AI work its magic. In this case, we're adding a footer that says 'Built with BuildShip'.

Conclusion

BuildShip offers a powerful and flexible solution for building your own backend solutions. With its low-code and no-code approach, it's easier than ever to get up and running with your own customized workflows. Stay tuned for more tutorials on how to get the most out of BuildShip.

Remember, we're just scratching the surface here. There's so much more you can do with BuildShip. Happy Building!

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

How to Generate SEO-Friendly Technical Blogs from YouTube Videos

Bhavya Verma — Wed, 17 Jan 2024 21:08:42 +0000

Are you looking to generate high-quality SEO-friendly technical blogs directly from a YouTube video? With this new BuildShip Template, you can now easily extract video captions and generate well-formatted technical blogs in markdown using the OpenAI Text Generator.

This template is designed to help you make the most out of your YouTube videos and improve your search engine rankings. In this blog, we will guide you on how to use this feature effectively.

How to Use the YouTube URL to Blog Template

To get started, follow these simple steps:

Clone the template “YouTube Video Blog Generator” and add your OpenAI API key in the node prompted. Once done, hit "Ship".

Copy the endpoint URL provided. You can use Postman, Hoppscotch, or any other API testing platform to create a POST request.

In your API testing platform, add the copied endpoint URL and set the request method to POST.
In the params section, add the YouTube Video URL you want to generate a blog from.

If you want to make your blog SEO-friendly, you can include a list of SEO keywords. To do this, navigate to the body section and select the raw format. Then, choose JSON from the dropdown and input your SEO keywords as a string array.

Note: Adding SEO keywords is optional. If you don't want to include any keywords, you can set the body to none.

Hit "Send" to generate the SEO-friendly technical blog based on the YouTube video captions.

Understanding the Workflow

Let's take a closer look at the workflow behind the YouTube URL to Blog template:

HTTP POST Trigger: The workflow starts with a trigger that listens for a POST request.

Get Query Param: This node checks for the presence of the Video URL parameter in the request.

YouTube Caption Extractor: The "YouTube Caption Extractor" node is used to extract the captions for the video. It supports both user-submitted and auto-generated captions with language options. The captions are returned as an array of subtitle objects with properties like start time, duration, and text content.

Extract & Join By Key: This node processes the returned array, extracts the subtitles, and concatenates them into a single string representing the captions for the entire YouTube video.

OpenAI Text Generation: The workflow then utilizes the power of the OpenAI Text Generation node. The token limit depends on the OpenAI Model being used. GPT-3.5 Turbo allows up to 4,097 tokens, while GPT-4, the more advanced model, allows up to 8,192 tokens.

Here are the YouTube video captions to generate a blog from: ${userPrompt}. Here's a list of the SEO Keywords to be included in this blog: ${keywords}. Also, make sure to return the blog content formatted in markdown.

System Prompt: This prompt sets the context for the text generation. It instructs the OpenAI Model to generate SEO-friendly technical blogs based on the content transcript. You can use the default prompt provided or customize it to suit your specific use-case.
User Prompt: The extracted YouTube video captions and the SEO Keywords are used as the user prompt for the OpenAI Model.
SEO Keywords: This node takes in the SEO keywords specified in the request body and sends them as part of the user prompt. You can include the SEO keywords in the user prompt to optimize your blog for search engines. Here's an example of how the user prompt can be constructed:``

You can set fallback keywords or leave the field blank if you don't have specific keywords to include.
OpenAI Model: You can choose between GPT-3.5 Turbo, GPT-4, and GPT-4 Turbo for the text generation process. In terms of the token limit, the GPT-3.5 Turbo allows up to 4,097 tokens, GPT-4 allows up to 8,192 tokens, and GPT-4 Turbo allows 128,000 tokens, as mentioned in the OpenAI Docs.
Max Tokens: This parameter sets the maximum number of tokens reserved for the response size. It ensures that the response fits within the specified token limit.

The time limit of the video depends on factors such as speech rate, pauses, and content density. If the token limit has not been exceeded, the workflow proceeds to the OpenAI Text Generation node.

Customizing the Template 🪄

Blog Style: You can customize the blog style by modifying the prompts in the OpenAI Text Generation node (System and User Prompt).
SEO Keywords: Include relevant SEO keywords to optimize your blog for search engines.
Token Limit: If you need more tokens for longer videos or complex content, you can upgrade to higher-tier OpenAI Models. Keep in mind that this may result in higher costs and may require a paid plan.

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

Introducing BuildShip

Bhavya Verma — Sun, 17 Dec 2023 12:07:25 +0000

We are the team behind Rowy.io and today we are super excited to launch BuildShip. BuildShip was created with all the feedback we got from the amazing community of no-code/low-code builders using Rowy and months of hard work by the team.

Why did we build BuildShip?

With a new AI model or API launching almost every day, we are seeing a whole new wave of product builders working on ambitious ideas. But the current landscape of no-code backend tools limits them to bring their ideas to life exactly the way they want to. Many no-code tools are not scalable beyond a certain point, lack integration to the latest API or AI model, are expensive, and are inflexible.

So does this mean you have to know how to code and how to use cloud platforms like GCP, AWS, Azure…to be able to launch ambitious AI startups? 🤔

Well, that’s exactly what we want to change with BuildShip. By combining the ease of no-code with the power of code and putting it in the hands of product builders and developers - we want to enable bringing ideas to life fast and exactly the way you imagined.

With BuildShip, you can create powerful APIs, schedule jobs, perform database CRUD operations on any cloud platform, and combine together any AI model - to create any backend workflow effortlessly on a single AI-powered platform. 🪄

Why should you use BuildShip 🛠️:

🔮 AI-Generated Nodes

Choose from hundreds of pre-built nodes to build your workflows. And if anything is missing, don’t wait for us to release an integration! Simply ask AI what you want and it gives you a custom workflow node generated just for you. This will change the way you build your backend!

💪 Combine the power of any AI model

BuildShip offers multimodal AI support, covering text, images, and video! From OpenAI nodes text generation to Vector embedding, generate lifelike videos using Sythesia, custom images using Stable Diffusion, or literally use any AI model from platforms like Replicate, Hugging Face, etc., to build your most powerful ideas by combining them.

📦 Readily use any API or 1M+ NPM packages

You can use any NPM package in the workflow node or ask Ask AI to use an NPM package and generate a node for you.

👩‍💻Code made accessible - anytime you want

BuildShip is not a black box, you can open the code of any node, tweak it any way you want, and make it your own. Use powerful developer tools like logging, version control, a code editor equipped with autocomplete, a lightning-fast debugger similar to localhost, and a secure sandboxing environment.

🚀 One-click deploy

When ready, hit “ship” and get your backend workflow deployed instantly!

🎭 Start fast with templates

We have templates featuring chatbots, music generators, reverse image search using Google Vision API, Vector DB search, HTML to PDF converter, and more!

Whether you're into no-code app builders like FlutterFlow, Webflow, Bubble or diving into frontend frameworks like Next.js, React, Vue, BuildShip has got your back. No more being stuck unable to leverage the latest AI models and tools due to lack of an integration or wrestling with cloud platforms, waiting for never-ending cloud function builds, or doing the DevOps dance. 🚀✨

Give BuildShip a try, especially if you are hitting the limits of your current no-code tools or you are a developer who wants to build ideas fast without having any coding limitations.

Our mission is to help you build your BIGGEST ideas in the simplest of ways. Join the BuildShip community on Discord and chat with other awesome no-code/low-code builders.

Build an AI MicroSaaS App using a Low-Code Template Integrated with Stripe

Bhavya Verma — Fri, 16 Jun 2023 11:52:33 +0000

SaaS (Software as a Service) refers to a software delivery model where applications are hosted and provided over the Internet as a service to customers. Instead of purchasing and installing software locally, users access and use the software through a web browser or a dedicated application.

With the flexibility of low-code development, we can effortlessly create our own MicroSaaS application called AI MicroSaaS Background Remover. This powerful application allows users to easily remove the background from their images without compromising the image quality! 🪄

Additionally, it offers valuable features like user authentication, a credit system where each photo removal consumes one credit, and the option for users to purchase credit packages for additional image removals.

The AI Background Remover application is built using Rowy, a powerful low-code platform, and utilizes local backend management tools hosted on Google Cloud. By leveraging the Replicate API, the application efficiently removes backgrounds from uploaded photos, ensuring high-quality results. Furthermore, the integration of the Stripe API enables seamless credit purchases, enabling users to acquire additional credits for image removals. The application's** frontend is powered by a separate NextJS project**, ensuring a smooth and intuitive user experience.

About the Tools ⚙️

Background Removal with Replicate API 🖼️

The AI Background Remover application leverages the Replicate API to perform accurate and efficient background removal from uploaded photos. Replicate is a powerful AI-driven image processing API that specializes in background removal tasks.

By utilizing advanced algorithms and deep learning techniques, Replicate enables the application to automatically extract foreground subjects and remove backgrounds while preserving the quality of the image. This integration ensures that users can effortlessly achieve professional-looking results without any manual editing.

Payment Processing with Stripe 💰

Stripe is a popular payment processing platform that the AI Background Remover application integrates with. It enables seamless handling of credit purchases within the application.

With Stripe's secure and reliable payment infrastructure, users can easily and safely purchase additional credits to remove backgrounds from more images. The Stripe API provides the necessary functionality to handle transactions, manage subscriptions, and ensure a smooth payment experience for users.

Seamless Frontend Experience with NextJS ✨

NextJS is a popular frontend development framework that powers the user interface of the AI Background Remover application. It provides a robust and scalable environment for building interactive and performant web interfaces.

NextJS offers features such as server-side rendering, client-side rendering, and static site generation, which enhance the overall user experience. With NextJS, the application delivers fast loading times, smooth transitions, and responsive designs, ensuring a seamless and enjoyable user experience while interacting with the AI Background Remover features.

Retrieving the Replicate API token ✅

Follow these steps to retrieve your Replicate API token for the application:

Visit the Replicate Website and sign in to your account. If you don't have an account, you will need to create one.
Click on the dropdown adjacent to your profile in the top-left corner of the page and navigate to the API tokens page.
Copy your Replicate API token and store it temporarily for further use in the application.

Retrieving the Stripe API key ✅

Follow these steps to retrieve your Replicate API token for the application:

Visit the Stripe Website and sign in to your account. If you don't have an account already, create a new one.
Click on the Developers button in the top-right corner to navigate to the Developers’ Page.
Navigate to the API keys section, copy your Stripe API key, and store it temporarily for further use in the application.

Setting up the backend on Rowy 💪

Follow these simple steps to set up the backend of the application in Rowy and create the necessary tables:

To create a table in Rowy using the AI MicroSaaS template, click on the "Use this template" button. This will open the Template Setup Wizard, where you can proceed by clicking the "Let's begin!" button to start the setup process.
You will be asked to enter a name for the table where all your data will be stored. You can choose to keep the default values and proceed without making any changes.
In the upcoming step, you will need to input your Replicate API key. If you haven't already added it to the GCP Secret Manager, click the 'Add a key in Secret Manager' button. You will be redirected to the GCP Secret Manager, where you can create a new secret with name replicate and enter the Replicate API token as its value. Once done, navigate back to the Template Setup Wizard and select your key.
In the next step, you will be required to input your Stripe API key. Similar to the previous step, create your secret key in the GCP Secret Manager and select it in the Template Setup Wizard.
Next, you should provide your Vercel URL. For local testing purposes, you can temporarily use "https://localhost:3000" as the default host for your frontend project.
In the next step, you will simply need to deploy pre-built Webhooks, provided by Rowy, to your own Google Cloud project.
Finally, we can deploy the cloud functions required by our project and click on the ‘Proceed’ button, which will redirect you to the project table.
Navigate to the Webhooks menu on the top right corner to see all the Webhooks used in the project. Copy the Webhook Endpoint from the "Prediction Done Webhook" and paste it inside the code for the "Start Prediction webhook", where prompted. Update the webhook and click on the ‘Save and Deploy’ button.

Setting up the NextJS Frontend ✨

Before running a Next.js application, you need to ensure you have certain prerequisites such as Node.js, a code editor, and a terminal available on your device.

To begin with the Next.js Frontend, you will need to navigate to the project repository and clone it onto your local machine. This can be achieved by running the command:

git clone https://github.com/rowyio/demo-microsaas.git

Once our project has been cloned, we can move inside the project folder and install the dependencies using the command:

npm install

Setting the Environment Variables 🪴

Navigate to the project folder in your preferred code editor and in the root directory, create a file named .env.local for local environment variables.
Referencing the .env.local.example file, copy the code, and paste it into the newly created .env.local file. This will populate the environment variable file with the necessary content, as indicated below:

REPLICATE_API_TOKEN=
STRIPE_SECRET_KEY=

# Firebase specific envs
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=


# Rowy specific envs
NEXT_PUBLIC_PROFILES_TABLE_ID=

NEXT_PUBLIC_START_PREDICTION_WEBHOOK=
NEXT_PUBLIC_CREATE_STRIPE_CHECKOUT_WEBHOOK=

First, you need to fill in the values for the Replicate API Token and the Stripe Key that you obtained earlier.
Next, we need to set a bunch of firebase-related environment variables.
In your web browser, go to your Firebase project and open the project settings. Scroll down to the 'SDK setup and configuration' section and click on 'Config'. Here, you will find the necessary environment variable values that you need to configure in the .env.local file.
For the 'Table ID' environment variable, if you haven't changed the default table name, enter 'microSaasProfiles' as its value. Otherwise, set it to the table name you added earlier.
To obtain the final two environment variables, namely the webhook for starting the prediction and creating the Stripe checkout webhook, you can find these values in the Webhooks section of Rowy.

Setting the Stripe Webhook URL 🕸️

After successfully adding the environment variables, we are nearly ready to start our project. However, there is one more task remaining. We need to set a Webhook URL in the Stripe dashboard, which will be triggered whenever a checkout is completed.

In the Stripe dashboard, go to the Developers section and access webhooks. Locate and click the "Add an endpoint" button.
To obtain the Endpoint URL, return to Rowy and navigate to the Webhooks section. Look for the "Stripe Checkout Session Completed" webhook and copy the corresponding endpoint URL. Paste this URL as the Endpoint URL in Stripe.
Next, click on "Select events" and search for checkout. Choose the event labeled checkout.session.completed and click "Add Events".
Finally, click the "Add endpoint" button to create your endpoint in the Stripe dashboard.

Running the NextJS Project ▶️

In the project directory, launch the local development server by running the following command in your terminal:

npm run dev

This command will start the server and enable you to test and develop the application locally.

We can now run up our localhost:3000 to see the Next.js frontend running. Thus, we can verify the features of the application as both our Frontend and Rowy Backend are up and running.

Conclusion 🚀

MicroSaaS services offer tremendous potential for building powerful applications with ease. With the assistance of Rowy's low-code backend, developers can efficiently explore a multitude of opportunities in creating innovative solutions. The AI MicroSaaS Background Remover application exemplifies the capabilities of such services by providing users with an intuitive platform to remove image backgrounds effortlessly.

Expanding the AI MicroSaaS Background Remover application, additional features could include advanced image editing options, collaboration capabilities, etc. Furthermore, Rowy's versatility extends beyond background removal, enabling developers to explore diverse MicroSaaS applications such as sentiment analysis tools, document recognition systems, or data visualization platforms. 🎯

By harnessing the power of Rowy and MicroSaaS services, developers can unlock endless possibilities for creating impactful and user-friendly applications, revolutionizing various industries, and driving innovation to new heights. 🧠

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

Build a Full Stack Storybooks Application with Low-Code: Rowy x BravoStudio

Bhavya Verma — Thu, 15 Jun 2023 21:40:49 +0000

Imagine generating captivating storybooks from simple one-line prompts! 🤯 With our full-stack, low-code, Story Books template, effortlessly create storybooks featuring auto-generated titles, subtitles, multiple pages, and vibrant illustrations.

And that's not all!

We enhance the experience by generating an audio file for each story page, enabling users to listen to the stories instead of reading them.

Let’s dive deeper and explore a powerful combination of tools that can bring your bedtime storybook app to life! 💪

The Story Books Application 📖

The Story Books application is designed to create engaging bedtime stories for children. It harnesses the power of the GPT-4 API to convert simple one-line prompts into entire storybooks filled with captivating tales. The app takes it a step further by leveraging the Stability AI API to generate beautiful illustrations for every page of the story.

We wanted to make the reading experience even more immersive and interactive, so we incorporated the PlayHT API. This means you can listen to the stories instead of reading them! It's a fantastic way to make the app more accessible and engaging for all users.

To get started, you can create your own Story Books app using our cloneable AI templates that combines Rowy as the spreadsheet UI backend and CMS, and Bravo Studio as the front-end no-code app builder. Thus you can easily manage the content of your stories using low-code app development.

What is Bravo Studio?

Bravo Studio is a code-free app builder that transforms your Figma or AdobeXD prototypes into native iOS and Android apps instantly. It also let’s you connect to external APIs and use the Data Library to give you the ability to connect your data with real data from an external source.

Bravo Studio utilizes Bravo Tags, which are merely native mobile components to make your apps Android and iOS compatible. These Bravo Tags enable Bravo to identify the native behavior in your apps such as slide menu, splash screens, and even Lottie Animations, to make real components and converting them to an original app in Bravo Studios.

With Bravo Studio, you can effortlessly turn your storybook content into a visually stunning and interactive mobile app, all without the need to write a single line of code.

Setting up the Story Books Application ✨

Let us give you a quick walk-through on how you can set up your Story Books application with Rowy and Bravo Studio!

1. Cloning the template on Rowy 🤩

The first step is to visit www.rowy.io and click on the "Sign In" button. Once you have created your Workspace and set up your Project, you need to select the Story Books template from the "Create a Table" section located at the top of the page.

You'll be guided by the template setup wizard to easily configure your table, include your confidential keys, and deploy your cloud functions, all in a single seamless process!

2. Setting up your Secrets 🤫

To begin the template setup, you will be asked to provide three secret keys: your OpenAI API Key, PlayHT Secret Key, and Stability AI API Key.

Here are the steps to obtain these secret keys for your project:

2.1 Retrieving the OpenAI API Key ✅

Go to the OpenAI Account Dashboard and create an account if you haven’t already.
Click on Create a new secret key.
Add a name for your secret key. Let's use "Story Book" as an example. Finally, click "Create" to save your new secret key.
Great! You've generated your OpenAI API Key. 🎉 Make sure to copy and store it in a safe and accessible location, since you'll be needing it later.

In the Template Setup Wizard, when prompted to add your OpenAI API Key, click on the "Add a key in Secret Manager" button. This will redirect you to the GCP Secret Manager. Add your OpenAI API Key as shown below and click "Create a Secret".

Now, you can go back to the setup process. Simply click on the Secret dropdown and select your newly generated API Key. If you can't see it, try clicking the “Refresh” button.

2.2 Retrieving the PlayHT Secret Key ✅

Navigate to the PlayHT Developer Dashboard. Create an account, if you haven’t already and copy the User ID and Secret Key.

That’s it! Now, you’ve generated your User ID and Secret Key! 🎉 In the Template Setup Wizard, when prompted to add your PlayHT Secret Key, click on the "Add a key in Secret Manager" button. This will redirect you to the GCP Secret Manager. Add your PlayHT Key as shown below and click Create a Secret.

{
    "userId": "PASTE YOUR USER ID HERE",
    "secretKey": "PASTE YOUR SECRET KEY HERE"
}

After generating the PlayHT Secret Key, you can return to the setup process and select your newly generated API key from the Secret dropdown.

2.3 Retrieving the Stability AI API Key ✅

Go to the DreamStudio Dashboard by Stability AI, and create an account via a simple step-by-step guided process.
Click on “Get API Key” button to generate your API Key.

Your Stability AI API Key is now generated! 🎉

In the Template Setup Wizard, when prompted to add your Stability AI Secret Key, click on the Add a key in Secret Manager button. This will redirect you to the GCP Secret Manager. Add your Stability AI Key as shown below and click Create a Secret.

"PASTE YOUR API KEY HERE"

After generating the Stability AI Secret Key, you can go back to the setup process, click Refresh and select the generated API key from the Secret dropdown.

Understanding and Customising Logic and Functionality of Story Books 💭

When you click on the "Add Row" button to create a new entry, you have the option to select the Writing Style from a dropdown menu. The available styles are inspired by renowned authors and illustrators in the field of children's literature. If you prefer, you can customize the list by adding or removing the names of authors of your choice through the "Column Config" settings.

The story is generated based on the content in the "Prompt" field. You can input any idea that comes to mind and the system will generate a story around it. For instance, you could enter A curious squirrel's exciting forest treasure hunt teaches the value of friendship.

The "Response" column is a Derivative Field that utilizes the power of OpenAI's GPT-4 API to generate story content in the form of a JSON object.

To access and modify the underlying logic responsible for generating the stories, simply go to the "Column Config" menu for the "Response" field.

Story Books Response - Inside the Script 📜

The systemPrompt variable is responsible for conveying the story prompt to the AI. We have set the response column to return the generated story book data in the form of a Structured JSON response, which would help us to parse through the data easily.

{
  "cover":{
      "title":string,
    "subtitle":string,
        "illustration":string
   },
   "pages":[
     {
            index:number,
      "illustration":string,
          "text":string
     }
   ]  
}

Via this derivative field’s JSON contents, we’ll be extracting the various components of our Story Books Application, such as the Story Title, Subtitle, the illustration prompt for generating the cover image, and the story pages with respective illustrations.

We can also add additional instructions and rules for the storybook content, such as they must be meaningful, have a good moral, be safe for children to hear, and must not contain explicit content.

In the API call to OpenAI, we specify the model, which is gpt-4, and the temperature. The Temperature always lies in the range of 0 to 1. The Temperature is particularly useful when we want the API to complete something, where there is only one answer and vice versa. If you want to generate ideas or complete a story, higher temperature will bring us more variety.

const response = await openai.createChatCompletion({
      model: "gpt-4",
      temperature: 0.7,
      messages: [
        { role: "system", content: systemPrompt },
        //...chatHistory,
        {
          role: "user",
          content: row.prompt,
        }
      ]
    })

When the temperature is set to 0, the responses become quite straightforward and lack creativity, almost being deterministic. On the other hand, when the temperature is set to 1, the responses exhibit a wide range of creativity and can vary significantly.

Generating Cover Images 🖼️

The prompt for generating the cover image of the story is stored in the "Cover Illustration" field, which is obtained from OpenAI's response. To generate the cover image, you can choose from a variety of style presets available in the "Style Preset" dropdown menu.

The "Style Preset" field can be customized through the Column Config menu. You have the option to add or remove style presets or change the default preset.

Both the "Cover Illustration" and "Style Presets" fields serve as listeners for image generation. Any modifications made to these fields will trigger the regeneration of the cover image.

If you are not satisfied with the appearance of your cover image, you have the flexibility to directly modify the prompt in the table or select a different style preset of your preference.

Selecting Voice for the Generated Story 🎧

The “Voice” column is a Connector field type which calls an external API, in our case it calls the PlayHT getVoices end-point. This allows us to fetch the list of voices we can generate our audio story in.

This ensures our app stays up-to-date as it would get all the updated voice options without having to manually add them in the dropdown menu.

Extracting Pages to a Sub-table 📑

Once we get our generated response via OpenAI, we can see that our response consists of two parts:

cover which contains the illustration, subtitle, and title for our story.
pages which contains illustration, index, and the story text for every page.

Now, to be able to convert this response into separate pages, we have a Sync Pages extension deployed which automates creating a document in a sub-collection for each page in the story. The extension is triggered by the responsePages , stylePreset , and voiceId fields, which means any changes in these columns will trigger a re-evaluation of the Sync Pages extension.

The Sync Pages extension body automates going through all the pages in the response and adds a document for each page of the story in the sub-table.

await Promise.all(row.response.pages.map(async(page,i)=>{
   console.log(`p-${i}`)
    await ref.collection('pages').doc(`p-${i}`).set({...page,stylePreset,voiceId},{merge:true})
  }))

Bravo Integration 🚀

We will be utilizing Rowy Webhooks to set up the connection and access data in our Rowy table via the Bravo Studio frontend.

“Create a Story” Webhook 🕸️

We have the option to enable verification via a Firebase Authorization token, which needs to be passed as a Header as Authorization: Bear ACCESS_TOKEN. This allows you to assert a restriction to who can access which stories. This verification is entirely optional.

The Parser function takes the request inside the body, and creates a new document for the incoming prompt to generate a new story. We can also add the Writing Style, Preset Style, and the Voice.

// send a post requst with body containing 'prompt' key with prompt of the story 
  const { body } = req;
    return { ...body}

“Get Stories” Webhook 🕸️

This is the Webhook responsible for getting the stories. The parser queries the collection to get the stories table. The parser maps through the query documents to create the stories objects and sends it back to the client.

Rowy X Bravo Studio: A Powerful Combination for Your Bedtime Storybook App 💪✨

The Rowy X Bravo Studio combination offers a highly reusable and extensible app-building solution that opens up a world of possibilities for no-code and low-code users. With the Story Books template, you can effortlessly create captivating storybooks by simply providing one-line prompts, making it ideal for users to reuse the template logic and enhance it to their liking.

With its user-friendly interface and the ability to manage and organize content using Rowy as the backend CMS, the possibilities for creating interactive mobile apps extend beyond storybooks. From educational apps and interactive catalogs, to guided tours and immersive experiences, the Rowy X Bravo Studio duo empowers users to transform their creative visions into reality, all without the need for coding expertise.

Experience the boundless potential of Rowy X Bravo Studioand unlock your imagination to craft captivating, interactive applications that leave a lasting impression on your audience.

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

Classify Website Content using Langchain, OpenAI and Browserless

Bhavya Verma — Tue, 23 May 2023 15:05:52 +0000

In the fast-paced digital era, the internet is teeming with an overwhelming amount of websites and online content. Finding the right information amidst this vast sea of data can be a daunting and time-consuming task.

Fortunately, with the advent of advanced language models and frameworks such as Langchain, we now have access to powerful AI tools that can streamline various tasks.

In this blog, you’ll explore the capabilities of the Langchain URL Classifier app (powered by Rowy) and discover how it harnesses Langchain to effectively classify websites.

Langchain URL Classifier - An Overview 🔎

The Langchain URL Classifier is a low-code demo app of how to leverage Langchain framework along with OpenAI to classify URLs and website content coupled with Browserless tool to make it more accurate. This app will take a website URL and give out a category of the website along with what is the purpose of each website.

By following this tutorial, you'll acquire a complete and functional app backend for URL classification. It serves as an excellent foundation that can be customized and adapted to suit your specific use cases as needed.

What is Langchain? 🦜🔗

Langchain is an AI framework designed for developing applications powered by language models. It distinguishes itself by going beyond mere language model integration, incorporating key principles that make applications more data-aware and dynamic.

By connecting language models to additional data sources, Langchain unlocks new possibilities for developing intelligent applications.

The Langchain URL Classifier primarily uses LLM Chains that enable us to connect several components to form a single, coherent application. We can, for example, build a chain that receives user input, formats it with a PromptTemplate, and then delivers the prepared result to an LLM. We can create more sophisticated chains by merging multiple chains or chains with other components.

Pre-requisites ✅

A Rowy Account with Rowy Run set up. If you don’t have one, create one on www.rowy.app - It is fully free for one project with unlimited database tables and functions (For more information on setting up Rowy, check out our documentation at https://docs.rowy.io/setup/install)

Setting up the Langchain URL Classifier ✨

Get started with the following step-by-step instructions to create a Langchain URL Classifier backend app 🚀

1. Create a table on Rowy

Visit www.rowy.io and click "Sign In". Once you've created your Workspace and set up your Project, select the Langchain URL Classifier template from the "Create a Table" section at the top of the page.

The template setup wizard will guide you through the steps to set up your table, add your secret keys, and deploy your cloud functions – all in one go!

2. Setting up your Secrets 🤫

As part of the template setup process, you'll be prompted to add two secrets: your OpenAI API Key and Browserless API Key. Here's how to retrieve these secret keys for your project:

2.1 Retrieving the OpenAI API Key ✅

Go to the OpenAI Account Dashboard and create an account if you haven’t already.
Click on Create a new secret key.
Add a name for your secret key, let’s say Rowy Langchain. Click Create.
Now, your OpenAI API Key is generated! 🥳 Copy and store it somewhere temporarily. In the Template Setup Wizard, when prompted to add your OpenAI API Key, click on the Add a key in Secret Manager button. This will redirect you to the GCP Secret Manager. Add your OpenAI API Key as shown below and click Create a Secret. Now, you can go back to the setup process. In the Secret dropdown itself, click Refresh to see your OpenAI API Key and select it.

2.2 Retrieving the Browserless API Key ✅

Navigate to the Browserless Dashboard and create an account, if you haven’t already.
Select a plan as per your requirement. (You can also opt for the free tier)
Verify your email address according to the prompted steps on the portal.
Your Browserless API Key is generated! 🥳 Copy the generated API key from the dashboard.

In the Template Setup Wizard, when prompted to add your Browserless API Key, click on the Add a key in Secret Manager button. This will redirect you to the GCP Secret Manager. Add your API Key as shown below and click Create a Secret.

Now, you can go back to the setup process. In the Secret dropdown itself, click Refresh to view your Browserless API Key and select it.

3. Deploying Cloud Functions 🚀

The template set up process will then prompt you to deploy the automations. Click the “Deploy Functions” button to set your derivatives into gear. Once the deployment completes, click “Proceed” and you will be redirected to your Langchain URL Classifier application.

Now, you’re all set to get hands on with the application! 🎉 Connect it to the frontend of your choice, experiment with the logic, or feel free to use the default Rowy template as a starting point.

Simplifying Web URL Classification 💫

The Langchain URL Classifier primarily consists of two automated data fields, i.e. Website Category and Website Summary. Every time a new row is added, the user can specify the URL of the Website in the URL field. The derivative functions listen to this field and dynamically generate results.

Website Category

The Website Category field uses an instance of the LLMChain class provided by Langchain. The Web Scraping service of the Browserless API retrieves the HTML content of the website. Based on the processing and extraction of this HTML content, the language model generates a response based on the provided prompt, which includes classifying the website into a category.

Website Summary

The Website Summary field uses a similar logic to generate the summary of the HTML content provided by the web scraping service.

Conclusion

The Langchain URL Classifier is an innovative application that utilizes the power of language models to simplify web URL classification. By leveraging the capabilities of the Langchain framework, this tool categorizes web URLs based on the content and purpose of the respective websites.

This blog highlights the use case of Rowy as a platform for leveraging large language models. It focuses on the Langchain URL Classifier, an application that dynamically generates website categories and summaries based on the provided URL. By simplifying web content navigation and enhancing information retrieval, the Langchain URL Classifier offers an efficient solution for finding relevant information.

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜

Automate GitHub Discussions with Rowy and OpenAI's GPT-3 API

Bhavya Verma — Thu, 18 May 2023 13:27:20 +0000

Managing open-source communities can be daunting, especially tracking community questions and providing timely answers. That's why we created the GitHub Command Centre. It's a powerful tool that leverages OpenAI's GPT-3 API to help open-source organizations manage their GitHub Discussions with greater efficiency. 💪

The GitHub Command Centre streamlines the process of handling community questions, automating responses via the OpenAI GPT-3 API and providing first-level triaging. This is a game-changing feature that makes managing open-source communities easier than ever before. In this blog post, we'll explore how the Command Centre works and how it can benefit your organization.

GitHub Discussions - An Overview

GitHub Discussions is a built-in feature that allows open source project communities to have threaded conversations and Q&A sessions. Discussions are essential for open source projects, as they provide a platform for community members to ask questions, share ideas, and offer feedback to project maintainers.

As open source projects grow and their communities expand, managing the discussions within them can become overwhelming for maintainers. That's where the GitHub Command Centre comes in, offering powerful tools to help streamline process of handling community questions and automating responses.

Pre-requisites ✅

A Rowy Account with Rowy Run set up. If you don’t have one, you can easily create an account at www.rowy.app. If you need help setting up Rowy, check out our documentation here.
A GitHub repository with Discussions enabled. If you're not sure how to enable Discussions, you can follow GitHub's documentation at https://docs.github.com/en/discussions.

Once you have these prerequisites in place, you're ready to start using the GitHub Command Centre to manage your open-source community discussions with greater ease and efficiency! 🎯

Setting up the Command Centre ✨

Follow these easy steps to get your GitHub Command Centre set up:

1. Getting Started with Rowy!

The first step is to visit www.rowy.io and click on the "Sign In" button. Once you have created your Workspace and set up your Project, you need to select the GitHub Command Centre template from the "Create a Table" section located at the top of the page.

The template setup wizard will guide you through the steps to set up your table, add your secret keys, and deploy your cloud functions – all in one go! This streamlined process will save you time and effort. 🚀

2. Setting up your Secrets 🤫

As part of the template setup process, you'll be prompted to add two secrets: your OpenAI API Key and your GitHub Personal Access Token. Here's how to retrieve these secret keys for your project:

1. Retrieving the OpenAI API Key ✅

Go to the OpenAI Account Dashboard and create an account if you haven’t already.
Click on Create a new secret key.

Add a name for your secret key, Let's use "Command Centre" as an example. Finally, click "Create" to save your new secret key.
Great! You've generated your OpenAI API Key. 🎉 Make sure to copy and store it in a safe and accessible location, as you'll be needing it later.

In the Template Setup Wizard, when prompted to add your OpenAI API Key, click on the Add a key in Secret Manager button. This will redirect you to the GCP Secret Manager. Add your OpenAI API Key as shown below and click Create a Secret.

Now, you can go back to the setup process. Simply click on the Secret dropdown and select your newly generated API Key. If you can't see it, try clicking Refresh.

2. Retrieving the GitHub Personal Access Token ✅

Using a Personal Access Token allows the suggested answers generated by the GitHub Command Centre to be sent as comments on behalf of the token owner. This feature helps to streamline the process of managing GitHub Discussions for open-source projects.

NOTE! ✍️ Please note that we are currently using the beta version of the GitHub Discussions API, which has some limitations. Specifically, we can only use Personal Access Tokens to send suggested answers as comments on behalf of users. We hope that GitHub will introduce more versatile ways of using the API soon.

QUICK TIP! 💡 You have two options for using Personal Access Tokens to send suggested answers as comments. You can either use your own token or create a new account specifically for a bot that will answer questions about your organization.

How to retrieve your Personal Access Token? 🤔

To retrieve your Personal Access Token, follow these steps:

Go to your GitHub Account and click on your profile picture in the upper-right corner of the homepage. Then, click on Settings.

In the left sidebar, click on Developer Settings.
In the left sidebar, under Personal access tokens, click on Tokens (classic).
Click Generate new token.
Set an expiration for the token and select the following scopes under the Select Scopes category:

public_repo
read:org
write:discussion
read:discussion

Click Generate Token and store it somewhere temporarily. You have successfully generated your Personal Access Token! 🥳

In the GCP Secret Manager, add your GitHub Personal Access Token as shown below and click Create a Secret.

Post which, you can go back to the setup process and click on the Secret dropdown to select your newly generated GitHub Token. If you can't see it, try clicking Refresh.

Setting up the Webhook 🕸️

After setting up your GitHub Command Centre template, you can configure the GitHub Discussions Webhook to listen for any changes in the discussion section of a specific repository.

To set up the webhook, follow these steps:

Go to the Webhooks section in the top-right menu of your Command Centre template.

Copy the Endpoint URL provided for the GitHub Discussions Webhook.
Navigate to the repository you want to set up the Command Centre for on GitHub (https://github.com/).
Go to the repository settings → Webhooks and click on "Add a Webhook".
Authenticate if prompted, then add the Endpoint URL to the Payload URL field. Set the content type to application/json.

Under the "Which events would you like to trigger this Webhook?" section, select "Let me Select Individual Events" and check the Discussions checkbox. This ensures that the webhook listens to changes in the repository's discussion section.

Save the webhook, and now it's ready to use! 🚀

Managing your Discussions Better 💯

The Command Centre allows you to easily manage your discussions through a well-organized Rowy Table. This provides all the necessary information such as:

Status of the Discussion

The Status column records the current state of the discussion, including whether it has been created, pinned, or answered. There are 13 different categories available to describe the status of GitHub Discussions.

Discussion Title and Description

Both the Title and Description fields are formatted in GitHub-Flavored Markdown, displaying the discussion's details in an easily readable format.

Category of the Discussion

Currently, GitHub Discussions are divided into six categories: General, Announcements, Polls, Show and Tell, Support/Q&A, and Idea/Feature Requests.

URL of the Discussion

The table includes the URL of each incoming discussion, providing easy access to the discussion.

Question Type

The Question Type field is a Derivative field type that utilizes the power of the GPT-3 API to perform first-level triaging of the discussion. The API classifies the discussion into one of three categories: Technical, Theoretical, or Unsure.

This categorization helps to quickly identify the type of question and provide appropriate answers, streamlining the process of managing discussions.

Updated At Timestamp

The Updated At field is a derived column that stores the updated timestamp, if available. If the value is not available, it stores the created timestamp of the discussion.

QUICK TIP! 💡 By clicking once on the arrow on the column name you can sort the table in descending order by the Updated At field so that the most frequent discussions are more easily accessible by staying on top.

Sending the Suggested Answer

Finally, the Send Comment toggle, when turned on, sends the Suggested Answer as a comment on the Discussion. This toggle triggers an extension that uses the GitHub Discussions API to send the answer. The beauty of this triggered extension is that it allows you to modify the Suggested Answer column according to your expertise, resulting in a more accurate and personalized response to the discussion.

Conclusion

In conclusion, the GitHub Command Centre is a game-changing solution for open-source projects. Its innovative features and customizable options make it an essential tool for managing discussions and building a thriving community on GitHub.

By integrating the GPT-3 API and the GitHub Discussions API, the Command Centre can provide suggested answers to discussions and automate repetitive tasks. With its highly customizable features, the Command Centre can be tailored to the needs of each individual project. By using the GitHub Command Centre, project maintainers can save time and effort, and build a more engaged and productive community around their projects. 🚀

If you enjoyed our content, please give us a follow on Twitter or join our Discord in case of any questions. We look forward to hearing from you! 💜