import * as React from "react"; import { TutorialStepperDeveloperCodePreviewThree } from "@/registry/tutorial-stepper-developer-code-preview-three/tutorial-stepper-developer-code-preview-three"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; export function TutorialStepperDeveloperCodePreviewThreeDemo() { const steps = [ { id: "install", title: "Install SDK", badge: "new" as const, instructions: (

Install the SDK using your preferred package manager.

This will add the necessary dependencies to your project.

), codeSnippets: [ { language: "npm", code: "npm install @example/sdk", }, { language: "yarn", code: "yarn add @example/sdk", }, { language: "pnpm", code: "pnpm add @example/sdk", }, ], help: [ { question: "Which package manager should I use?", answer: "Use whichever package manager your project already uses. If you're unsure, npm is a safe default.", }, ], }, { id: "initialize", title: "Initialize Client", badge: "updated" as const, instructions: (

Import the SDK and create a client instance with your API key.

You can find your API key in the dashboard settings.

), codeSnippets: [ { language: "TypeScript", code: `import { ExampleClient } from '@example/sdk'; const client = new ExampleClient({ apiKey: process.env.EXAMPLE_API_KEY, });`, highlights: [3, 4, 5], }, { language: "JavaScript", code: `const { ExampleClient } = require('@example/sdk'); const client = new ExampleClient({ apiKey: process.env.EXAMPLE_API_KEY, });`, highlights: [3, 4, 5], }, ], help: [ { question: "Where do I get my API key?", answer: "Navigate to Settings > API Keys in your dashboard and create a new key.", link: "https://docs.example.com/api-keys", }, { question: "Is my API key secure?", answer: "Never commit your API key to version control. Always use environment variables.", }, ], }, { id: "first-request", title: "Make First Request", instructions: (

Send your first API request to verify everything is working correctly.

This example fetches a list of users from your workspace.

), codeSnippets: [ { language: "TypeScript", code: `const users = await client.users.list({ limit: 10, sort: 'created_at', }); console.log(\`Found \${users.length} users\`);`, highlights: [1, 2, 3, 4], }, { language: "JavaScript", code: `client.users.list({ limit: 10, sort: 'created_at', }).then(users => { console.log(\`Found \${users.length} users\`); });`, highlights: [1, 2, 3], }, ], help: [ { question: "What if I get an authentication error?", answer: "Double-check that your API key is correct and has the necessary permissions.", link: "https://docs.example.com/troubleshooting", }, ], }, { id: "error-handling", title: "Handle Errors", instructions: (

Implement proper error handling to gracefully handle API failures.

The SDK throws typed errors for different failure scenarios.

), codeSnippets: [ { language: "TypeScript", code: `try { const users = await client.users.list(); } catch (error) { if (error instanceof ApiError) { console.error('API Error:', error.message); console.error('Status:', error.status); } else { console.error('Unexpected error:', error); } }`, highlights: [3, 4, 5, 6], }, ], help: [ { question: "What error types should I handle?", answer: "The SDK provides ApiError, AuthError, RateLimitError, and NetworkError types.", link: "https://docs.example.com/errors", }, ], }, ]; return (

API Quickstart Guide

Get started with the Example SDK in 4 easy steps

); } export default TutorialStepperDeveloperCodePreviewThreeDemo;

Simple