@multiplai_tech/prompt-forge

⌘⇧P + ⌥-click → turn any page into a structured Claude Code prompt.

Drop one provider into a React app. Teammates can open a modal with ⌘⇧P, pin the fields/actions/links they care about, describe the change in plain English, and send the result to Claude Code (via MCP), a feature tracker, or a bug tracker. Works out of the box on any app — the inference engine reads ARIA, labels, name, role, and semantic HTML.

Installing into another repo with Claude Code

Paste docs/install-prompt.md into the target repo's Claude Code session and tell it "follow this". That file is the full, self-contained install briefing — the agent has everything it needs to mount the provider, add the MCP endpoint, and update CLAUDE.md without further questions.

Install

npm install @multiplai_tech/prompt-forge
# or
pnpm add @multiplai_tech/prompt-forge

Peer deps: react@^18 || ^19, react-dom. Zero runtime deps.

Quickstart

import { PromptForgeProvider } from '@multiplai_tech/prompt-forge';
import '@multiplai_tech/prompt-forge/theme.css';

function App() {
  return (
    <PromptForgeProvider
      user={{ email: currentUser.email, name: currentUser.name }}
      githubRepo="multiplai-tech/ai-crm"
      mcpEndpoint="/api/claude-mcp"
      allowedMCPUsers={['[email protected]']}
      defaultMode="inferred"
    >
      <YourApp />
    </PromptForgeProvider>
  );
}

That's it — ⌘⇧P opens the modal, ⌥-click pins any element.

Full integration docs, including the MCP endpoint contract and the optional data-* conventions for tagged pages, live in /docs/integration-guide.md.

Public API

export { PromptForgeProvider } from '@multiplai_tech/prompt-forge';

// Power-user exports (tree-shakable — use only what you need)
export { PromptForge, InspectOverlay } from '@multiplai_tech/prompt-forge';
export { InspectStep, DescribeStep, PreviewStep, SubmitStep } from '@multiplai_tech/prompt-forge';
export { inferPins, inferPageSchema, inferPinFromElement } from '@multiplai_tech/prompt-forge';
export { buildPrompt, accessibleName, cssPath, slugify } from '@multiplai_tech/prompt-forge';
export { useVoice, useHotkey, useAltClick } from '@multiplai_tech/prompt-forge';

export type {
  Pin, PageSchema, PromptForgeProps, PromptPayload,
  PromptForgeTheme, Hotkey, InferenceMode,
} from '@multiplai_tech/prompt-forge';

PromptForgeProvider props

| Prop | Type | Default | Notes | |---|---|---|---| | user | { email, name, initials? } | — | Reporter identity baked into every prompt | | githubRepo | string | — | org/repo — used in the generated prompt's "likely files" section | | mcpEndpoint | string | — | POST target for "Send to Claude Code (MCP)" | | allowedMCPUsers | string[] | [] | Emails allowed to use the MCP direct-send target | | defaultMode | 'inferred' \| 'tagged' | 'inferred' | Zero-config by default; opt in to strict tagged mode | | hotkey | { modifier, shift, key } | ⌘⇧P / ^⇧P | Override the open-modal shortcut | | theme | Partial<PromptForgeTheme> | — | Override design tokens from JS (alternative to CSS) |

Theming

Tokens live in theme.css and are all --pf-* prefixed (so they cannot collide with host-app CSS). To restyle, import this file, then import your own CSS with overrides:

/* your-app/styles/prompt-forge-overrides.css */
:root {
  --pf-primary-600: #0ea5e9;
  --pf-font-body: 'InterVariable', system-ui, sans-serif;
}

Bundle size

Budget: < 40 KB min+gzip. Enforced in CI.

SSR

Safe to import from server-rendered React — every window / document access is guarded behind useEffect or a typeof window !== 'undefined' check.

License

MIT © Multiplai