mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
Update CLI to use unified setup prompt
This commit is contained in:
Konstantin Wohlwend
parent
018ecd1107
commit
7dd764324a
@ -5,6 +5,9 @@ This file contains knowledge learned while working on the codebase in Q&A format
|
||||
## Q: What are the local development ports for the MCP and Skills apps?
|
||||
A: The MCP app runs on port suffix `44` from `apps/mcp/package.json`, so with `NEXT_PUBLIC_HEXCLAVE_PORT_PREFIX=91` it is at `http://localhost:9144/mcp`. The Skills app runs on suffix `45` from `apps/skills/package.json`, so with the same prefix it is at `http://localhost:9145`. The dev launchpad app list in `apps/dev-launchpad/public/index.html` should use these suffixes.
|
||||
|
||||
## Q: Where does the Stack CLI init agent prompt come from?
|
||||
A: `packages/stack-cli/src/lib/init-prompt.ts` re-exports `createInitPrompt` from `packages/stack-shared/src/helpers/init-prompt.ts`. The CLI calls it from `packages/stack-cli/src/commands/init.ts` after project creation/linking, then sends the result to Claude. The shared helper embeds `aiSetupPrompt` from `packages/stack-shared/src/ai/unified-prompts/skill-site-prompt-parts/ai-setup-prompt.ts`, with CLI-specific context that project/env setup has already happened. The CLI wrapper tells the agent to apply only relevant setup sections so optional Convex/Supabase/CLI-app sections are not forced onto every project.
|
||||
|
||||
## Q: How are connected-account OAuth tokens stored and refreshed?
|
||||
A: Connected accounts live in `ProjectUserOAuthAccount`. Stored refresh tokens are in `OAuthToken` (`oauthAccountId`, `scopes`, `isValid`), and cached access tokens are in `OAuthAccessToken` (`expiresAt`, `scopes`, `isValid`). A null `OAuthAccessToken.expiresAt` means the OAuth provider did not supply an access-token expiry; `retrieveOrRefreshAccessToken` treats null-expiry tokens as candidates and still calls the provider-specific validity check before returning them. If no usable access token exists, it looks for valid refresh tokens with matching scopes and invalidates only those that the provider explicitly rejects.
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -149,7 +149,7 @@ async function runInit(program: Command, opts: InitOptions) {
|
||||
console.log("This also registers the Stack Auth MCP server (https://mcp.stack-auth.com)");
|
||||
console.log("so your agent can read the docs and answer Stack-specific questions going forward.\n");
|
||||
const success = await runClaudeAgent({
|
||||
prompt: `Execute ALL of the following setup steps in my project now. Do not ask questions — just detect the framework and package manager from existing files and proceed.\n\n${initPrompt}`,
|
||||
prompt: `Set up Stack Auth in my project now. Do not ask questions — detect the framework and package manager from existing files, apply the relevant sections of the setup guide, and skip sections for integrations this project does not use.\n\n${initPrompt}`,
|
||||
cwd: outputDir,
|
||||
});
|
||||
if (!success) {
|
||||
|
||||
@ -334,7 +334,37 @@ export const cliSetupPrompt = deindent`
|
||||
`;
|
||||
|
||||
export const aiAgentConfigPreparationPrompt = deindent`
|
||||
${/* TODO */""}
|
||||
## AI Agent Configuration
|
||||
|
||||
Register the Stack Auth MCP server for the current coding agent, then update the project's agent instructions so future agents know how to fetch the Hexclave skill when they need deeper context.
|
||||
|
||||
### Install the MCP server
|
||||
|
||||
If the Hexclave MCP is already available, you can skip this step.
|
||||
|
||||
Pick the install scope using this rule: if the project root already contains an agent folder or project-scoped MCP config file (for example \`.claude/\`, \`.claude.json\`, \`.agents/\`, \`.cursor/\`, \`.cursor/mcp.json\`, \`.codex/\`, \`.codex/config.toml\`, \`.opencode/\`, \`.windsurf/\`, \`.roo/\`, \`.kilocode/\`, \`.augment/\`, \`.continue/\`, \`.crush/\`, or \`.vscode/mcp.json\`), install **per project**. Regardless of whether you've installed locally, you should ALSO install **globally** (see below).
|
||||
|
||||
Register an HTTP MCP server named \`stack-auth\` with URL \`https://mcp.stack-auth.com/mcp\`.
|
||||
|
||||
Common per-agent setup:
|
||||
|
||||
- Claude Code: run \`claude mcp add --transport http stack-auth https://mcp.stack-auth.com/mcp\`, or edit \`~/.claude.json\`.
|
||||
- VS Code: run \`code --add-mcp '{"type":"http","name":"stack-auth","url":"https://mcp.stack-auth.com/mcp"}'\`.
|
||||
- Cursor: edit \`~/.cursor/mcp.json\`, or project-scoped \`.cursor/mcp.json\`.
|
||||
- Codex CLI: edit \`~/.codex/config.toml\`.
|
||||
- opencode: edit \`~/.config/opencode/opencode.json\`.
|
||||
|
||||
For any other agent, register the same HTTP MCP server using its standard MCP config file.
|
||||
|
||||
After installation, use the \`ask_stack_auth\` MCP tool for Stack Auth questions when available. If the MCP server is not available, fetch the latest docs from \`https://docs.stack-auth.com\`.
|
||||
|
||||
### Update AGENTS.md
|
||||
|
||||
Add the following note to the project's \`AGENTS.md\` file. Create the file if it does not exist, and preserve any existing project instructions already in the file:
|
||||
|
||||
\`\`\`md
|
||||
This project uses Hexclave to manage users, payments, emails, analytics, and more. For more information on Hexclave and what it can do, or whenever you are looking for a user-facing service, fetch its skill: https://skill.hexclave.com
|
||||
\`\`\`
|
||||
`;
|
||||
|
||||
export const prodReadyPrompt = deindent`
|
||||
|
||||
@ -1,166 +1,39 @@
|
||||
// TODO: Use configPath in the prompt once local emulator is set up:
|
||||
// Add "npx @stackframe/stack-cli emulator run --config-file ${configPath}" to project dev command
|
||||
import { aiSetupPrompt } from "../ai/unified-prompts/skill-site-prompt-parts/ai-setup-prompt";
|
||||
|
||||
function getCliProjectSetupContext(configPath?: string): string {
|
||||
if (configPath != null) {
|
||||
return `
|
||||
The Stack Auth CLI already created or linked this project to a local Stack Auth development environment config file:
|
||||
|
||||
\`\`\`text
|
||||
${configPath}
|
||||
\`\`\`
|
||||
|
||||
Do not create or link another Stack Auth project. When the SDK setup instructions mention creating \`stack.config.ts\` or wrapping the dev script with \`stack dev --config-file\`, use the config file path above.
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
The Stack Auth CLI already created or linked this project to a hosted Stack Auth cloud project and wrote or printed the Stack Auth environment variables.
|
||||
|
||||
Do not create or link another Stack Auth project. Use the existing environment variables in this workspace. If the variables were printed instead of written because the user declined to append them to an env file, tell the user exactly which variables still need to be added.
|
||||
`;
|
||||
}
|
||||
|
||||
export const createInitPrompt = (web: boolean, configPath?: string) => `=============================
|
||||
STACK AUTH SETUP INSTRUCTIONS
|
||||
=============================
|
||||
|
||||
These instructions describe how to set up Stack Auth.
|
||||
${web ? `
|
||||
First of all, if you have access to a terminal, it is better to use the \`npx @stackframe/stack-cli init\`` : ""}
|
||||
First of all, if you have access to a terminal, it is better to use \`npx @stackframe/stack-cli init\`.
|
||||
` : ""}
|
||||
|
||||
Install both the Stack Auth skill and the Stack Auth MCP server for the current coding agent. Pick the install scope using this rule: if the project root already contains an agent folder or project-scoped MCP/agent config file (e.g. \`.claude/\`, \`.claude.json\`, \`.agents/\`, \`.cursor/\`, \`.cursor/mcp.json\`, \`.codex/\`, \`.codex/config.toml\`, \`.opencode/\`, \`.windsurf/\`, \`.roo/\`, \`.kilocode/\`, \`.augment/\`, \`.continue/\`, \`.crush/\`, \`.vscode/mcp.json\`), install **per project**; otherwise install **globally** for the detected agent.
|
||||
${getCliProjectSetupContext(configPath)}
|
||||
|
||||
### Install the skill
|
||||
Use the full setup guide below as the source of truth, with one important CLI-specific adjustment: the "Setting up the project" step is already complete. Use that section only to understand how the existing config/env files should connect to the SDK wiring; do not ask the user for project IDs or keys that the CLI already generated or linked.
|
||||
|
||||
Preferred (one shot — detects the agent and writes to the right place):
|
||||
|
||||
\`\`\`sh
|
||||
npx -y skills add stack-auth/stack-auth --skill stack-auth
|
||||
\`\`\`
|
||||
|
||||
If that command isn't available, fall back to a manual install. Download the canonical skill from \`https://skill.stack-auth.com\` (\`WebFetch\` or \`curl -sSL\`) and write it verbatim to \`<skills-dir>/stack-auth/SKILL.md\`. Do not modify the contents. Create missing parent directories. \`<skills-dir>\` per agent (mirrors \`vercel-labs/skills\`):
|
||||
|
||||
| Agent | Project \`<skills-dir>\` | Global \`<skills-dir>\` |
|
||||
| --- | --- | --- |
|
||||
| Claude Code | \`.claude/skills\` | \`~/.claude/skills\` (or \`$CLAUDE_CONFIG_DIR/skills\`) |
|
||||
| Codex | \`.agents/skills\` | \`~/.codex/skills\` (or \`$CODEX_HOME/skills\`) |
|
||||
| Cursor | \`.agents/skills\` | \`~/.cursor/skills\` |
|
||||
| opencode | \`.agents/skills\` | \`~/.config/opencode/skills\` |
|
||||
| Windsurf | \`.windsurf/skills\` | \`~/.codeium/windsurf/skills\` |
|
||||
| Amp | \`.agents/skills\` | \`~/.config/agents/skills\` |
|
||||
| Antigravity | \`.agents/skills\` | \`~/.gemini/antigravity/skills\` |
|
||||
| Cline | \`.agents/skills\` | \`~/.agents/skills\` |
|
||||
| Roo Code | \`.roo/skills\` | \`~/.roo/skills\` |
|
||||
| Kilo Code | \`.kilocode/skills\` | \`~/.kilocode/skills\` |
|
||||
| Augment | \`.augment/skills\` | \`~/.augment/skills\` |
|
||||
| Continue | \`.continue/skills\` | \`~/.continue/skills\` |
|
||||
| Crush | \`.crush/skills\` | \`~/.config/crush/skills\` |
|
||||
|
||||
For agents not listed, follow their documented skills directory or fall back to \`.agents/skills\` (project) / \`~/.<agent>/skills\` (global).
|
||||
|
||||
### Install the MCP server
|
||||
|
||||
Server URL: \`https://mcp.stack-auth.com/mcp\` (HTTP transport). Common per-agent config locations:
|
||||
- Claude Code: run \`claude mcp add --transport http stack-auth https://mcp.stack-auth.com/mcp\` (or edit \`~/.claude.json\`)
|
||||
- VS Code: run \`code --add-mcp '{"type":"http","name":"stack-auth","url":"https://mcp.stack-auth.com/mcp"}'\`
|
||||
- Cursor: \`~/.cursor/mcp.json\` (project-scoped: \`.cursor/mcp.json\`)
|
||||
- Codex CLI: \`~/.codex/config.toml\`
|
||||
- opencode: \`~/.config/opencode/opencode.json\`
|
||||
|
||||
For any other agent, register an HTTP MCP server named \`stack-auth\` pointing at \`https://mcp.stack-auth.com/mcp\` using its standard MCP config file.
|
||||
|
||||
For reference, questions, or information on Stack Auth, fetch the docs on https://docs.stack-auth.com via curl or any tools available, or — if the MCP server is registered — call its \`ask_stack_auth\` tool.
|
||||
|
||||
## Setup
|
||||
|
||||
### 1) Install the package
|
||||
|
||||
Run the install command using whatever package manager the project uses (npm, yarn, pnpm, bun):
|
||||
|
||||
| Framework | Package |
|
||||
|-----------|---------|
|
||||
| Next.js | \`@stackframe/stack\` |
|
||||
| React | \`@stackframe/react\` |
|
||||
| Vanilla JS | \`@stackframe/js\` |
|
||||
|
||||
### 2) Create the Stack apps
|
||||
|
||||
Depending on whether you're on a client or a server, you will want to create stackClientApp or stackServerApp. Some environments, like Next.js, have both, so create both files.
|
||||
|
||||
The stack client app has client-level permissions. It contains most of the useful methods and hooks for your client-side code.
|
||||
The stack server app has full read and write access to all users. It requires STACK_SECRET_SERVER_KEY env variable and should only be used in secure context
|
||||
|
||||
In Next.js, env vars are auto-detected (NEXT_PUBLIC_STACK_PROJECT_ID etc.), so the constructor needs no explicit config. For other frameworks, you must pass projectId explicitly using the framework's env var access method. Pass publishableClientKey only if your project is configured to require publishable client keys.
|
||||
|
||||
The tokenStore should be "nextjs-cookie" for Next.js, or "cookie" for all other frameworks.
|
||||
|
||||
Make sure to set redirectMethod on non next.js frameworks. For example for tanstack router import like so:
|
||||
import { useNavigate } from '@tanstack/react-router'
|
||||
|
||||
\`\`\`ts
|
||||
// src/stack/client.ts
|
||||
import { StackClientApp } from "@stackframe/stack"; // or "@stackframe/react" or "@stackframe/js"
|
||||
|
||||
export const stackClientApp = new StackClientApp({
|
||||
// Next.js: omit projectId/publishableClientKey (auto-detected from NEXT_PUBLIC_ env vars)
|
||||
// Other frameworks: pass projectId explicitly, and publishableClientKey only if required by your project. For Vite:
|
||||
// projectId: import.meta.env.VITE_STACK_PROJECT_ID,
|
||||
// publishableClientKey: import.meta.env.VITE_STACK_PUBLISHABLE_CLIENT_KEY,
|
||||
tokenStore: "nextjs-cookie", // or "cookie" for non-Next.js,
|
||||
// redirectMethod: { useNavigate } // or "window"
|
||||
});
|
||||
\`\`\`
|
||||
|
||||
If the framework has server-side support (e.g. Next.js), also create a server app:
|
||||
|
||||
\`\`\`ts
|
||||
// src/stack/server.ts
|
||||
import "server-only";
|
||||
import { StackServerApp } from "@stackframe/stack";
|
||||
import { stackClientApp } from "./client";
|
||||
|
||||
export const stackServerApp = new StackServerApp({
|
||||
inheritsFrom: stackClientApp,
|
||||
});
|
||||
\`\`\`
|
||||
|
||||
### 3) Wrap your app in a Stack provider
|
||||
|
||||
Required for all React based frameworks (including Next.js). \`StackHandler\`, \`useUser\`, and \`useStackApp\` all depend on it — without it you will get "useStackApp must be used within a StackProvider" at runtime. In Next.js, add it to the root \`app/layout.tsx\` around \`{children}\`. In React/Vite, wrap your root component.
|
||||
|
||||
\`\`\`tsx
|
||||
import { StackProvider, StackTheme } from "@stackframe/stack"; // or "@stackframe/react"
|
||||
import { stackClientApp } from "../stack/client"; // adjust relative path
|
||||
\`\`\`
|
||||
|
||||
Then wrap the body content:
|
||||
|
||||
\`\`\`tsx
|
||||
return (
|
||||
<body>
|
||||
<StackProvider app={stackClientApp}>
|
||||
<StackTheme>{children}</StackTheme>
|
||||
</StackProvider>
|
||||
</body>
|
||||
);
|
||||
\`\`\`
|
||||
|
||||
### 4) Create the Stack handler (if available in framework)
|
||||
|
||||
This sets up pages for sign in, sign up, password reset, etc.
|
||||
|
||||
\`\`\`tsx
|
||||
import { StackHandler } from "@stackframe/stack"; // Next.js
|
||||
// import { StackHandler } from "@stackframe/react"; // React
|
||||
|
||||
export default function Handler() {
|
||||
return <StackHandler fullPage />;
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
### 5) Create a Suspense boundary
|
||||
|
||||
Suspense is necessary for many stack auth hooks such as useUser to function. Add a loading component with a custom loading indicator for the current project. Don't add if one already exists
|
||||
|
||||
For example:
|
||||
\`\`\`tsx
|
||||
//src/loading.tsx
|
||||
|
||||
export default function Loading() {
|
||||
return <p>Loading...</p>
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
### 6) Link environment variables
|
||||
|
||||
This is only necessary if not using local emulator. Ensure these are ignored by git.
|
||||
|
||||
Rename the env var keys in .env to match the framework's convention for client-exposed variables. For example, Vite requires VITE_ prefix, Next.js uses NEXT_PUBLIC_, etc. The values should stay the same — only rename the keys.
|
||||
|
||||
The required variables are:
|
||||
- Project ID (e.g. NEXT_PUBLIC_STACK_PROJECT_ID, VITE_STACK_PROJECT_ID, etc.)
|
||||
- Secret server key: STACK_SECRET_SERVER_KEY (only for frameworks with server-side support, no prefix needed)
|
||||
|
||||
The publishable client key (e.g. NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY, VITE_STACK_PUBLISHABLE_CLIENT_KEY, etc.) is only required if your project has publishable client keys enabled as a requirement.
|
||||
Apply only the sections relevant to this project. For example, do not add Convex, Supabase, or command-line-app authentication unless the existing project already uses that surface or the user explicitly asked for it.
|
||||
|
||||
${aiSetupPrompt}
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user