Boilerplates

Exported code is a folder of React components. These two starter repositories are somewhere to put it — one to run it as a website, one to publish it as an npm package.

• misaki-studio-website — run and host your design as a website.

• misaki-studio-npm — publish your components as a package other projects install.

Both are ordinary Next.js projects. Neither is required — if you already have an app, export straight into it. They exist so you do not have to assemble the config yourself the first time.

1. Run it as a website

Clone the website starter and install:

git clone https://github.com/Misaki-Studio/misaki-studio-website.git
cd misaki-studio-website
npm install

The repo has a src/ holding design-system/, pages/ and styles/. That is exactly the shape an export produces, so src/ is your export target.

In the editor, open the project's SETTINGS file, and under Export add a local-folder target pointing at that src/. Press Export, and your components, pages and design system land beside the ones already there.

Then:

npm run dev

It serves on port 8810 — http://localhost:8810.

Two of this starter's defaults matter before you build for production:

• It is configured as a static export (output: "export"). You get plain HTML, JS and CSS that any static host will serve — and no server-side rendering and no API routes. Your designs' API calls run in the browser, which is how the editor previews them anyway.

• It ignores TypeScript build errors (ignoreBuildErrors: true). That keeps a build from failing on a type error in generated code, but it also means a real mistake in your own code will not stop the build. Run tsc --noEmit yourself if you care.

An nginx.conf is included for serving the built output.

2. Publish it as an npm package

Clone the npm starter and install:

git clone https://github.com/Misaki-Studio/misaki-studio-npm.git
cd misaki-studio-npm
npm install

Export into its src/ the same way. The build scans src/ recursively and makes every file its own entry point, so each component becomes an importable subpath with its own .d.ts.

npm run build    # webpack → dist/
npm run upload   # npm publish

Then install it in the consuming app and import a component by its path:

import * as Mark from "@misaki-studio/<project-uuid>/components/atoms/mark";

<Mark.Component properties={{ title: "Ready" }} />;

The package name is @misaki-studio/<project-uuid> — the uuid is your project's, so it is stable across publishes. Bump version in package.json before each upload.

React, React DOM and Next are peer dependencies, so the package uses whatever versions your app already has rather than bundling a second copy.

Point it at your own registry first

The starter's .npmrc ships pointing at a local development registry:

@misaki-studio:registry=http://localhost:4400/api/packages/test/npm/

That is a development default with throwaway local credentials — not a registry you can publish to. Point it at your own registry, with your own credentials, before the first npm run upload, or the publish will not go anywhere useful.

3. Let an agent do it

An agent connected over MCP can set this up without you touching the editor's settings panel:

• add-export-target — point the project at the boilerplate's src/.

• get-export — read back the targets already configured.

• export-code-to-folder — run the real Export.

So "clone the website starter and export into it" is a single instruction to an agent. See MCP tools.

Known rough edges

Both starters are early. The rough edges are listed here rather than left for you to find:

• Neither repository has a README. This page is the documentation.

• Both pin an older runtime. They ask for misaki-studio-internal 0.1.52; newer versions exist. Bump it if you need a recent runtime fix.

• require() of a subpath does not resolve in a published package. The generated exports map points require at a .ejs.js file that the build never produces. import works. Until it is fixed, import rather than require, or point the paths at the built files yourself.

Where next

• Export your code — producing the code these repos host.

• Export output — what is actually in the files.

• MCP tools — driving the whole loop from an agent.