Getting Started
Launch Studio against your project-local fabric.integrations.ts.
Fabric Studio is a Next.js dev tool that runs on port 4317. It exposes eight tabs over the fabric instance you've configured.
Launch
# 1. Build the SDK once (or `--watch` in another terminal)
pnpm --filter @fabricorg/integrations build
# 2. Point Studio at your config (optional — falls back to a sample)
export FABRIC_CONFIG_PATH=$(pwd)/fabric.integrations.ts
# 3. Start the dev server
pnpm --filter @apps/studio dev
# 4. Open http://localhost:4317Config resolution order
If FABRIC_CONFIG_PATH isn't set, Studio looks for fabric.integrations.{ts,tsx,mjs,js} in:
process.cwd()process.cwd()/srcprocess.cwd()/libprocess.cwd()/fabric
If nothing matches, Studio falls back to a hardcoded sample fabric — same 15 plugins as the SDK catalog with demo credentials — so the UI is populated out of the box.
The sidebar footer always shows the current config source (External config <path> vs Sample config).
Optional environment
| Env var | Purpose |
|---|---|
FABRIC_CONFIG_PATH | Absolute path to your fabric.integrations.ts |
ANTHROPIC_API_KEY | Required for the Chat tab. Without it, the route returns 503 and the UI shows a configuration hint. |
STUDIO_OAUTH_STATE_SECRET | HMAC secret for OAuth state signing. Defaults to a dev value; set in prod-like environments. |
Live reload
Studio uses jiti to dynamically import your TypeScript config. A debounced fs.watch clears the singleton cache when the config file changes, so the next request rebuilds the fabric with your edits — no dev server restart needed.
Tabs
- Plugins — list + detail + credential CRUD + OAuth flow
- Operations — searchable, runnable endpoint browser
- Data — entity cache browser
- Approvals — cautious-mode permission request board
- Chat — Claude with four fabric tools
- Script — JS REPL with
fabricin scope - Permissions — read-only permission matrix
- Events — webhook event log