monday.com Tutorial: Build Your First AI App with Stable Diffusion

Introduction to Stable Diffusion and monday.com

Stable Diffusion is a cutting-edge generative model designed to generate high-resolution images efficiently, utilizing just one forward pass. Meanwhile, monday.com serves as an innovative work operating system (Work OS) where teams can create workflow applications in mere minutes, streamlining processes, projects, and daily operations. The platform empowers teams to shape workflows and projects code-free, features an adaptive system that automates manual tasks, and promotes connectivity in a digital workspace.

Prerequisites for Using Stable Diffusion

Before diving into the functionality of Stable Diffusion, there are a few essential prerequisites:

• Obtain an API Key: Head to Dream Studio, sign up for a free account, and retrieve your API Key. Make sure to save it in a secure location.
• Have a basic understanding of React.

Getting Started: Creating a New Project

To kick things off, follow these steps to create a new project:

1. Open Visual Studio Code and create a new directory named monday-tutorial.
2. Ensure that you have React and axios (a popular HTTP client library) installed in your project.
3. Once your React project is set up, substitute the content of the src/App.js file with the provided code snippets.
4. Create a new file named server.js in your project root and insert the specified code.

Installing Required Dependencies

To operate smoothly, confirm that all necessary dependencies are installed. In the root directory of your project, run:

npm install axios express

Enhancing App Functionality

Before proceeding, it's beneficial to explore the monday.com API playground for testing various queries and mutations. Alternatively, sign into your monday.com account and access the API playground for an optimized experience.

Creating a New Task

To create a new task (item) on monday.com, follow these steps:

1. Utilize the API playground to fetch your group_id.
2. Create a new item using the fetched group_id.

Adding File Column to the Board

Next, let’s add a new column of type file to the board, which will allow us to store the generated images:

1. Retrieve the column id for the new file column using the specified query.
2. Add a new file to the column by employing the itemId, columnId, and the generated image.
3. Example mutation to upload files can be outlined in your code.

Deploying Your Project

Once you’ve built your app, follow these deployment steps:

1. Create a new repository on GitHub and push your project there.
2. Access your Vercel dashboard and click on Add New. In the dropdown, select Project and import the newly created repository.
3. Wait for the deployment process to complete, and then copy/save your app’s URL for future use with your monday.com app.

Creating a monday.com Account and App

To utilize monday.com for your project:

1. Create a monday.com account using your Google account or preferred sign-up method.
2. Navigate to your profile and select Developers from the dropdown.
3. Click on Build app and fill in the details, like app name and description (e.g., “Stable Diffusion AI App” for this tutorial).

Building Your Feature

Once the app is created, go to the Features tab and:

1. Click Create feature, select Board view, and choose to Start from scratch.
2. In the build process, select the option to input a Custom URL and paste the link from Vercel.
3. Click Create build and switch to the View Setup tab to preview your app.
4. Publish your app by navigating to App versions, clicking the three dots, and selecting Publish.

Installing and Sharing Your App

To install your newly created app:

• Choose Install from the sidebar and click on the Install app button.
• Share your app by clicking Share and then Publish share. Copy the link to share with your friends.

Adding a monday.com Badge

Before concluding, enhance your app’s presentation by adding a monday.com badge. Simply copy the code provided and insert it into your application.

Conclusion

Thank you for following this tutorial! You have successfully created and published your first monday.com AI-powered app utilizing Stable Diffusion. Happy coding!