Set up your project

We’re going to connect Rough to your app, so your users can build Features using data they already work with. By the end, you’ll have a published Feature that can read that data, follow changes, and save updates through your app.

The React path assumes you’re using the Next.js App Router. We’ll sign tokens in a Route Handler, read the session in a Server Component, and keep the SDK inside a browser-only component.

Before we start

You’ll need an existing app with:

• A working login system and a stable ID for each user.
• A server that can read the signed-in session and keep a private key secret.
• Some data the user can already access, and a way to read it from browser code.
• An existing save operation and a way for your UI to observe changes. We’ll connect those in steps 5 and 6.

We won’t set up authentication, a database, or a new backend in this guide. Rough uses the systems you already have. If your app only reads data today, you can complete the first four steps before adding the live-data and write connections.

We use books to make the code examples concrete. You don’t need to create a books table, API, or demo app. As you go, use your own data model and functions in their place. Customers, orders, bookings, and support tickets would all work just as well.

Choose a small part of your app to start with: something a user could usefully view, organise, and update. We’ll keep working with that same data throughout all six steps.

Install the packages

The Feature SDK runs in the browser. Zod describes the data your Features can work with, and jose signs authentication tokens on your server.

npm install @roughapp/feature zod@4 jose

If your frontend and backend live in separate packages, install jose in the backend and the other two packages in the frontend. The SDK includes its styles; there’s no stylesheet to import.

The SDK is still pre-1.0, so minor releases can include breaking changes. Check the release notes before upgrading.

Create a Rough project

A Project keeps your app’s Surfaces and Features together. A Surface is a place in your app where Features can appear; we’ll define one in step 3.

1. Sign up at in.rough.app/signup.
2. Click New Project in the sidebar, enter a name, and click Create Project.
3. Copy the Project ID from the top of the project page.

Your users won’t need their own Rough login. Your app will tell Rough who they are using a signed token.

Create a signing key

Click your workspace name in the top-left corner, then Workspace Settings, Signing Keys, and Create signing key. Give the key a name and click Create.

Choose the Environment variables format and copy both lines. Rough only shows the private key once, so save it now, along with your Project ID:

ROUGH_PROJECT_ID="your-project-id"
ROUGH_SIGNING_KEY_ID="your-signing-key-id"
ROUGH_SIGNING_PRIVATE_KEY_PEM="-----BEGIN PRIVATE KEY-----\nMIIE...\n-----END PRIVATE KEY-----"

Read these through process.env in server-only code. Don’t give them a NEXT_PUBLIC_ prefix: Next.js includes those variables in the browser bundle.

The Project ID isn’t secret; we’ll pass it to the browser later. Keep the signing key configuration on the server, exclude your environment file from version control, and use your deployment’s secret settings in production.

Before you move on

Check that your server can read all three variables without printing the private key. You should also have chosen the data you want to expose. Next, we’ll connect your app’s login to Rough.