> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/developers/docs/_mcp/server.

# UI extensions - Command line tools

> Managing extensions within Contentful's Command line tools | Create a new UI Extension | Local development | Uploading a UI Extension

> **Info**
>
> **Use the [App Framework](/extensibility/app-framework) for any new projects.** We recommend creating apps instead of UI extensions. [Read the app FAQ to learn why](https://www.contentful.com/help/contentful-app-framework-faq/).

> **Info**
>
> Use the [create-contentful-app](/extensibility/app-framework/create-contentful-app) cli to bootstrap and manage apps.

Extensions are built and managed within a Contentful space through the Content Management APIs `extension` endpoint. To make it more convenient, the [Create Contentful Extension CLI](https://github.com/contentful/create-contentful-extension) supports managing the extensions.

This article explains how to create and deploy a UI Extension from scratch using these Command line tools.

## Getting started

We recorded an eight minute video which gives an overview of the `create-contentful-extension` CLI.

## Create a new UI Extension

To get started, generate your first extension using `create-contentful-extension`:

```bash
npx @contentful/create-contentful-extension my-first-extension
```

It will ask you what type of extension you want to create:

* Field extension
* Sidebar extension
* Entry extension
* Page extension

Then it creates a directory called `my-first-extension` inside the current folder.

```
my-first-extension
├── node_modules
├── .babelrc
├── .gitignore
├── .contentfulrc.json
├── package.json
├── extension.json
└── src
    ├── index.html
    ├── index.js
    └── index.css
```

Once the installation is done, you can open your project folder and install all development dependencies:

```sh
cd my-first-extension && npm install
```

### Local development

To start development run the following commands in the newly created `my-first-extension` folder:

```
npm run login && npm run configure
```

It starts a new session with our CLI (Command Line Interface). As the Command line tool uses our Content Management API, you need to have a CMA access token to use all the commands.

Once you're successfully logged in, it asks what space and environment you want to use. Your answers (CMA token, space and environment ids) be will be saved to a local `.contentfulrc.json`.

When configuration part is finished you can actually start the development by typing the following command:

```
npm run start
```

It starts the development server and deploys the extension in development mode to the selected space.
The extension will automatically reload if you make changes to the code.

**Note:** As Contentful runs in an HTTPS environment, temporarily disable the security checks in the browser. For example, "Load unsafe scripts" in Chrome.

### Uploading a UI Extension to Contentful

When development is done, you need to install your extension to a space in production mode. To do so run the following command in your extension folder:

```
npm run deploy
```

It correctly bundles all extension dependencies in production mode and optimizes the build for the best performance, then it uploads build version of extension to a selected space.

### Configuring a field to use an extension

Refer the section [Assigning UI Extensions to a Field](/extensibility/ui-extensions/examples#assigning-ui-extensions-to-a-field) to assign the extension to the particular field where it needs to be used.

## Managing UI Extensions via `contentful-cli`

Refer to our [`contentful-cli`](/tools/cli) [documentation](/tutorials/cli/extension-management)

### Version Locking

Contentful [uses optimistic](/references/content-management-api/overview#updating-and-version-locking) locking to avoid accidental non-idempotent operations such as `update` or `delete`.

While using the `update` and `delete` subcommands, it is mandatory to specify the version of the extension using the `--version` option. Alternatively, the `--force` option can be used that instructs the CLI to use the latest version of the extension.

> **Info**
>
> Using `--force` option might lead to accidental overwrites if multiple users are working on the same.

### Programmatic Usage

To manage an extension programmatically, refer the [Content Management SDKs](/sdks/javascript/sdks).

## Next steps

* [Using Forma 36 in UI Extensions](/extensibility/ui-extensions/component-library/)