Before you go any further

You are currently viewing front-end repository.

For back end, go to https://github.com/sethupavan12/hackathon_monday_backend

Before you begin

This is a template app to help developers get started building for the monday AI Assistant. It's a preview, so things may not work as expected. This code will eventually live in the official monday example apps repo.

If you're having problems, there are some common troubleshooting steps at the bottom of the page.

About the app

This is an example app with three basic apps inside it. It updates data on a monday board from output from GPT3.

This sample demonstrates the following concepts:

Integrates with OpenAI's GPT3
Uses monday's client-side SDK
Uses monday's React component library
Integrates with monday GraphQL API
Renders an app in a monday iframe
Authentication between the client-side app and backend

Setup

To connect this app to monday, follow the instructions in monday's technical docs: AI Assistant Quickstart

Please make sure you provided all OAuth permissions (in the App configuration at Monday Developers center).

Learn more

Learn more about the monday app marketplace

Want to join the monday app marketplace? Learn more and submit your app here!

Want to build more monday apps? Check out our docs.

Join the AI hackathon

Join the community

Exploring the example code

Example apps

The sample code contains multiple example layouts that you can build your app from. Check the out in the src/app/examples folder:

Livestream example: Fullstack example used in our quickstart
Context explorer: example that can be added to any AI assistant feature to explore the context and demonstrates different SDK capabilities.
Basic prompt layout: Base layout to send an input from the user to a backend API

Reusable elements

This repo contains components and hooks that you can reuse in your own apps:

Example layouts: Feel free to use any of the examples to build your app
hooks folder:
- useBoardColumns and useBoardGroups hooks:to retrieve the column and group structure from the monday API and use it in your app
- useAiApi: Prebuilt hook to call your AI API (i.e. the app backend)
- useFetch: HTTP Fetch as a hook
components folder:
- context provider: Context provider component to retrieve monday app context and pass it to your app
- ai footer: Generic footer with a disclaimer message
- text input with send: Text input component in the monday style
- text input with tags: Text input component that supports tagging

Troubleshooting

Here are some common problems and how to solve them:

You cannot see the AI Assistant in your monday account:

An account admin will need to enable the feature by following these steps: Enable AI Assistant beta

"Permission denied" error when calling the monday API:

Your app doesn't have the right permissions. Depending on which example you're using, you'll need different permissions.

To solve, add all the relevant permission scopes to your monday app. Do that with these instructions: Add permission scopes

If you're not sure which scopes you need, add them all during testing. You can remove the unnecessary ones later.

StaticGenBailoutError thrown when calling app backend:

You need to tell NextJS to compile the route statically. Uncomment line 7 in src/app/api/openai/prompts/route.ts:

export const dynamic = 'force-static'

You're on a corporate VPN and get a self-signed certificate error from NodeJS:

You need to tell NodeJS to allow insecure connections in your app. Add the following line to your .env file:

NODE_TLS_REJECT_UNAUTHORIZED=0

You're using HTTP (not HTTPS) and always get authentication errors from your backend:

Disable the authentication step. Set DISABLE_AUTH to true in line 9 of src/app/api/openai/prompts/route.ts. Just don't forget to re-enable it before moving your app to production!

const DISABLE_AUTH = true;

Your ngrok account isn't working and you need to use localhost:

If you're using localhost, your app will connect on using HTTP (not HTTP) and you'll probably get most of the above errors. Try all the solutions above, and you should be good to go!

You made a change to your app's config and it's not updating:

First try refreshing your browser.

If that doesn't work, you may have made the change on a different version of your app. Check that you're using the right version of your app. For more info on versioning, check out our docs: App Versioning Docs

Something else:

Drop a message in the hackathon Discord channel!

sethupavan12 / Auracle-Frontend