docs: add recipe for session keys

[AlvaroLuken]

PR-Codex overview

This PR introduces a comprehensive guide for implementing Smart Wallet Session Keys with frontend signing and backend processing using Alchemy. It includes detailed steps, code snippets, and API endpoints for creating and managing smart wallet sessions.

Detailed summary

• Added a new recipe for "Use Smart Wallet Session Keys" in docs/docs.yml.
• Created docs/pages/recipes/use-session-keys.mdx with detailed instructions.
• Implemented hooks for session key operations (useSignerAddress, useSmartAccount, useSession, useSessionAuthorization).
• Set up backend API routes for wallet operations (wallet_requestAccount, wallet_prepare-calls, wallet_send-prepared-calls).
• Updated src/app/page.tsx to integrate the session key workflow.
• Included environment variable setup in .env.local.
• Provided a summary table of API endpoints and their purposes.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
aa-sdk-ui-demo	Ready	Preview	Comment	Sep 15, 2025 3:24pm

[graphite-app]

How to use the Graphite Merge Queue

Add the label graphite-merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

[github-actions]

🌿 Documentation Preview

Name	Status	Preview	Updated (UTC)
Alchemy Docs	✅ Ready	🔗 Visit Preview	Sep 15, 2025, 3:21 PM

[graphite-app]

The API endpoint /api/wallet-prepare-calls is using the incorrect JSON-RPC method. The code currently uses wallet_createSession, but since this endpoint is specifically for preparing calls, it should use the wallet_prepareCalls method instead. This mismatch between the endpoint's purpose and the method being called could lead to unexpected behavior.

Suggested change

	const createSessionRequest = {
	id: 1,
	jsonrpc: '2.0',
	method: 'wallet_createSession',
	params: [body]
	};
	const createSessionRequest = {
	id: 1,
	jsonrpc: '2.0',
	method: 'wallet_prepareCalls',
	params: [body]
	};

Spotted by Diamond



Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

The TypeScript syntax in this line has formatting issues. The correct syntax for this useState declaration should be:

const [error, setError] = useState<string | null>(null);

The current version has spaces between the angle brackets and types, which will cause a compilation error.

Suggested change

	const [error, setError] = (useState < string) | (null > null);
	const [error, setError] = useState<string | null>(null);

Spotted by Diamond



Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

Documentation table contains incorrect API endpoint mappings. Step 1 shows /api/wallet-create-session for getting signer address, but the actual hook useSignerAddress doesn't use any API endpoint. Step 4 shows /api/wallet-sign-authorization with method wallet_signAuthorization, but this endpoint doesn't exist in the codebase - the signing is done client-side. These incorrect mappings will mislead developers about the actual implementation.

Suggested change

	| 1 | `/api/wallet-create-session` | `wallet_createSession` | Get signer address |
	| 2 | `/api/wallet-request-account` | `wallet_requestAccount` | Create smart account |
	| 3 | `/api/wallet-create-session` | `wallet_createSession` | Create session key |
	| 4 | `/api/wallet-sign-authorization` | `wallet_signAuthorization` | Sign session authorization |
	| 1 | N/A | N/A | Get signer address |
	| 2 | `/api/wallet-request-account` | `wallet_requestAccount` | Create smart account |
	| 3 | `/api/wallet-create-session` | `wallet_createSession` | Create session key |
	| 4 | N/A | N/A | Sign session authorization |

Spotted by Diamond



Is this helpful? React 👍 or 👎 to let us know.