---
title: "slice-machine-ui - v1.0"
category: "api-references"
audience: developers
lastUpdated: "2025-11-06T01:07:50.000Z"
---

# Overview

`slice-machine-ui` is the core package for Prismic's local development tool, Slice Machine.

> <CalloutHeading>Upgrade to version 1.0</CalloutHeading>
>
> Are you on a version of `slice-machine-ui` below 1.0? [Follow our migration guide](https://prismic.io/docs/slice-machine-ui-1.0-migration-guide.md) to upgrade.

# Dependencies and requirements

`slice-machine-ui` v1.0 depends on an adapter to work with your framework. There are currently three officially-supported adapters:

* [`@slicemachine/adapter-next`](https://prismic.io/docs/technical-reference/slicemachine-adapter-next.md) for Next.js
* [`@slicemachine/adapter-nuxt`](https://prismic.io/docs/technical-reference/slicemachine-adapter-nuxt.md) for Nuxt
* [`@slicemachine/adapter-sveltekit`](https://prismic.io/docs/technical-reference/slicemachine-adapter-sveltekit.md) for SvelteKit
* [`@slicemachine/adapter-nuxt2`](https://prismic.io/docs/technical-reference/slicemachine-adapter-nuxt2.md) for Nuxt 2 (legacy)

# Installation

Slice Machine offers an `init` script to take care of most boilerplate and configuration.

## `init` script

In your project, run this command:

```bash
npx @slicemachine/init@latest
```

This command will do the following:

1. Create a new Prismic repository or let you specify an existing one.
2. Add a `slicemachine` script to `package.json`.
3. Create an `slicemachine.config.json` configuration file containing your API endpoint and the location of your slice library.
4. Detect your framework (Next.js).
5. Install dependencies: `@prismicio/client`, `@prismicio/slice-simulator-react`, `@prismicio/react`, `@prismicio/next`, and `slice-machine-ui`.
6. Create a `pages/slice-simulator.js|jsx|tsx` file.

## Manual install

To manually install Slice Machine, follow these steps:

1. Create a new Prismic repository from the [Prismic dashboard](https://prismic.io/dashboard).

2. In your project, add a `slicemachine` script to your `package.json`:

```diff filename=package.json
  {
    scripts: {
+     "slicemachine": "start-slicemachine"
    }
  }
```

3. Create a `slicemachine.config.json` file at the root of your project and paste in this information:

```json filename=slicemachine.config.json
{
  "repositoryName": "example-prismic-repo",
  "adapter": "@slicemachine/adapter-next",
  "libraries": ["./slices"]
}
```

4. Update the `repositoryName` property to your repository name and the `adapter` property with your framework's Slice Machine adapter.

# Usage

## Launch Slice Machine

`slice-machine-ui` locally runs a development tool called Slice Machine. Run this command to launch Slice Machine:

```bash
npm run slicemachine
```

This will launch Slice Machine on localhost and show the URL in your terminal. Open the URL in your browser.

## Configure `slicemachine.config.json`

The `slicemachine.config.json` file contains an object that contains the following properties:

<Table>
  <tbody>
    <tr>
      <TableCell>`repositoryName` Required</TableCell>

      <TableCell>
        The repository name for your repository (e.g. `"your-repo-name"`).
      </TableCell>
    </tr>

    <tr>
      <TableCell>`libraries` Required</TableCell>

      <TableCell>
        An array of directories where Slice Machine can find slices, relative to the project's root director. By default, this is `["./slices"]`.
      </TableCell>
    </tr>

    <tr>
      <TableCell>`adapter` Required</TableCell>

      <TableCell>
        The name of the npm package to use as an adapter for your framework (e.g. `"@slicemachine/adapter-next"`, `"@slicemachine/adapter-nuxt"`).
      </TableCell>
    </tr>

    <tr>
      <TableCell>`apiEndpoint`</TableCell>

      <TableCell>
        The endpoint for your repository. Slice Machine automatically uses the correct API endpoint for your repository by default, based on `repositoryName`. You can override the API endpoint using this property if you are working behind a network proxy that requires a custom URL. It should use the CDN (`.cdn`) and use V2 of the API (e.g. `"https://sam-230217-next-01.prismic.io/api/v2"`).
      </TableCell>
    </tr>
  </tbody>
</Table>