CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-30 21:01:54 +08:00
Code Issues Actions 44 Packages Projects Releases Wiki Activity

Update RDE project keys

Browse Source
This commit is contained in:
Konstantin Wohlwend 2026-06-26 18:48:33 -07:00
parent cf4f9b8918
commit 9c438fa604
2 changed files with 165 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx
View File

@ -73,12 +73,50 @@ function buildCloudSetupPrompt(options: {
`;
}
function buildCliDevSetupPrompt(options: {
docsBaseUrl: string,
}) {
const { docsBaseUrl } = options;
const normalizedDocsBaseUrl = docsBaseUrl.replace(/\/$/, '');
const reminders = remindersPrompt.replaceAll(PROD_DOCS_BASE_URL, normalizedDocsBaseUrl);
return deindent`
Install and set up Hexclave in this project by following these instructions:
Read https://skill.hexclave.com and follow the setup instructions it gives for this project's specific framework and language.
Follow skill.hexclave.com as written, but use the local dashboard / Hexclave CLI development setup. Do not use the cloud environment-variable setup for local development.
Set up the app's dev command so Hexclave starts through the CLI:
\`\`\`json
{
"scripts": {
"dev": "hexclave dev --config-file ./hexclave.config.ts -- npm run dev:inner",
"dev:inner": "<the app's previous dev command>"
}
}
\`\`\`
If the Hexclave CLI is not installed globally, use \`npx @hexclave/cli dev --config-file ./hexclave.config.ts -- npm run dev:inner\` instead.
Do not create Hexclave project keys or ask for Hexclave environment variables for local development. The \`hexclave dev\` command automatically creates or links the local config project and injects the project ID and secret server key into the child app process.
Keep project configuration in \`hexclave.config.ts\`. Once setup is done, run \`npm run dev\` and create the first user in the app.
After setup finishes, verify that the Hexclave MCP server is registered in your AI client config — name: \`hexclave\`, transport: \`http\`, URL: \`https://mcp.hexclave.com/mcp\`. If it is not registered, add it manually so future agents have live access to Hexclave docs and APIs.
${reminders}
`;
}
export default function SetupPage(props: { toMetrics: () => void }) {
const adminApp = useAdminApp();
const [setupMode, setSetupMode] = useState<SetupMode>("recommended");
const [keys, setKeys] = useState<{ projectId: string, publishableClientKey?: string, secretServerKey: string } | null>(null);
const projectConfig = adminApp.useProject().useConfig();
const requirePublishableClientKey = projectConfig.project.requirePublishableClientKey;
const isRemoteDevelopmentEnvironment = getPublicEnvVar("NEXT_PUBLIC_STACK_IS_REMOTE_DEVELOPMENT_ENVIRONMENT") === "true";
const onGenerateKeys = async () => {
const newKey = await adminApp.createInternalApiKey({
@ -96,11 +134,16 @@ export default function SetupPage(props: { toMetrics: () => void }) {
});
};
const selectedInstallPrompt = buildCloudSetupPrompt({
docsBaseUrl: getSetupDocsBaseUrl(),
projectId: adminApp.projectId,
apiBaseUrl: getSetupApiBaseUrl(),
});
const setupDocsBaseUrl = getSetupDocsBaseUrl();
const selectedInstallPrompt = isRemoteDevelopmentEnvironment
? buildCliDevSetupPrompt({
docsBaseUrl: setupDocsBaseUrl,
})
: buildCloudSetupPrompt({
docsBaseUrl: setupDocsBaseUrl,
projectId: adminApp.projectId,
apiBaseUrl: getSetupApiBaseUrl(),
});
const manualSetupDocsUrl = getManualSetupDocsUrl();
return (
@ -130,13 +173,18 @@ export default function SetupPage(props: { toMetrics: () => void }) {
variant='outline'
size='sm'
onClick={() => {
window.open(getSetupDocsBaseUrl(), '_blank');
window.open(setupDocsBaseUrl, '_blank');
}}
>
<BookIcon className="w-4 h-4 mr-2" />
Full Documentation
</DesignButton>
</Typography>
{isRemoteDevelopmentEnvironment && (
<Typography variant="secondary" className="max-w-xl">
For local config projects, run your app with <InlineCode>hexclave dev</InlineCode>. It injects the project ID and secret key automatically, so you do not need to create project keys or write Hexclave environment variables.
</Typography>
)}
</div>
</div>
@ -152,7 +200,31 @@ export default function SetupPage(props: { toMetrics: () => void }) {
{setupMode === "recommended" ? (
<div className="flex flex-col mt-4 mx-4">
<ol className="relative text-gray-500 border-s border-gray-200 dark:border-gray-700 dark:text-gray-400 ">
{[
{(isRemoteDevelopmentEnvironment ? [
{
step: 1,
title: "Copy Setup Prompt",
content: <div className="flex min-w-0 flex-col gap-4">
<CodeBlock
language="text"
content={selectedInstallPrompt}
customRender={
<pre className="max-h-[480px] overflow-y-auto whitespace-pre-wrap break-words p-4 text-sm leading-6 text-foreground">
{selectedInstallPrompt}
</pre>
}
title="Prompt for your AI agent"
icon="code"
maxHeight={480}
/>
</div>,
},
{
step: 2,
title: "Done",
content: <SetupRecommendedDoneStep onExploreDashboard={props.toMetrics} />,
},
] : [
{
step: 1,
title: "Copy Setup Prompt",
@ -186,7 +258,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
title: "Done",
content: <SetupRecommendedDoneStep onExploreDashboard={props.toMetrics} />,
},
].map((item) => (
]).map((item) => (
<li key={item.step} className={cn("ms-6 flex flex-col lg:flex-row gap-10 mb-20")}>
<div className="flex flex-col justify-center gap-2 max-w-[180px] min-w-[180px]">
<span className={`absolute flex items-center justify-center w-8 h-8 bg-zinc-100 dark:bg-zinc-800 rounded-full -start-4 ring-4 ring-white dark:ring-zinc-900`}>
@ -310,6 +382,22 @@ function SetupRecommendedDoneStep(props: { onExploreDashboard: () => void }) {
);
}
function CliDevSetupStep() {
return (
<div className="flex flex-col gap-4">
<Typography>
Start the app through the Hexclave CLI instead of copying project keys into an env file.
</Typography>
<div className={cn(codePanelShellClasses, "w-full overflow-x-auto p-4 font-mono text-sm")}>
hexclave dev --config-file ./hexclave.config.ts -- &lt;your-dev-command&gt;
</div>
<Typography variant="secondary">
The CLI creates or links the local config project and injects the project ID and secret server key into the child process automatically. Use <InlineCode>npx @hexclave/cli dev</InlineCode> if the CLI is not installed globally.
</Typography>
</div>
);
}
function HexclaveKeys(props: {
keys: { projectId: string, publishableClientKey?: string, secretServerKey: string } | null,
onGenerateKeys: () => Promise<void>,

74
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/project-keys/page-client.tsx
View File

@ -1,11 +1,13 @@
"use client";
import { InternalApiKeyTable } from "@/components/data-table/api-key-table";
import { DesignAlert, DesignButton } from "@/components/design-components";
import { DesignAlert, DesignButton, DesignCard } from "@/components/design-components";
import { EnvKeys } from "@/components/env-keys";
import { SmartFormDialog } from "@/components/form-dialog";
import { SelectField } from "@/components/form-fields";
import { InlineCode } from "@/components/inline-code";
import { SettingSwitch } from "@/components/settings";
import { ActionDialog, Button, Typography } from "@/components/ui";
import { ActionDialog, Typography } from "@/components/ui";
import { getPublicEnvVar } from "@/lib/env";
import { InternalApiKeyFirstView } from "@hexclave/next";
import { useSearchParams } from "next/navigation";
import { useState } from "react";
@ -15,15 +17,32 @@ import { useAdminApp } from "../use-admin-app";
export default function PageClient() {
const hexclaveAdminApp = useAdminApp();
const project = hexclaveAdminApp.useProject();
const params = useSearchParams();
const create = params.get("create") === "true";
const isRemoteDevelopmentEnvironment = getPublicEnvVar("NEXT_PUBLIC_STACK_IS_REMOTE_DEVELOPMENT_ENVIRONMENT") === "true";
const showLocalConfigInstructions = isRemoteDevelopmentEnvironment && project.isDevelopmentEnvironment;
if (showLocalConfigInstructions) {
return (
<PageLayout title="Project Keys">
<LocalConfigProjectKeysInstructions />
</PageLayout>
);
}
return <ProjectKeysManagement create={create} />;
}
function ProjectKeysManagement(props: { create: boolean }) {
const hexclaveAdminApp = useAdminApp();
const project = hexclaveAdminApp.useProject();
const config = project.useConfig();
const requirePublishableClientKey = config.project.requirePublishableClientKey;
const apiKeySets = hexclaveAdminApp.useInternalApiKeys();
const params = useSearchParams();
const create = params.get("create") === "true";
const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(create);
const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(props.create);
const [returnedApiKey, setReturnedApiKey] = useState<InternalApiKeyFirstView | null>(null);
return (
@ -66,6 +85,51 @@ export default function PageClient() {
);
}
function LocalConfigProjectKeysInstructions() {
const hexclaveAdminApp = useAdminApp();
const project = hexclaveAdminApp.useProject();
const config = project.useConfig();
const requirePublishableClientKey = config.project.requirePublishableClientKey;
return (
<>
<DesignCard glassmorphic contentClassName="space-y-5">
<DesignAlert
variant="info"
title="Project keys are managed by the Hexclave CLI for local configs"
description="Local config projects do not create project keys from the dashboard. The CLI starts the dashboard, creates or links the local project, and injects the project ID and secret server key into your app process."
/>
<div className="space-y-3">
<Typography>
Run your app through the CLI so Hexclave can keep <InlineCode>hexclave.config.ts</InlineCode> and your app environment in sync:
</Typography>
<div className="overflow-x-auto rounded-xl border border-border bg-foreground/[0.03] p-4 font-mono text-sm">
npx @hexclave/cli dev --config-file &lt;path-to-hexclave.config.ts&gt; -- &lt;your-dev-command&gt;
</div>
<Typography>
This will automatically provide the correct environment variables to the specified command.
</Typography>
<Typography>
If you have the CLI installed globally, the same command starts with <InlineCode>hexclave dev</InlineCode>. Keep project settings in the config file; the CLI provides the runtime keys automatically.
</Typography>
</div>
</DesignCard>
<SettingSwitch
label="[Advanced] Require publishable client keys"
hint="When enabled, client requests must include a publishable client key."
checked={requirePublishableClientKey}
onCheckedChange={async (checked) => {
await project.update({
requirePublishableClientKey: checked,
});
}}
/>
</>
);
}
const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;
const expiresInOptions = {
[1000 * 60 * 60 * 24 * 1]: "1 day",