/*@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",
    code: "code",
    h3: "h3",
    a: "a",
    span: "span",
    div: "div",
    pre: "pre"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "The React Team has finally released React 18 after a long and \"suspensful\" time."
    }), "\n", _jsx(_components.p, {
      children: "Developers have long awaited this feature-packed release, which takes Suspense and Concurrent Rendering out of beta, and are now stable for developers to use."
    }), "\n", _jsx(_components.p, {
      children: "Fortunately, the API has remained relatively stable, except for two main changes:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: ["the ", _jsx(_components.code, {
          children: "React.FC"
        }), " interface has changed, and the ", _jsx(_components.code, {
          children: "children"
        }), " property is no longer part of it; this means that we had to apply a different interface to most components"]
      }), "\n", _jsxs(_components.li, {
        children: ["the hook ", _jsx(_components.code, {
          children: "useEffect"
        }), " now runs twice to spot memory leaks"]
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Makerkit is now compatible with the changes above, and you can use it with React 18 for developing your next SaaS."
    }), "\n", _jsxs(_components.h3, {
      id: "introducing-reactfcc",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#introducing-reactfcc",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Introducing React.FCC"]
    }), "\n", _jsxs(_components.p, {
      children: ["As someone who quite liked the ", _jsx(_components.code, {
        children: "React.FC"
      }), " interface, I was slightly bummed by the decision to change it."]
    }), "\n", _jsxs(_components.p, {
      children: ["As a result, I introduced a new interface, which reflects the old ", _jsx(_components.code, {
        children: "React.FC"
      }), ":"]
    }), "\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: "#F97583"
              },
              children: "declare"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "module"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#9ECBFF"
              },
              children: "'react'"
            }), _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: "#F97583"
              },
              children: "type"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "FCC"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "Props"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "Record"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "string"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "unknown"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ">> "
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "React"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "."
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "FC"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "React"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "."
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "PropsWithChildren"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "<"
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "Props"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ">>;"
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "}"
            })
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: " "
          }), "\n", _jsxs(_components.span, {
            "data-line": "",
            children: [_jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "const"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "MyComponentWithChildren"
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "React"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "."
            }), _jsx(_components.span, {
              style: {
                color: "#B392F0"
              },
              children: "FCC"
            }), _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: "#FFAB70"
              },
              children: "body"
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: ":"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " "
            }), _jsx(_components.span, {
              style: {
                color: "#79B8FF"
              },
              children: "string"
            }), _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: "#F97583"
              },
              children: "="
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " ({ "
            }), _jsx(_components.span, {
              style: {
                color: "#FFAB70"
              },
              children: "body"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: ", "
            }), _jsx(_components.span, {
              style: {
                color: "#FFAB70"
              },
              children: "children"
            }), _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: " }) "
            }), _jsx(_components.span, {
              style: {
                color: "#F97583"
              },
              children: "=>"
            }), _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: "#6A737D"
              },
              children: "//..."
            })]
          }), "\n", _jsx(_components.span, {
            "data-line": "",
            children: _jsx(_components.span, {
              style: {
                color: "#E1E4E8"
              },
              children: "};"
            })
          })]
        })
      })
    }), "\n", _jsx(_components.p, {
      children: "It can be read as React Functional Component with Children."
    }), "\n", _jsxs(_components.h3, {
      id: "what-about-suspense",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#what-about-suspense",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "What about Suspense?"]
    }), "\n", _jsx(_components.p, {
      children: "While Suspense is now stable, Makerkit hasn't yet adopted it, but it's very\nhigh on our list before our final version is out."
    }), "\n", _jsxs(_components.h3, {
      id: "packages-update",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#packages-update",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Packages Update"]
    }), "\n", _jsx(_components.p, {
      children: "Nearly all the packages got a version bump:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Pino was updated to the recently released version 8"
      }), "\n", _jsx(_components.li, {
        children: "Stripe as update to version 9.6.0"
      }), "\n", _jsx(_components.li, {
        children: "Cypress was updated to version 10"
      }), "\n", _jsx(_components.li, {
        children: "Many, many minor bumps to all the packages"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "We're working hard towards a stable release. Stay tuned :)"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Changelog


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 Codebases 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 Codebases?

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 Codebases 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 Codebases 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!


Hey there! 👋

Giancarlo here, back with another Makerkit update!

I'm really excited about these new features and can't wait for you to check them out.

## 1. Organizations and User Teardown flows

The latest feature introduced in the kit is the ability to delete organizations and users.

1. **Account deletion**: Users can now delete your account and associated organizations. Just remember, deleting an organization will cancel all ongoing subscriptions. If you're linked to 3rd party integrations, you'll need to consider how you handle those accounts.
2. **Deleting an Organization**: Owners can now delete organizations. This will cancel all ongoing subscriptions and delete all associated memberships. If you're linked to 3rd party integrations, you'll need to consider how you handle those accounts.
3. **Leaving an Organization**: We've also added a feature where organization members can now leave organizations on their own.
4. **Next: Super Admin capabilities**: And finally, Super Admins can now delete a user, cancel subscriptions or delete organizations. **This feature will land in the next release**.

<Video src="/assets/images/posts/teardown-update.mp4" />

### Account Deletion

Users will be able to delete their account from their profile settings. This will delete all associated organizations and cancel any ongoing subscriptions.

### Deleting an Organization

Owners can now delete an organization from their organization settings. This will cancel all ongoing subscriptions and delete all associated memberships. If you're linked to 3rd party integrations (for example), you'll need to consider how you handle those accounts.

### Leaving an Organization

Users can now leave an organization from their organization settings. This will remove them from the organization. Owners cannot leave an organization, and will need to delete the organization instead.

### Enabling the features

These features are being released with **feature flags that you can enable using environment variables**.

This is how I'm planning to roll out new features in the future - behind a flag initially, then making it the default based on your feedback. It gives me a chance to iron out any kinks post-release.

## 2. AI Editor Plugin - an experimental WYSIWYG editor powered by OpenAI and Lexical

Next on the list is something I'm particularly excited about.

I'm introducing an AI Plugin, a tool that adds a WYSIWYG (What You See Is What You Get) editor powered by OpenAI and Lexical, and inspired by Notion's UI.

You can embed this plugin anywhere in your SaaS, and let your users write content using AI and an amazing text editor. For example, if your product allows users to enter rich content (such as blog posts), you can use this plugin.

**This plugin is experimental**, so please bear with me as I iron out any kinks. I'm also working on a tutorial to help you get started with this plugin.

<Video src="/assets/ai-editor-video-low.mp4" />

## 3. Stripe Embedded Checkout

Finally, we've integrated Stripe Embedded Checkout, because we know how important seamless transactions are to our users. This will provide a smooth, streamlined checkout process, making it even easier for your users to make payments in your SaaS.

**The Stripe Checkout is embedded by default**, but you can choose to revert back to the hosted checkout using the configuration file.

<Video src="/assets/images/posts/stripe-embedded-checkout-low.mp4" />

## Conclusion

That's it for this update!

I hope you're as excited about these new features as I am. I'm looking forward to hearing your feedback and suggestions.

As usual, you can update your kit by running `git pull upstream main` from the root directory of your project. Please do not hesitate to reach out to me if you have any questions or feedback.

To the next update! 🚀



November 2023 Update: AI Editor Plugin, Data Teardown, Stripe Embedded Checkout


Yesterday, I announced the release of [Plugins](/blog/changelog/plugins) for the Makerkit SaaS Starter kits.

Today, I am excited to announce the release of the AI Chatbot plugin for the Makerkit SaaS Starter kits. This plugin allows you to add an AI Chatbot to your SaaS Starter kit in minutes! 🎉

At the time of writing, **the AI Chatbot plugin is available for the Next.js and Remix Supabase kits**.

The plugin will be available for the Firebase kits in the coming months due to the need of storing the vector embeddings in a separate database, which requires more work.

## What is the AI Chatbot plugin?

The AI Chatbot plugin is a plugin for the Makerkit SaaS Starter kits that can easily index your content and provide a customer support chatbot for your SaaS project. The content is indexed as vector embeddings using OpenAI, which means that the chatbot can understand the context of the question and provide the best answer.

<Image src="/assets/images/posts/chatbot-dark.webp" width={2950} height={1996} />

## How does it work?

You can install the plugin using the [Makerkit CLI](https://github.com/makerkit/cli), which at the time of writing is in alpha and being quietly tested by a few users.

Once you have installed the plugin, you can run the following command to index your content:

```bash
npx tsx plugins/chatbot/cli generate
```

The CLI will prompt you to choose what to index. At the time of writing you have two choices:

1. Index your `src/content/docs` folder where you can store your documentation.
2. Index your `plugins/chatbox/questions` folder where you can store pre-defined questions and answers for your chatbot.

After indexing your content, you can import the `Chatbot` component from the plugin and add it to your page.

```tsx
import dynamic from 'next/dynamic';

const ChatBot = dynamic(() => import('~/plugins/chatbot/components/ChatBot'));

function Layout({children}: PropsWithChildren) {
  return (
    <>
      <ChatBot />

      {children}
    </>
  );
}
```

Add it to the layout you want to show the chatbot on and you are done! 🎉

For example, to add the Chatbot to the `(site)`layout, you will place it within the `(site)/layout.tsx` file.

## When will it be available?

The AI Chatbot is now available for testing for the Next.js Supabase kits. The plugin will be available for the other kits in the coming months.

## Demo

Check out the demo of the AI Chatbot plugin in action below:

<Video src="/assets/images/posts/chatbot-demo.mp4" />

As you can see, when the chatbot is not confident about the answer, it will ask the user to contact support. This is a great way to ensure that your users are getting the best support possible.

Announcing the AI Chatbot plugin for the Makerkit SaaS Starter kits


Super excited to announce the **release of the Makerkit CLI**, a command-line tool that helps you build and manage your Makerkit projects 🚀

The CLI is a set of commands that help you manage your Makerkit SaaS Starter Kits. It can help you with:

1. **Starting a new Project**: Generating any of the SaaS Starter Kits in one simple command
2. **Plugins**: Installing and updating the plugins available for your SaaS Starter Kit
3. **Translations**: Managing your i18n files - translate them, verify them, and more
4. **Content Generation**: Generating blog posts using the OpenAI API

... with more features coming soon, including **dynamic code generation**.

## Installation

Your can run commands using `npx`:

```
npx @makerkit/cli@latest <command>
```

Simply replace the examples below with `npx @makerkit/cli@latest` instead of
`makerkit` to run the commands without installing the CLI globally.

This allows you to always run the latest version of the CLI without having to update it.

## Usage

Running the CLI without any arguments will display the help:

```
Usage: makerkit [options] [command]

Your SaaS Kit companion. Add plugins, manage migrations, and more.

Options:
  display the version number  output the version number
  -h, --help                  display help for command

Commands:
  new                         Initialize a new Makerkit project
  plugins                     List and install plugins.
  i18n                        Manage and translate your i18n files
  license                     Manage Licenses
  blog                        Manage and generate your blog posts
  help [command]              display help for command
```

### Adding an OpenAI Key (optional)

To use the generative AI features of the CLI, you will need to add an OpenAI
key.

To do so, create a `.env.local` file if it does not exist yet, and add the
following environment variable:

```
OPENAI_API_KEY=<your-key>
```

This key will be used to generate the prompts for your blog posts. It
remains locally on your computer and is not shared with anyone.

At the moment of writing, the CLI only uses the OpenAI API to generate:
1. Translations for your i18n files
2. Blog Posts

## Creating a new Makerkit project

To create a new Makerkit project, you can use the `new` command:

```
> npx @makerkit/cli@latest new
```

The CLI will prompt you to select a starter kit to use and a name. Once
selected, the CLI will create a new project in the current directory by
pulling the starter kit from GitHub.

The command will also install the dependencies.

## Plugins

The CLI can help you manage plugins in your project. You can list the available plugins, install them, and update them.

### Listing plugins

To list the available plugins, you can use the `plugins list` command:

```
> npx @makerkit/cli@latest plugins list

Available plugins:
  - cookie-banner
```

### Installing plugins

To install a plugin, you can use the `plugins install` command:

```
> npx @makerkit/cli@latest plugins install
```

This command will prompt you to select a plugin to install. Once selected, the plugin will be installed in your project.

### Updating plugins

To update a plugin, you can use the `plugins update` command:

```
> npx @makerkit/cli@latest plugins update
```

This command will prompt you to select a plugin to update. Once selected, the plugin will be updated in your project.

## i18n

The CLI can help you manage your i18n files. You can translate from a locale
to another (requires an OpenAI key), and verify that your translations are
in sync between each other.

### Translating

To translate your i18n files, you can use the `i18n translate` command:

```
> npx @makerkit/cli@latest i18n translate en es
```

This command will translate all the keys in your `en/*.json` file to `es/*.
json`. It will use the OpenAI API to translate the keys. You will need to
add a valid OpenAI API key in the `.env.local` file of your Makerkit repository.

### Verifying

To verify that your i18n files are in sync, you can use the `i18n verify` command:

```
> npx @makerkit/cli@latest i18n verify <base-locale>
```

If you omit the `base-locale` argument, the command will use `en` as the base.

## Blog

The CLI can help you generate your blog posts.

NB: this command requires you to setup an OpenAI key.

### Generating a new blog post

To generate a new blog post, you can use the `blog generate` command:

```
> npx @makerkit/cli@latest blog generate
```

You will be prompted to enter the following information:
1. **Title**: The title of the blog post
2. **Category**: The category of the blog post. At this time, this file
needs to exist in
your Makerkit repository. You can create it later.
3. **Word Count**: The target word count of the blog post.
4. **Prompt**: Any additional information you want to add to the prompt
(optional).


Announcing the Makerkit CLI


The React Team has finally released React 18 after a long and "suspensful" time.

Developers have long awaited this feature-packed release, which takes Suspense and Concurrent Rendering out of beta, and are now stable for developers to use.

Fortunately, the API has remained relatively stable, except for two main changes:

- the `React.FC` interface has changed, and the `children` property is no longer part of it; this means that we had to apply a different interface to most components
- the hook `useEffect` now runs twice to spot memory leaks

Makerkit is now compatible with the changes above, and you can use it with React 18 for developing your next SaaS.

### Introducing React.FCC

As someone who quite liked the `React.FC` interface, I was slightly bummed by the decision to change it.

As a result, I introduced a new interface, which reflects the old `React.FC`:

```tsx
declare module 'react' {
  type FCC<Props = Record<string, unknown>> = React.FC<React.PropsWithChildren<Props>>;
}

const MyComponentWithChildren: React.FCC<{
    body: string;
}> = ({ body, children }) => {
    //...
};
```

It can be read as React Functional Component with Children.

### What about Suspense?

While Suspense is now stable, Makerkit hasn't yet adopted it, but it's very
high on our list before our final version is out.

### Packages Update

Nearly all the packages got a version bump:
 - Pino was updated to the recently released version 8
 - Stripe as update to version 9.6.0
 - Cypress was updated to version 10
 - Many, many minor bumps to all the packages

We're working hard towards a stable release. Stay tuned :)


Makerkit upgraded to React 18

React 18 has been released, and with it many exciting features.

Introducing React.FCC

What about Suspense?

Packages Update

👋 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