/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    span: "span",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "We are excited to announce the Makerkit UI Storybook. This is a collection of all the components that make up the Makerkit UI. You can use this to see how the components work and to get inspiration for your own projects."
    }), "\n", _jsxs(_components.h2, {
      id: "what-is-storybook",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#what-is-storybook",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "What is Storybook?"]
    }), "\n", _jsx(_components.p, {
      children: "Storybook is an open source tool for developing UI components in isolation, which can improve component reuse, testability, and development speed. It allows you to browse a component library, view the different states of each component, and interactively develop and test components."
    }), "\n", _jsxs(_components.h2, {
      id: "where-can-i-find-the-makerkit-ui-storybook",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#where-can-i-find-the-makerkit-ui-storybook",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Where can I find the Makerkit UI Storybook?"]
    }), "\n", _jsxs(_components.p, {
      children: ["You can find the Makerkit UI Storybook at ", _jsx(_components.a, {
        href: "https://ui.makerkit.dev",
        children: "https://ui.makerkit.dev"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "It still early days for the Makerkit UI, so I am\nworking hard on writing more documentation and examples so to help you use\nthe Makerkit components in your projects."
    }), "\n", _jsx(_components.p, {
      children: "If you have any suggestions for components you would like to see, please let us know in the Makerkit Discord."
    }), "\n", _jsxs(_components.h2, {
      id: "what-will-you-be-working-on-next",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#what-will-you-be-working-on-next",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "What will you be working on next?"]
    }), "\n", _jsx(_components.p, {
      children: "My goals for the Makerkit UI are to:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "providing a more consistent and accessible UI for all the kits"
      }), "\n", _jsx(_components.li, {
        children: "document all the components and how to use them in a better way, and I do\nthink the Storybook will greatly help with this"
      }), "\n", _jsx(_components.li, {
        children: "break more components into many smaller components, so that they can be\nused in more places and be more flexible"
      }), "\n", _jsx(_components.li, {
        children: "ultimately, adding more components to the Makerkit UI, so to be a\nstandalone UI kit"
      }), "\n"]
    }), "\n", _jsxs(_components.h2, {
      id: "conclusion",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#conclusion",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Conclusion"]
    }), "\n", _jsx(_components.p, {
      children: "I hope the Makerkit UI Storybook can be helpful in its current state already.\nIf you have any questions or suggestions, please let us know in the Makerkit Discord."
    }), "\n", _jsx(_components.p, {
      children: "Ciao!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Where can I find the Makerkit UI Storybook?

Changelog


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


I strive to keep the Makerkit SaaS Starter kits as simple as possible. At the same time, I want to make it easy for you to get started with your SaaS project.

At the same time, I want to make it easy for you to add new features to your SaaS project: **this is why I created the plugin system for Makerkit**.

The Makerkit plugins is an easy way for you to extend the functionality of Makerkit to suit your needs with our 1st-party plugins, without the burden of having a bulky codebase by only including the features you need.

Plugins are installable using the [Makerkit CLI](/blog/changelog/cli). You can install a plugin by running the following command:

```bash
npx @makerkit/cli plugins install
```

The CLI will detect your Makerkit project and ask you which plugin you want to install. You can then select the plugin you want to install from the list of available plugins.

It's all built on Git - no magic here. The CLI will pull in the plugin from the Makerkit repository and install it in your project. This allows you to:

1. **Own the code** - you can modify the plugin code as you wish.
2. **Update** the plugin to the latest version by running `npx @makerkit/cli plugins update`.

## How are plugins distributed?

Plugins are built in a fork of the Makerkit repository they're extending. You can then use `git subtree` to pull in the plugin into your project, which will pull only the files that are relevant to the plugin.

This is abstracted away by the CLI - you may not need to run complicated git commands to install or update a plugin.

## What plugins are available?

I am currently working on a few plugins that will be available soon. Two of them are:
- **Cookie Consent**: A cookie consent plugin that will allow you to add a cookie consent banner to your Makerkit project.
- **AI Chatbot**: An AI Chatbot plugin that will allow you to add a chatbot to your Makerkit project for automated customer support.

Do you have any ideas for plugins? Let me know by contacting me on Discord or by [email](mailto:info@makerkit.dev). I'd love to hear your ideas!

## When will plugins be available?

They will be available **soon** - but you can contact me if you want to **get early access** to the plugins today.

## I am a Makerkit customer - can I create my own plugins?

Yes! You can create your own plugins and distribute them to other Makerkit customers. You can also create private plugins that are only available to you.

Please contact me if you want to learn more about creating plugins for Makerkit.

## How will I know when plugins are available?

I will send you an email if you are a customer, otherwise you can subscribe to the newsletter to get notified when plugins are available.


Announcing Plugins for Makerkit


I am super excited to announce **a new documentation generator for the Supabase Kits**! 🎉

With this new feature, the Remix Supabase, Next.js Supabase and Next.js Supabase Lite kits are now feature complete, like the original kit based on Next.js and Firebase.

In addition, **the Remix kit also gets a new shiny blog generator**, which was already available for the Next.js kits.

<Image src="/assets/images/posts/docs-index.webp" alt="Documentation Index Page" width="2796" height="1668" />

## What is a documentation generator?

The documentation generator allows you to self-host your own documentation site for your Makerkit-based SaaS.

Instead of relying on a third-party service, you can write your documentation in Markdown and host it on your own domain - together with your SaaS.

While you may eventually outgrow the documentation generator (which is good!), Makerkit offers a complete solution for your SaaS from day one.

## How does it work?

The documentation (like the blog) is built using the amazing [Contentlayer](https://contentlayer.dev).

Contentlayer helps us greatly simplify the process of organizing Markdown files into a structured content model.

### Content Folder

Every kit now has a `content` folder, which contains the Markdown files for the documentation. The `content` folder is organized into sections, which are then rendered as pages on the documentation site.

Sections can be nested, so you can have a section with sub-sections. The sub-sections are then rendered as sub-pages.

### Initial Section page

Every section page can have an `index.mdx` file, which is the initial page for the section. This is useful if you want to have a landing page for the section, which then links to the sub-sections.

<Image src="/assets/images/posts/docs-section-page.webp" alt="Documentation Section Page" width="2818" height="1800" />

### Ordering

To organize the order of the sections, you shall prefix the folder name with a number, such as `01-getting-started`. The sections are then sorted alphabetically, so you can use numbers to control the order.

<Image src="/assets/images/posts/docs-ordering.webp" alt="Documentation Ordering" width="754" height="674" />

For example, the `content` folder for the Next.js Supabase kit looks like this:

```bash
- content
  - docs
    - 01-getting-started
      - index.mdx
      - 01-installation.mdx
      - 02-configuration.mdx
        - 01-supabase.mdx
        - 02-firebase.mdx
      - 03-authentication.mdx
      - 04-database.mdx
      - 05-storage.mdx
      - 06-usage.mdx
      - 07-deployment.mdx
        - 01-vercel.mdx
        - 02-netlify.mdx
      - 08-questions.mdx
    - 02-faq
      - index.mdx
      - 01-what-is-supabase.mdx
```

As you can see, we can use nested folders to organize the content. The `01-getting-started` folder is the first section, and it has an `index.mdx` file, which is the initial page for the section. The `02-configuration` folder is the second section, and it has a sub-section `01-supabase` and `02-firebase`.

### Frontmatter

Every Markdown file can have a frontmatter, which is a YAML block at the top of the file. The frontmatter is used to define the title of the page, and the description of the page.

For example, the `index.mdx` file for the `01-getting-started` section looks like this:

```mdx
---
title: "Getting Started with the Makerkit SaaS Starter Kits"
label: "Getting Started"
description: "Learn how to get started with the Makerkit SaaS Starter Kits"
---
```

The `title` is the title of the page, which is used for the `title` tag in the HTML code. The `label` is the label of the page, which is used in the sidebar navigation (where it's likely you will want a less SEO-focused label). The `description` is the description of the page, which is used in the meta tags.

## Conclusion

I hope you like this new feature! I am super excited about it, and I can't wait to see what you will build with it.

If you have any questions, please feel free to reach out to me on our Discord channel.

Bye! 👋

Announcing a new documentation generator for the Supabase Kits


One of the most requested features for Makerkit is an admin panel for managing users, organizations and generally a way to build management tools within the SaaS application.
Today, I am excited to announce the launch of the Makerkit Super Admin! 🎉

## Why do I need an admin panel, you ask?

As a SaaS founder, you'll be spending a lot of time in your admin panel. It's where you'll manage your users, subscriptions, and more. It's also where you'll be able to build custom tools for your SaaS application.

For example, you might want to build a tool that allows you to send a message to all your users. Or you might want to build a tool that allows you to manage your users' data.

The initial release of the Super Admin will offer you the following features:

1. A Dashboard with an overview of your SaaS application - including active users, organizations, subscriptions, and number of trials
2. A Users page where you can manage your users - including the ability ban, reactivate and impersonate users
3. An Organizations page where you can manage your organizations - including the ability to view its members and the subscription status

More features will be added in the future, including the ability to manage your subscriptions, plans, and more.

## Super Admin Features

### Dashboard

The Dashboard gives you an overview of your SaaS application. It includes the following information:

1. Number of subscribed users
2. Number of Organizations
3. Number of active subscriptions
4. Number of trials

<Image src="/assets/images/posts/admin-dashboard.webp" width={2868} height={818} alt={'Super Admin Dashboard'} />

Yes - it's still basic, but from here you can build upon it and add more information that is relevant to your SaaS application. For example, if your SaaS application is an AI Chatbot, you might want to add the number of conversations resolved by the chatbot. Or if your SaaS application is a CRM, you might want to add the number of leads generated, and so on.

Anything that helps you understand the health of your SaaS application can be added to the Dashboard - and you should likely do so!

### Users

The Users page allows you to manage your users. You can view all your users paginated and search for a specific user. You can also ban, reactivate and impersonate users.

<Image src="/assets/images/posts/admin-users-page.webp" width={2844} height={1938} alt={'Super Admin Users Page'} />

You can view the detail of a user by clicking on the user's ID, where you can see the user's email, name, organizations, and other information.

<Image src="/assets/images/posts/admin-user-detail.webp" width={2868} height={1960} alt={'Super Admin User Detail'} />

#### Disabling/Banning users

Admins can easily disable/ban some users from the users page or from the user's page:

<Image src="/assets/images/posts/admin-disable-user.webp" width={2862} height={1952} alt={'Super Admin Disable User'} />

#### Impersonating Users

An extremely useful feature for SaaS founders is the ability to impersonate users, usually for debugging ot helping users out.

<Image src="/assets/images/posts/admin-impersonate-user.webp" width={2862} height={1952} alt={'Super Admin Impersonate User'} />

### Organizations

The Organizations page allows you to manage your organizations. You can view all your organizations paginated and search for a specific organization. You can also view its members and the subscription status.

<Image src="/assets/images/posts/admin-organizations-page.webp" width={2868} height={1960} alt={'Super Admin Organizations Page'} />

#### View Members

The View Members page allows you to view all the members of an organization. You can also search for a specific member. From here, you can navigate to the detail of a member by clicking on the member's ID.

<Image src="/assets/images/posts/admin-organization-members-page.webp" width={2868} height={1960} alt={'Super Admin Organization Members Page'} />

## When will it be available?

The initial version will be out on Wednesday 16 August 2023. Further updates will come soon.

## Future Plans

The Super Admin is just the beginning. I have a lot of plans for the Super Admin, including the ability to manage your subscriptions, managing members, updating users and organizations, and more.

One of the things I am excited the most about is the ability to build plugins to better manage your SaaS. For example, a simple feedback tool that allows you to collect feedback from your users and manage it from the Super Admin. Or a CMS that allows you to manage your content from the Super Admin - and more.

Stay tuned for more updates!

Introducing the Makerkit Super Admin


As our tech stacks progress and new technologies emerge, we need to make sure that MakerKit is up to date with the latest and greatest. This means that we need to make some changes to the platform. We will be making these changes in Summer 2023.

From packages being updated to frameworks evolving, technology never sleeps - and neither do we.

## Design Updates

We will be updating the design of MakerKit to be more modern and sleek. To do so, we will [fully embrace Shadcn UI](https://ui.shadcn.com) - so that you can copy/paste components from the documentation into your MakerKit projects.

### Tailwind CSS

We will also update our colors convention in Tailwind CSS.

We will retire the `black` convention in favour of `dark`, which we will use for dark mode. This will allow us to have a more consistent naming convention. This also means we can better integrate with Shadcn UI.

This will also allow to build more themes for dark mode, which we will be doing in the future.

## Package Updates

Some of the packages into the kits will be replaced for better alternatives.

1. Headless UI will be fully removed in favour of Shadcn UI / Radix UI.
2. Additionally we will remove the `classnames` package in favour of the `clsx` package, which is smaller, faster and maintained.

I am still looking for a better alternative to using animations, since the `Transition` component from Headless UI was very useful, but has been broken for a while with no fix in sight. Pity.

## Framework Updates

### Next.js App Router

While the Supabase kits use the new Next.js App Router, the Firebase kit is still using the Pages router. My intention is to update the kit in a whole new kit.

With that said - I am still fighting with way too many bugs in the App Router - so I will wait until Next.js 14 is released to update the Firebase kit.

### The road to Remix 2

As Remix is venturing into version 2 - we will be updating MakerKit to use Remix 2. While we have already migrated some settings to Remix 2, we will be fully migrating to Remix 2 by enabling all the flags and settings.

The most striking difference is its file-system routing changing - which means that we will need to update the way that we handle routing in MakerKit and our folders structure. As you can imagine, this is a big change and not easily merged using Git.

Since the updates may be too hard to merge, I will be creating guides for updating to Remix 2.

## Conclusion

These updates will start to roll out in the next few days. I will be updating the kits one by one, starting with the Firebase kits.

I am excited to bring these changes to MakerKit. I hope that you are too.

If you have any questions, please reach out to us on [Twitter](https://twitter.com/makerkit_dev) or on Discord.

Upcoming changes to Makerkit in Summer 2023


We are excited to announce the Makerkit UI Storybook. This is a collection of all the components that make up the Makerkit UI. You can use this to see how the components work and to get inspiration for your own projects.

## What is Storybook?

Storybook is an open source tool for developing UI components in isolation, which can improve component reuse, testability, and development speed. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

## Where can I find the Makerkit UI Storybook?

You can find the Makerkit UI Storybook at [https://ui.makerkit.dev](https://ui.makerkit.dev).

It still early days for the Makerkit UI, so I am
working hard on writing more documentation and examples so to help you use
the Makerkit components in your projects.

If you have any suggestions for components you would like to see, please let us know in the Makerkit Discord.

## What will you be working on next?

My goals for the Makerkit UI are to:
- providing a more consistent and accessible UI for all the kits
- document all the components and how to use them in a better way, and I do
think the Storybook will greatly help with this
- break more components into many smaller components, so that they can be
used in more places and be more flexible
- ultimately, adding more components to the Makerkit UI, so to be a
standalone UI kit

## Conclusion

I hope the Makerkit UI Storybook can be helpful in its current state already.
If you have any questions or suggestions, please let us know in the Makerkit Discord.

Ciao!


Introducing the Makerkit UI Storybook

Announcing the Makerkit UI Storybook: a collection of all the components that make up the Makerkit kits. You can use this to see how the components work and to get inspiration for your own projects.

What is Storybook?

Where can I find the Makerkit UI Storybook?

What will you be working on next?

Conclusion

👋 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