/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    ul: "ul",
    li: "li",
    strong: "strong",
    h2: "h2",
    a: "a",
    span: "span",
    div: "div",
    pre: "pre",
    code: "code",
    h3: "h3"
  }, props.components), {Video, Image} = _components;
  if (!Image) _missingMdxReference("Image", true);
  if (!Video) _missingMdxReference("Video", true);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "The new version 0.4.0 dropped some more cool stuff, such as:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: ["✅ ", _jsx(_components.strong, {
          children: "Phone number"
        }), " authentication 🚀"]
      }), "\n", _jsxs(_components.li, {
        children: ["✅ Ability to ", _jsx(_components.strong, {
          children: "link a phone number"
        }), " once signed up"]
      }), "\n", _jsxs(_components.li, {
        children: ["✅ Ability to ", _jsx(_components.strong, {
          children: "update a phone number"
        }), " from the profile page"]
      }), "\n", _jsx(_components.li, {
        children: "✅ Authentication pages design overhaul"
      }), "\n", _jsxs(_components.li, {
        children: ["✅ Added ", _jsx(_components.strong, {
          children: "dynamic sign-in/up page"
        }), " based on configuration"]
      }), "\n", _jsx(_components.li, {
        children: "✅ Added oAuth providers logos"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Let's take an in-depth look!"
    }), "\n", _jsxs(_components.h2, {
      id: "phone-number-authentication",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#phone-number-authentication",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Phone Number Authentication"]
    }), "\n", _jsx(_components.p, {
      children: "We can easily add phone number authentication by tweaking the global\nconfiguration:"
    }), "\n", _jsx(_components.div, {
      "data-rehype-pretty-code-fragment": "",
      children: _jsx(_components.pre, {
        className: "github-dark",
        style: {
          backgroundColor: "#24292e"
        },
        tabIndex: "0",
        "data-language": "tsx",
        "data-theme": "default",
        children: _jsxs(_components.code, {
          "data-language": "tsx",
          "data-theme": "default",
          style: {
            display: "grid"
          },
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "auth"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": {"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "providers"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": {"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "emailPassword"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "false"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "phoneNumber"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "true"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "emailLink"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "false"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "oAuth"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": [GoogleAuthProvider],"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  },"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "},"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: "And the result will be the below:"
    }), "\n", _jsx(Video, {
      src: "/assets/images/posts/phone-number-auth.mp4"
    }), "\n", _jsxs(_components.p, {
      children: ["Once enabled, we will be able to tweak the configuration in multiple places,\nsuch as the ", _jsx(_components.code, {
        children: "Authentication"
      }), " tab:"]
    }), "\n", _jsx(Image, {
      alt: "Auth providers linking",
      src: "/assets/images/posts/auth-providers-linking.webp",
      width: '1167',
      height: '994'
    }), "\n", _jsx(_components.p, {
      children: "Additionally, the phone number can be added or removed from the user's\nprofile page:"
    }), "\n", _jsx(Video, {
      src: "/assets/images/posts/add-remove-phone-number.mp4"
    }), "\n", _jsxs(_components.h2, {
      id: "dynamic-auth-configuration",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#dynamic-auth-configuration",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Dynamic Auth Configuration"]
    }), "\n", _jsxs(_components.p, {
      children: ["By tweaking our global configuration, we can easily choose the\nauthentication providers we want to use. For example, by choosing the below,\nwe will enable ", _jsx(_components.code, {
        children: "Email Link authentication"
      }), ", ", _jsx(_components.code, {
        children: "Google Auth"
      }), " and ", _jsx(_components.code, {
        children: "Facebook Auth"
      }), ":"]
    }), "\n", _jsx(_components.div, {
      "data-rehype-pretty-code-fragment": "",
      children: _jsx(_components.pre, {
        className: "github-dark",
        style: {
          backgroundColor: "#24292e"
        },
        tabIndex: "0",
        "data-language": "tsx",
        "data-theme": "default",
        children: _jsxs(_components.code, {
          "data-language": "tsx",
          "data-theme": "default",
          style: {
            display: "grid"
          },
          children: [_jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "auth"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": {"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "providers"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": {"
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "emailPassword"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "false"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "phoneNumber"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "true"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "emailLink"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "true"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ","
            })]
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "    "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "oAuth"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ": [GoogleAuthProvider, FacebookAuthProvider],"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "  },"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "},"
            })
          })]
        })
      })
    }), "\n", _jsx(Image, {
      src: '/assets/images/posts/dynamic-auth-config-example.webp',
      width: '2336',
      height: '1980',
      alt: "Dynamic Auth configuration"
    }), "\n", _jsxs(_components.h3, {
      id: "updating-your-makerkit-codebase",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#updating-your-makerkit-codebase",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Updating your Makerkit codebase"]
    }), "\n", _jsx(_components.p, {
      children: "To update your Makerkit codebase, run the following command:"
    }), "\n", _jsx(_components.div, {
      "data-rehype-pretty-code-fragment": "",
      children: _jsx(_components.pre, {
        className: "github-dark",
        style: {
          backgroundColor: "#24292e"
        },
        tabIndex: "0",
        "data-language": "",
        "data-theme": "default",
        children: _jsx(_components.code, {
          "data-language": "",
          "data-theme": "default",
          style: {
            display: "grid"
          },
          children: _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#e1e4e8"
              },
              children: "git pull upstream main --allow-unrelated-histories"
            })
          })
        })
      })
    }), "\n", _jsx(_components.p, {
      children: "And then, solve the conflicts you will likely encounter."
    }), "\n", _jsx(_components.p, {
      children: "🎉 That's it for version 0.4.0. Time to update your applications!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _missingMdxReference(id, component) {
  throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it.");
}


Changelog


I am excited to announce **Makerkit Turbo** - the next generation of our SaaS boilerplate 🔥

It's a tremendous upgrade over the previous version, with a focus on speed, simplicity, and power.

The initial transition to our new modular architecture will involve the Next.js Supabase kit. Following, we will be releasing the Turbo version of the Remix kit, and possibly a few others involving different stacks (Astro, SvelteKit, etc.).

## What's new?

Well, there's a lot! Here are some of the highlights:

1. **More powerful backend**: the database schema has been redesigned from the ground up to be more flexible and powerful.
2. **Better frontend**: the client now uses native ShadcnUI components, with no (or almost none) changes to the default theme.
3. **Better design and UX**: we've improved the design and user experience of the app, making it more intuitive and user-friendly.
4. **Modularity**: thanks to [Turborepo](https://turbo.build), the app is now more modular, with a cleaner and more organized codebase. Everything is now pluggable, while using sensible defaults: billing, CMS, monitoring, logging, mailer, etc. These share a unified interface, and can be replaced with your own implementation with minimal effort.
5. **Billing Providers**: you can now switch between Stripe, Paddle, and Lemon Squeezy as easily as flipping a switch. Implementing a new provider is also easier than ever.
6. **Multiple Line Items**: you can now create multiple line items for each subscription, allowing you to charge for additional features or services. You can use metered usage, flat subscriptions, one off subscriptions.
7. **Per-seat billing**: you can also choose to create per-seat billing, where you charge per user or team member. This is great for team collaboration apps.
8. **CMS**: you can now use your own favorite CMS. We ship with Wordpress (remote) and ContentLayer (local) by default, but you can easily replace them with your own implementation. We may extend this to other CMSs in the future.
9. **Optional Organizations**: you can now enable or disable organizations support with a single line of code. This allows you to organize your app around individual users or have them create team accounts to share with others.
10. **Improved performance**: we've optimized the app for speed and performance, making it faster and more responsive than ever.
11. **Edge Rendering**: we now support edge rendering out-of-the-box (eg. making optional the dependencies that required a Node.js runtime), which allows you to render pages on Vercel's edge network or Cloudflare Workers.
12. **Customer Mailers**: we now support customer mailers, which allows you to send transactional emails to your customers. By default we use Nodemailer, but you can switch to Cloudflare when using edge rendering.

As you can see - the focus is to avoid locking you in with a specific provider, and to make it easy to switch between them. This is a huge step forward, and I'm excited to see what you'll build with it.

### What does it look like?

Here's a sneak peek of the new design:

<Image src="/assets/images/turbo/landing-page.webp" width={3048} height={2018} />
<Image src="/assets/images/turbo/sign-in-page.webp" width={3018} height={2094} />
<Image src="/assets/images/turbo/sign-in-page.webp" width={3018} height={2094} />
<Image src="/assets/images/turbo/turbo-dashboard.webp" width={2978} height={1422} />
<Image src="/assets/images/turbo/account-switcher.webp" width={1462} height={686} />
<Image src="/assets/images/turbo/invite-members.webp" width={3000} height={1966} />
<Image src="/assets/images/turbo/turbo-members-page.webp" width={3014} height={1958} />
<Image src="/assets/images/turbo/turbo-billing.webp" width={2990} height={2030} />
<Image src="/assets/images/turbo/plan-card.webp" width={2738} height={1264} />

## Are the older versions still supported?

Yes - while feature-development will be focused on the new Turbo version, we will continue to provide bug fixes and general updates for the older versions.

## How to upgrade?

This is a whole new app, so upgrading from the previous version is not possible.

You can still use the old version, but I recommend starting fresh with the new one.

I will provide further guidance in the documentation on how to migrate your data from the old version to the new one.

## How to get it?

Anyone on a Pro/Teams plan can use it. Lite licensees can upgrade to Pro/Teams to get access to it. If you're not a licensee yet, you can purchase a license on our website.

## When will it be available?

Approximately by the end of April. We're still working on some final touches, but it's almost ready.

I hope you're as excited as I am about this new release. I can't wait to see what you'll build with it! If you have any questions or feedback, feel free to reach out to me.

## Will the AI templates be updated?

Yes, we will update the AI templates to reflect the new design and features. This will be done after the release of Makerkit Turbo.

## Will you migrate the Remix version to Turbo?

Yes, we will. The Remix version will be updated to Turbo after the Next.js version is released. We will also update the other stacks to Turbo in the future.

## Will you update the Next.js Firebase version to Turbo?

Unlikely at this point. We will focus on the Supabase version first, and then move on to the other stacks. The Firebase version is still available for purchase, but it will not be updated to Turbo.

## How can I give you feedback?

Please reach out to me on Discord. There is an active RFC where you can provide feedback and suggestions. You can also open an issue on GitHub and follow the development there.

Introducing Makerkit Turbo: faster, simpler and more powerful SaaS Boilerplate


I am super excited to announce the launch of **Makerkit's latest Premium SaaS template, the AI Blog Post Writer SaaS Template**.

The AI Blog Writer SaaS Template is part of our Premium AiSaasStarter alongside the Chat with PDF, AI Chatbot SaaS and the Kanban Template - and it's available to all Makerkit Teams license holders. [If you want to update your license, follow this link](/upgrade-license).

## What will you learn?

The template will teach you many of the concepts you need to know to build a SaaS product with Makerkit.

1. **AI**: Using the OpenAI SDK to generate text
2. **CRUD**: Using Supabase to store and manage your data and RLS to secure it
3. **Subscriptions Limits**: Using tokens quotas to limit the number of replies a chatbot can send

... and a lot more.

As you can see - **this is a value-packed template** that will teach you a lot about building SaaS products with Makerkit.

## What is the AI Blog Writer SaaS Template?

The AI Blog Writer SaaS Template is a SaaS template that allows you to write SEO optimized blog posts using AI. It does so using a 3-step process that involves:

1. **Research**: You enter a topic and the AI will research the topic for you, providing an outline
2. **Outline**: Once generated the outline, you can edit it to your liking. Then, you submit it to the AI and it will generate a set of talking points for you
3. **Talking Points**: Once generated, you can edit the talking points to your liking. Then, you submit it to the AI and it will generate a full blog post for you

The result is a very well-written, SEO optimized blog post that you can publish on your blog.

## Plan Limits

The SaaS template includes a set of plan limits that you can configure to your liking. The plan limits are:

1. Free account are offered 500k tokens
2. Plans are configurable to how many tokens they get
3. Tokens are deducted when a user generates an outline or talking points, and when they generate a blog post

## Show and Tell

I've recorded a quick video to show you what the template looks like and how it works. Check it out below:

<iframe className={'w-full'} height="600" src="https://www.youtube.com/embed/oiNvHlxkqjM?si=68hLMzGqcWRJrs0Z"
        title="YouTube video player" frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen />

## Conclusion

I hope you're as excited about this template as I am. I can't wait to see what you'll build with it.

If you're already a Makerkit Teams license holder and heave [redeemed your Premium invite](/premium-license) you can already access the repository. If you're not a Makerkit Teams license holder yet, [you can upgrade your license here](/upgrade-license).

If you have any questions, feel free to reach out to me on Twitter or Discord.

Happy making!


Announcing the AI Blog Writer SaaS Template


I am super excited to announce the launch of **Makerkit's latest Premium SaaS template, the AI Chat with PDF SaaS Template**.

The AI Chat with PDF SaaS Template is part of our Premium AiSaasStarter alongside the AI Chatbot SaaS and the Kanban Template - and it's available to all Makerkit Teams license holders. [If you want to update your license, follow this link](/upgrade-license).

## What will you learn?

The work on the Chatbot SaaS template is a solid foundation that will teach you many of the concepts you need to know to build a SaaS product with Makerkit.

1. **AI**: Using the [Vercel AI SDK](https://sdk.vercel.ai/docs) and [Langchain](https://js.langchain.com/docs/get_started/introduction) to build a Chatbot and using AI in your product
2. **Embeddings**: Using [Supabase](https://supabase.com) to store and index embeddings using pgVector
3. **Uploading PDFs**: Using Supabase Storage to upload PDFs and store them in your database
4. **CRUD**: Using Supabase to store and manage your data and RLS to secure it
5. **Subscriptions Limits**: Using tokens quotas to limit the number of replies a chatbot can send

... and a lot more.

As you can see - **this is a value-packed template** that will teach you a lot about building SaaS products with Makerkit.

## Features

The AI Chatbot SaaS Template comes with a lot of features out of the box. Here's a quick overview of what you get:

1. **AI Chatbot with Langchain**: A fully functional AI Chat that customers can create within their organizations to chat with their own documents and get answers to their questions
2. **PDF Indexing**: Customers upload PDFs to their organization and the chatbot will be able to search through them
3. **Plans**: Customize the number tokens available under each plan
4. **Billing**: Stripe integration to charge customers for their usage

... and all the other features you'd expect from a SaaS product, such as:

- **Authentication**: Sign up, sign in, forgot password, email verification, etc.
- **Organizations**: Customers can create organizations and invite other users to collaborate
- **Roles**: Different roles for different users within an organization
- **Settings**: Customers can customize their profile and organization settings
- **Billing**: Customers can update their billing information and view their invoices
- **Admin**: Admin dashboard to manage all users, organizations, and plans

... which comes for free as part of the Makerkit SaaS Boilerplate.

The template is currently available for the Next.js/Supabase Kit and the Remix/Supabase Kit.

## Show and Tell

I've recorded a quick video to show you what the template looks like and how it works. Check it out below:

<iframe className={'w-full'} height="600" src="https://www.youtube.com/embed/cGMegLX6HYE?si=JSihNRVJYNsE-ahs"
        title="YouTube video player" frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen />

## Conclusion

I hope you're as excited about this template as I am. I can't wait to see what you'll build with it.

If you're already a Makerkit Teams license holder and heave [redeemed your Premium invite](/premium-license) you can already access the repository. If you're not a Makerkit Teams license holder yet, [you can upgrade your license here](/upgrade-license).

If you have any questions, feel free to reach out to me on Twitter or Discord.

Happy making!


Announcing the AI Chat with PDF SaaS Template


I am super excited to announce the launch of **Makerkit's latest Premium SaaS template, the AI Chatbot SaaS Template**. This template is a great starting point for building a customer support chatbot SaaS product and includes all the features you need to get started.

The AI Chatbot SaaS Template is part of our Premium AiSaasStarter alongside the Kanban Template - and it's available to all Makerkit Teams license holders. [If you want to update your license, follow this link](/upgrade-license).

## What will you learn?

The work on the Chatbot SaaS template is a solid foundation that will teach you many of the concepts you need to know to build a SaaS product with Makerkit.

1. **AI**: Using the [Vercel AI SDK](https://sdk.vercel.ai/docs) and [Langchain](https://js.langchain.com/docs/get_started/introduction) to build a Chatbot and using AI in your product
2. **Embeddings**: Using [Supabase](https://supabase.com) to store and index embeddings using pgVector
3. **Background Jobs**: Using [Upstash's QStash](https://upstash.com) to run background jobs to crawl websites and index their content in a serverless environment
4. **Crawling**: Using Readability to extract the main content from a website and crawl it for indexing
5. **CRUD**: Using Supabase to store and manage your data and RLS to secure it
6. **Subscriptions Limits**: Using quotas to limit the number of users and messages a customer can have under their plan
7. **JS Widgets**: Developing standalone React Components that you can embed into your customer's website as a JS widget, just by using a script tag

... and a lot more.

As you can see - **this is a value-packed template** that will teach you a lot about building SaaS products with Makerkit.

## Features

The AI Chatbot SaaS Template comes with a lot of features out of the box. Here's a quick overview of what you get:
1. **AI Chatbot**: A fully functional AI Chatbot that customers can create within their organizations and have their customers embed on their website
2. **Indexing and Managing Content**: Customers can crawl websites and index their content using a background job
3. **Embeddable JS Widget**: A React Component that you can embed on your customer's website as a JS widget
4. **Plans**: Customize the number of users and messages/chatbots/documents a customer can have under their plan
5. **Billing**: Stripe integration to charge customers for their usage

... and all the other features you'd expect from a SaaS product, such as:

- **Authentication**: Sign up, sign in, forgot password, email verification, etc.
- **Organizations**: Customers can create organizations and invite other users to collaborate
- **Roles**: Different roles for different users within an organization
- **Settings**: Customers can customize their profile and organization settings
- **Billing**: Customers can update their billing information and view their invoices
- **Admin**: Admin dashboard to manage all users, organizations, and plans

... which comes for free as part of the Makerkit SaaS Boilerplate.

## Show and Tell

I've recorded a quick video to show you what the template looks like and how it works. Check it out below:

<iframe className={'w-full'} height="600" src="https://www.youtube.com/embed/VHbukM6GQ1c?si=md_nGxAgZPV94S0o"
        title="YouTube video player" frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen />

## Conclusion

I hope you're as excited about this template as I am. I can't wait to see what you'll build with it.

If you're already a Makerkit Teams license holder and heave [redeemed your Premium invite](/premium-license) you can already access the repository. If you're not a Makerkit Teams license holder yet, [you can upgrade your license here](/upgrade-license).

If you have any questions, feel free to reach out to me on Twitter or Discord.

Happy making!


Announcing the AI Chatbot SaaS Template


We are excited to announce that we are now offering Premium Codebase Access to all our users on the Teams Plan. This new initiative will allow you to start your SaaS from larger codebases from which you can pick useful patterns or even entire features to use in your own projects.

### 1) A fully functional Kanban SaaS application

The first Codebase we are releasing is a **fully functional Kanban SaaS application**. This demo will show many incredibly useful patterns that you can use in your own projects, such as:

1. **Data Models**: Complex data models beyond the basic CRUD operations.
2. **State Management**: Complex client-side state management with Zustand
3. **Filters**: Data Filtering with Supabase
4. **Drag and Drop** with React Beautiful DND
5. **Client-Server sync**: Server syncing with Next.js Actions and React Query
6. **Real-time Notifications** with Supabase Realtime

You can find a rundown of the features of this template at the bottom of this post.

### 2) A fully functional AI Chatbot SaaS application

The second Codebase we are releasing is a **fully functional AI Chatbot SaaS application**. This demo will show many incredibly useful patterns that you can use in your own projects, such as:

1. **AI Integration**: Utilize the power of the Vercel AI SDK and Langchain to seamlessly incorporate AI into your product.
2. **Embeddings with Supabase**: Leverage Supabase to store and index embeddings using pgVector.
3. **Background Jobs with Upstash's QStash**: Run background jobs efficiently, crawl websites, and index their content in a serverless environment.
4. **Crawling with Readability**: Extract main content from websites and crawl for indexing purposes.
5. **CRUD Operations with Supabase**: Efficiently store and manage data while ensuring security through RLS.
6. **Subscription Limits and Quotas**: Set limits on users, messages, and more based on different plans.
7. **JS Widgets Development**: Create standalone React Components as JS widgets that can be easily embedded into your customer's website using a simple script tag.

This **value-packed** template contains all the patterns you need to know to create your own SaaS.

[Take a detailed look at our AI Chatbot SaaS Template](/blog/changelog/ai-chatbot-template).

## FAQ

### How to access the AiSaasStarter?

If you are on the Teams Plan, [you can redeem the invite using this form](/premium-license).

### How to upgrade to the Teams Plan?

If you are on the Pro Plan, you can [upgrade to the Teams Plan using this link](/upgrade-license). The system will offer you a prorated discount based on your existing Pro Plan.

### Why only Teams Plan?

As a solopreneur, I have to make sure that I can sustainably support Makerkit. When I released Plugins - the plan was to make them paid. However, I decided to make them free, since they're an invaluable resource for the community.

However, this also meant that my support efforts went up significantly. I am now spending a lot of time helping people with their projects, and I am happy to do so. However, I also need to make sure that I can sustainably support Makerkit.

This is why I decided to make the AiSaasStarter available only to Teams Plan users. This will allow me to continue to support the community, while also making sure that I can sustainably support Makerkit.

### What's next?

We are working on more AiSaasStarter that we will release in the coming months. Stay tuned!

## A Look at the Kanban App

This app is a sort of Trello Clone that allows you to create Boards, Columns and Tasks. You can drag and drop cards between lists, and you can also drag and drop lists between boards.

The app is currently available on for Remix and Next.js with Supabase backend. Upon request, we can also make it available for other stacks.

### Drag and Drop

The app uses React Beautiful DND to implement drag and drop. The implementation is quite complex, since it allows you to drag and drop both cards and lists. It also allows you to drag and drop lists between boards.

All the data is synced to the server in real-time using Next.js Actions or React Query in Remix.

<Video src={'/assets/videos/drag-and-drop-kanban.mp4'} />

### Filtering

The Kanban Board is filtered by tag assigned to each task. You can filter the board by selecting a tag from the dropdown, and you can also filter by multiple tags.

<Video src={'/assets/videos/filtering-tags-kanban.mp4'} />

### Realtime Notifications

Users can assign tasks to other users. When a task is assigned to a user, they will receive a notification in real-time. The notification will also show the task that was assigned to them and allow them to open it directly.

<Video src={'/assets/videos/realtime-notifications-kanban.mp4'} />

### Plan Limits

The app also shows how you can implement plan limits. In this case, the app limits the number of boards that a user can create. When the user reaches the limit, they will be prompted to upgrade their plan.

On the free plan (or when no subscription is active), users can create up to 1 board and 5 tasks. The limits for other plans are configurable by setting them in the Database.

<Video src={'/assets/videos/plan-limits-kanban.mp4'} />

## Conclusion

I am super excited to release this new initiative and I hope that you will find it useful. If you have any questions, please reach out to us on [Twitter](https://twitter.com/makerkit_dev) or our Discord Server.







Announcing Premium Codebase Access


Hey there! 👋

Giancarlo here, back with another Makerkit update for you. This update included an overhaul of the Onboarding Flow. It's now cleaner, better looking, more functional and easier to extend!

Let's dive in!

### The "old" Onboarding Flow

The old onboarding flow had never been updated since the first release of the SaaS Starter Kit. It was a simple, one-page flow that asked for the organization's name. It was functional, but it was also very basic and didn't really give the user a good first impression of the product.

The new onboarding flow is a multi-step flow that asks for more information about the organization, such as the user members to invite. It's also more customizable and easier to extend - which is likely the case for most of you since your SaaS product will likely require more information than just the organization name.

### The new Onboarding Flow

The new onboarding flow:

1. **Stepper Component**: Introduced a new "Stepper" Component that reflects the current step of the onboarding flow. It is reusable, so you can use it in other parts of your app as well.
2. **Invite Members Step**: Adds a further step to the onboarding flow, where the user can invite other members to the organization.
3. **Complete Step**: Adds a final step, where the user is greeted with a success message and a button to go to the dashboard. This contrasts with the old onboarding flow, where the user was simply redirected to the dashboard after entering the organization name. This may have been confusing and unexpected for the user.

Let's see a quick demo of the new onboarding flow:

<Video src="/assets/images/posts/onboarding-flow-new.mp4" />

### Conclusion

That's it for this update! I hope you enjoy the new onboarding flow. If you have any questions, feel free to reach out to me on Twitter [@gc_psk](https://twitter.com/gc_psk) or on the Makerkit Discord.

Until next time! 👋

Announcing the new Onboarding Flow!


The new version 0.4.0 dropped some more cool stuff, such as:

- ✅ **Phone number** authentication 🚀
- ✅ Ability to **link a phone number** once signed up
- ✅ Ability to **update a phone number** from the profile page
- ✅ Authentication pages design overhaul
- ✅ Added **dynamic sign-in/up page** based on configuration
- ✅ Added oAuth providers logos

Let's take an in-depth look!

## Phone Number Authentication

We can easily add phone number authentication by tweaking the global
configuration:

```tsx
auth: {
  providers: {
    emailPassword: false,
    phoneNumber: true,
    emailLink: false,
    oAuth: [GoogleAuthProvider],
  },
},
```

And the result will be the below:

<Video src='/assets/images/posts/phone-number-auth.mp4' />

Once enabled, we will be able to tweak the configuration in multiple places,
such as the `Authentication` tab:

<Image alt='Auth providers linking'
       src='/assets/images/posts/auth-providers-linking.webp' width={'1167'} height={'994'} />

Additionally, the phone number can be added or removed from the user's
profile page:

<Video src='/assets/images/posts/add-remove-phone-number.mp4' />

## Dynamic Auth Configuration

By tweaking our global configuration, we can easily choose the
authentication providers we want to use. For example, by choosing the below,
we will enable `Email Link authentication`, `Google Auth` and `Facebook Auth`:

```tsx
auth: {
  providers: {
    emailPassword: false,
    phoneNumber: true,
    emailLink: true,
    oAuth: [GoogleAuthProvider, FacebookAuthProvider],
  },
},
```

<Image src={'/assets/images/posts/dynamic-auth-config-example.webp'}
       width={'2336'}
       height={'1980'}
       alt='Dynamic Auth configuration' />

### Updating your Makerkit codebase

To update your Makerkit codebase, run the following command:

```
git pull upstream main --allow-unrelated-histories
```

And then, solve the conflicts you will likely encounter.

🎉 That's it for version 0.4.0. Time to update your applications!


v0.4.0: Phone Authentication

The version 0.4.0 adds the ability to sign-in using a Phone number, and adds design and usability improvements to the authentication pages

Phone Number Authentication

Dynamic Auth Configuration

Updating your Makerkit codebase

👋 Hi! Would you like to learn how to build an AI SaaS with Next.js, Supabase and Stripe including a fully working SaaS template? Check out our new course!

Read more about Changelog