@idealyst/cli 1.0.25 → 1.0.26

package/dist/index.js

@@ -253,6 +253,10 @@ async function mergePackageJsonDependencies(templatePath, projectPath) {
             '@react-navigation/drawer': '^7.5.3',
             '@react-navigation/native': '^7.1.14',
             '@react-navigation/native-stack': '^7.3.21',
+            '@tanstack/react-query': '^5.83.0',
+            '@trpc/client': '^11.4.3',
+            '@trpc/react-query': '^11.4.3',
+            '@trpc/server': '^11.4.3',
             'react-native-edge-to-edge': '^1.6.2',
             'react-native-gesture-handler': '^2.27.1',
             'react-native-nitro-modules': '^0.26.3',
@@ -332,6 +336,71 @@ async function promptForAppName(projectName) {
     ]);
     return appName;
 }
+async function promptForTrpcIntegration() {
+    const { withTrpc } = await inquirer.prompt([
+        {
+            type: 'confirm',
+            name: 'withTrpc',
+            message: 'Would you like to include tRPC client setup and boilerplate?',
+            default: false
+        }
+    ]);
+    return withTrpc;
+}
+async function copyTrpcFiles(templatePath, projectPath, data) {
+    const spinner = ora('Adding tRPC client utilities...').start();
+    try {
+        const trpcUtilsSource = path.join(templatePath, 'src', 'utils', 'trpc.ts');
+        const trpcUtilsTarget = path.join(projectPath, 'src', 'utils', 'trpc.ts');
+        // Ensure utils directory exists
+        await fs.ensureDir(path.join(projectPath, 'src', 'utils'));
+        // Copy and process the tRPC utils file
+        await fs.copy(trpcUtilsSource, trpcUtilsTarget);
+        await processTemplateFile(trpcUtilsTarget, data);
+        spinner.succeed('tRPC client utilities added');
+    }
+    catch (error) {
+        spinner.fail('Failed to add tRPC client utilities');
+        console.warn(chalk.yellow('⚠️  tRPC utilities could not be copied, but the project was created successfully'));
+    }
+}
+async function copyTrpcAppComponent(templatePath, projectPath, data) {
+    const spinner = ora('Setting up tRPC App component...').start();
+    try {
+        const trpcAppSource = path.join(templatePath, 'src', 'App-with-trpc.tsx');
+        const appTarget = path.join(projectPath, 'src', 'App.tsx');
+        // Copy the tRPC-enabled App component over the default one
+        await fs.copy(trpcAppSource, appTarget, { overwrite: true });
+        await processTemplateFile(appTarget, data);
+        spinner.succeed('tRPC App component configured');
+    }
+    catch (error) {
+        spinner.fail('Failed to configure tRPC App component');
+        console.warn(chalk.yellow('⚠️  tRPC App component could not be configured, but the project was created successfully'));
+    }
+}
+async function removeTrpcDependencies(projectPath) {
+    try {
+        const packageJsonPath = path.join(projectPath, 'package.json');
+        const packageJson = await fs.readJSON(packageJsonPath);
+        // Remove tRPC-related dependencies
+        const trpcDeps = [
+            '@tanstack/react-query',
+            '@trpc/client',
+            '@trpc/react-query',
+            '@trpc/server'
+        ];
+        trpcDeps.forEach(dep => {
+            if (packageJson.dependencies && packageJson.dependencies[dep]) {
+                delete packageJson.dependencies[dep];
+            }
+        });
+        await fs.writeJSON(packageJsonPath, packageJson, { spaces: 2 });
+    }
+    catch (error) {
+        console.warn(chalk.yellow('⚠️  Could not remove tRPC dependencies from package.json'));
+    }
+}
 async function configureAndroidVectorIcons(projectPath) {
     const buildGradlePath = path.join(projectPath, 'android', 'app', 'build.gradle');
     try {
@@ -371,6 +440,8 @@ var utils = /*#__PURE__*/Object.freeze({
   __proto__: null,
   configureAndroidVectorIcons: configureAndroidVectorIcons,
   copyTemplate: copyTemplate,
+  copyTrpcAppComponent: copyTrpcAppComponent,
+  copyTrpcFiles: copyTrpcFiles,
   createPackageName: createPackageName,
   getTemplateData: getTemplateData,
   initializeReactNativeProject: initializeReactNativeProject,
@@ -383,6 +454,8 @@ var utils = /*#__PURE__*/Object.freeze({
   promptForAppName: promptForAppName,
   promptForProjectName: promptForProjectName,
   promptForProjectType: promptForProjectType,
+  promptForTrpcIntegration: promptForTrpcIntegration,
+  removeTrpcDependencies: removeTrpcDependencies,
   resolveProjectPath: resolveProjectPath,
   runCommand: runCommand,
   updateWorkspacePackageJson: updateWorkspacePackageJson,
@@ -392,7 +465,7 @@ var utils = /*#__PURE__*/Object.freeze({
 const __filename$4 = fileURLToPath(import.meta.url);
 const __dirname$4 = path.dirname(__filename$4);
 async function generateNativeProject(options) {
-    const { name, directory, skipInstall, appName } = options;
+    const { name, directory, skipInstall, appName, withTrpc } = options;
     if (!validateProjectName(name)) {
         throw new Error(`Invalid project name: ${name}`);
     }
@@ -412,9 +485,18 @@ async function generateNativeProject(options) {
         await initializeReactNativeProject(projectName, projectDir, displayName, true);
         // Step 3: Overlay Idealyst-specific files
         await overlayIdealystFiles(templatePath, projectPath, templateData);
-        // Step 4: Configure Android vector icons
+        // Step 4: Handle tRPC setup
+        if (withTrpc) {
+            await copyTrpcFiles(templatePath, projectPath, templateData);
+            await copyTrpcAppComponent(templatePath, projectPath, templateData);
+        }
+        // Step 5: Configure Android vector icons
         await configureAndroidVectorIcons(projectPath);
-        // Step 5: Install dependencies (including Idealyst packages) after workspace config is updated
+        // Step 6: Remove tRPC dependencies if not requested (after merge but before install)
+        if (!withTrpc) {
+            await removeTrpcDependencies(projectPath);
+        }
+        // Step 7: Install dependencies (including Idealyst packages) after workspace config is updated
         await installDependencies(projectPath, skipInstall);
         console.log(chalk.green('✅ React Native project created successfully!'));
         console.log(chalk.blue('📋 Project includes:'));
@@ -427,6 +509,11 @@ async function generateNativeProject(options) {
         console.log(chalk.white('  • Metro configuration'));
         console.log(chalk.white('  • Babel configuration'));
         console.log(chalk.white('  • Native platform directories (android/, ios/)'));
+        if (withTrpc) {
+            console.log(chalk.white('  • tRPC client setup and utilities'));
+            console.log(chalk.white('  • React Query integration'));
+            console.log(chalk.white('  • Pre-configured tRPC provider'));
+        }
     }
     catch (error) {
         console.error(chalk.red('❌ Error creating React Native project:'));
@@ -438,7 +525,7 @@ async function generateNativeProject(options) {
 const __filename$3 = fileURLToPath(import.meta.url);
 const __dirname$3 = path.dirname(__filename$3);
 async function generateWebProject(options) {
-    const { name, directory, skipInstall } = options;
+    const { name, directory, skipInstall, withTrpc } = options;
     if (!validateProjectName(name)) {
         throw new Error(`Invalid project name: ${name}`);
     }
@@ -447,6 +534,15 @@ async function generateWebProject(options) {
     const templatePath = path.join(__dirname$3, '..', 'templates', 'web');
     const templateData = getTemplateData(name, `React web app built with Idealyst Framework`);
     await copyTemplate(templatePath, projectPath, templateData);
+    // Handle tRPC setup
+    if (withTrpc) {
+        await copyTrpcFiles(templatePath, projectPath, templateData);
+        await copyTrpcAppComponent(templatePath, projectPath, templateData);
+    }
+    else {
+        // Remove tRPC dependencies if not requested
+        await removeTrpcDependencies(projectPath);
+    }
     await installDependencies(projectPath, skipInstall);
     await updateWorkspacePackageJson(workspacePath, directory);
     console.log(chalk.green('✅ React Web project created successfully!'));
@@ -458,6 +554,11 @@ async function generateWebProject(options) {
     console.log(chalk.white('  • Idealyst Theme'));
     console.log(chalk.white('  • TypeScript configuration'));
     console.log(chalk.white('  • React Router'));
+    if (withTrpc) {
+        console.log(chalk.white('  • tRPC client setup and utilities'));
+        console.log(chalk.white('  • React Query integration'));
+        console.log(chalk.white('  • Pre-configured tRPC provider'));
+    }
 }
 
 const __filename$2 = fileURLToPath(import.meta.url);
@@ -562,9 +663,10 @@ program
 program
     .command('create [project-name]')
     .description('Create a new Idealyst project')
-    .option('-t, --type <type>', 'Project type: native, web, or shared')
+    .option('-t, --type <type>', 'Project type: native, web, shared, or api')
     .option('-d, --directory <directory>', 'Output directory', '.')
     .option('-a, --app-name <app-name>', 'Display name for native apps (e.g., "My Awesome App")')
+    .option('--with-trpc', 'Include tRPC boilerplate and setup (for web/native projects)')
     .option('--skip-install', 'Skip installing dependencies')
     .action(async (projectName, options) => {
     try {
@@ -598,12 +700,18 @@ program
         if (projectType === 'native' && !appName) {
             appName = await promptForAppName(projectName);
         }
+        // Prompt for tRPC integration if it's a web/native project and flag not provided
+        let withTrpc = options.withTrpc;
+        if ((projectType === 'web' || projectType === 'native') && withTrpc === undefined) {
+            withTrpc = await promptForTrpcIntegration();
+        }
         await generateProject({
             name: projectName,
             type: projectType,
             directory: options.directory,
             skipInstall: options.skipInstall || false,
-            appName
+            appName,
+            withTrpc: withTrpc || false
         });
         console.log(chalk.green(`✨ Successfully created ${projectName}!`));
         console.log(chalk.blue(`📁 Project created in: ${options.directory}/packages/${projectName}`));

package/dist/types/generators/utils.d.ts

@@ -29,4 +29,8 @@ export declare function mergePackageJsonDependencies(templatePath: string, proje
 export declare function promptForProjectName(): Promise<string>;
 export declare function promptForProjectType(): Promise<string>;
 export declare function promptForAppName(projectName: string): Promise<string>;
+export declare function promptForTrpcIntegration(): Promise<boolean>;
+export declare function copyTrpcFiles(templatePath: string, projectPath: string, data: TemplateData): Promise<void>;
+export declare function copyTrpcAppComponent(templatePath: string, projectPath: string, data: TemplateData): Promise<void>;
+export declare function removeTrpcDependencies(projectPath: string): Promise<void>;
 export declare function configureAndroidVectorIcons(projectPath: string): Promise<void>;

package/dist/types/types.d.ts

@@ -5,6 +5,7 @@ export interface GenerateProjectOptions {
     directory: string;
     skipInstall: boolean;
     appName?: string;
+    withTrpc?: boolean;
 }
 export interface TemplateData {
     projectName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/cli",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "CLI tool for generating Idealyst Framework projects",
   "type": "module",
   "main": "dist/index.js",

package/templates/api/package.json

@@ -6,8 +6,8 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "tsc",
-    "dev": "tsx watch src/index.ts",
-    "start": "node dist/index.js",
+    "dev": "tsx watch src/server.ts",
+    "start": "node dist/server.js",
     "db:generate": "prisma generate",
     "db:push": "prisma db push",
     "db:studio": "prisma studio",

package/templates/api/src/index.ts

@@ -1,50 +1,14 @@
-import express from 'express';
-import cors from 'cors';
-import { createExpressMiddleware } from '@trpc/server/adapters/express';
-import { appRouter } from './router/index.js';
-import { createContext } from './context.js';
-import dotenv from 'dotenv';
+// Main exports for the API
+export { appRouter } from './router/index.js';
+export type { AppRouter } from './router/index.js';
 
-// Load environment variables
-dotenv.config();
+// Export context type for client usage
+export type { Context } from './context.js';
 
-const app = express();
-const PORT = process.env.PORT || 3000;
+// Export middleware for potential external usage
+export * from './middleware/auth.js';
+export * from './middleware/common.js';
 
-// CORS configuration
-app.use(cors({
-  origin: process.env.CORS_ORIGIN || 'http://localhost:3000',
-  credentials: true,
-}));
-
-// Health check endpoint
-app.get('/health', (req, res) => {
-  res.json({ status: 'OK', timestamp: new Date().toISOString() });
-});
-
-// tRPC middleware
-app.use(
-  '/trpc',
-  createExpressMiddleware({
-    router: appRouter,
-    createContext,
-  })
-);
-
-// Default route
-app.get('/', (req, res) => {
-  res.json({
-    message: 'Welcome to {{projectName}} API',
-    endpoints: {
-      health: '/health',
-      trpc: '/trpc',
-      playground: '/trpc-playground' // Available in development
-    }
-  });
-});
-
-app.listen(PORT, () => {
-  console.log(`🚀 Server running on http://localhost:${PORT}`);
-  console.log(`📡 tRPC API available at http://localhost:${PORT}/trpc`);
-  console.log(`🏥 Health check at http://localhost:${PORT}/health`);
-}); 
+// Export controller base classes for extensions
+export { BaseController, controllerToRouter } from './lib/controller.js';
+export type { MiddlewareFn } from './lib/controller.js'; 

package/templates/api/src/server.ts

@@ -0,0 +1,50 @@
+import express from 'express';
+import cors from 'cors';
+import { createExpressMiddleware } from '@trpc/server/adapters/express';
+import { appRouter } from './router/index.js';
+import { createContext } from './context.js';
+import dotenv from 'dotenv';
+
+// Load environment variables
+dotenv.config();
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// CORS configuration
+app.use(cors({
+  origin: process.env.CORS_ORIGIN || 'http://localhost:3000',
+  credentials: true,
+}));
+
+// Health check endpoint
+app.get('/health', (req, res) => {
+  res.json({ status: 'OK', timestamp: new Date().toISOString() });
+});
+
+// tRPC middleware
+app.use(
+  '/trpc',
+  createExpressMiddleware({
+    router: appRouter,
+    createContext,
+  })
+);
+
+// Default route
+app.get('/', (req, res) => {
+  res.json({
+    message: 'Welcome to {{projectName}} API',
+    endpoints: {
+      health: '/health',
+      trpc: '/trpc',
+      playground: '/trpc-playground' // Available in development
+    }
+  });
+});
+
+app.listen(PORT, () => {
+  console.log(`🚀 Server running on http://localhost:${PORT}`);
+  console.log(`📡 tRPC API available at http://localhost:${PORT}/trpc`);
+  console.log(`🏥 Health check at http://localhost:${PORT}/health`);
+}); 

package/templates/native/src/App-with-trpc.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { UnistylesRegistry } from 'react-native-unistyles';
+import { Screen, Text, View } from '@idealyst/components';
+import { breakpoints, lightTheme, darkTheme } from '@idealyst/theme';
+import { trpc } from './utils/trpc';
+
+// Register the Unistyles themes and breakpoints
+UnistylesRegistry
+  .addBreakpoints(breakpoints)
+  .addThemes({
+    light: lightTheme,
+    dark: darkTheme,
+  })
+  .addConfig({
+    adaptiveThemes: true,
+  });
+
+// Create tRPC client
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Update this to your API URL
+      // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
+      // Optional: Add headers for authentication
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+function App() {
+  // Example tRPC usage
+  const { data, isLoading, error } = trpc.hello.useQuery({ name: 'React Native' });
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <Screen>
+          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
+            <Text variant="h1" style={{ textAlign: 'center', marginBottom: 20 }}>
+              Welcome to {{appName}}!
+            </Text>
+            <Text variant="body" style={{ textAlign: 'center', marginBottom: 20 }}>
+              This is a React Native app built with the Idealyst Framework
+            </Text>
+            
+            {/* tRPC Example */}
+            <View style={{ marginTop: 20, alignItems: 'center' }}>
+              <Text variant="h3" style={{ marginBottom: 10 }}>tRPC Example:</Text>
+              {isLoading && <Text>Loading...</Text>}
+              {error && <Text>Error: {error.message}</Text>}
+              {data && <Text style={{ textAlign: 'center' }}>{data.greeting}</Text>}
+            </View>
+            
+            <Text variant="caption" style={{ textAlign: 'center', marginTop: 30 }}>
+              Edit src/App.tsx to get started
+            </Text>
+          </View>
+        </Screen>
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App; 

package/templates/native/src/utils/trpc.ts

@@ -0,0 +1,127 @@
+import { createTRPCReact } from '@trpc/react-query';
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
+
+// Import your API types here when you have an API project
+// Example: import type { AppRouter } from '@your-workspace/api';
+
+// For now, we'll use a generic type that you can replace
+type AppRouter = any;
+
+// Create the tRPC React hooks
+export const trpc = createTRPCReact<AppRouter>();
+
+// Create a vanilla client (for use outside of React components)
+export const trpcClient = createTRPCProxyClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Update this to match your API URL
+      // Optional: Add headers for authentication
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+/*
+Usage Examples for React Native:
+
+1. First, install the required dependencies:
+   yarn add @trpc/client @trpc/react-query @tanstack/react-query
+
+2. Replace the AppRouter type import above with your actual API router:
+   import type { AppRouter } from '@your-workspace/api';
+
+3. Set up the tRPC provider in your App component:
+
+```tsx
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { trpc } from './src/utils/trpc';
+
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Use your computer's IP for device testing
+      // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
+    }),
+  ],
+});
+
+function App() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {/* Your app components */}
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App;
+```
+
+4. Use tRPC in your React Native components:
+
+```tsx
+import React from 'react';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
+import { trpc } from '../utils/trpc';
+
+function UsersList() {
+  const { data: users, isLoading, refetch } = trpc.users.getAll.useQuery();
+  const createUser = trpc.users.create.useMutation({
+    onSuccess: () => {
+      refetch(); // Refresh the list after creating
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <View>
+        <Text>Loading...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView>
+      {users?.map(user => (
+        <View key={user.id}>
+          <Text>{user.name}</Text>
+          <Text>{user.email}</Text>
+        </View>
+      ))}
+      <TouchableOpacity
+        onPress={() => createUser.mutate({ 
+          email: 'test@example.com', 
+          name: 'Test User' 
+        })}
+      >
+        <Text>Create User</Text>
+      </TouchableOpacity>
+    </ScrollView>
+  );
+}
+```
+
+5. For device testing, make sure to:
+   - Use your computer's IP address instead of localhost
+   - Ensure your API server is accessible from the device
+   - Consider using ngrok for external testing
+
+6. Error handling example:
+
+```tsx
+const { data, error, isLoading } = trpc.users.getAll.useQuery();
+
+if (error) {
+  return <Text>Error: {error.message}</Text>;
+}
+```
+*/ 

package/templates/web/package.json

@@ -16,6 +16,10 @@
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@react-native/normalize-colors": "^0.80.1",
+    "@tanstack/react-query": "^5.83.0",
+    "@trpc/client": "^11.4.3",
+    "@trpc/react-query": "^11.4.3",
+    "@trpc/server": "^11.4.3",
     "@types/react-router-dom": "^5.3.3",
     "compression": "^1.7.4",
     "express": "^4.18.2",

package/templates/web/src/App-with-trpc.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { UnistylesRegistry } from 'react-native-unistyles';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { trpc } from './utils/trpc';
+import { Screen, Text, View } from '@idealyst/components';
+import { breakpoints, lightTheme, darkTheme } from '@idealyst/theme';
+
+// Register the Unistyles themes and breakpoints
+UnistylesRegistry
+  .addBreakpoints(breakpoints)
+  .addThemes({
+    light: lightTheme,
+    dark: darkTheme,
+  })
+  .addConfig({
+    adaptiveThemes: true,
+  });
+
+// Create tRPC client
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Update this to match your API URL
+      // Optional: Add headers for authentication
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+function HomePage() {
+  // Example tRPC usage
+  const { data, isLoading, error } = trpc.hello.useQuery({ name: 'World' });
+
+  return (
+    <Screen>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <Text variant="h1">Welcome to {{projectName}}!</Text>
+        <Text variant="body">
+          This is a React Web app built with the Idealyst Framework
+        </Text>
+        
+        {/* tRPC Example */}
+        <View style={{ marginTop: 20 }}>
+          <Text variant="h3">tRPC Example:</Text>
+          {isLoading && <Text>Loading...</Text>}
+          {error && <Text>Error: {error.message}</Text>}
+          {data && <Text>{data.greeting}</Text>}
+        </View>
+        
+        <Text variant="caption" style={{ marginTop: 20 }}>
+          Edit src/App.tsx to get started
+        </Text>
+      </View>
+    </Screen>
+  );
+}
+
+function App() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+          </Routes>
+        </BrowserRouter>
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+
+export default App; 

package/templates/web/src/utils/trpc.ts

@@ -0,0 +1,93 @@
+import { createTRPCReact } from '@trpc/react-query';
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
+
+// Import your API types here when you have an API project
+// Example: import type { AppRouter } from '@your-workspace/api';
+
+// For now, we'll use a generic type that you can replace
+type AppRouter = any;
+
+// Create the tRPC React hooks
+export const trpc = createTRPCReact<AppRouter>();
+
+// Create a vanilla client (for use outside of React components)
+export const trpcClient = createTRPCProxyClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc', // Update this to match your API URL
+      // Optional: Add headers
+      // headers() {
+      //   return {
+      //     authorization: getAuthToken(),
+      //   };
+      // },
+    }),
+  ],
+});
+
+/*
+Usage Examples:
+
+1. First, install the required dependencies:
+   yarn add @trpc/client @trpc/react-query @tanstack/react-query
+
+2. Replace the AppRouter type import above with your actual API router:
+   import type { AppRouter } from '@your-workspace/api';
+
+3. Set up the tRPC provider in your App component:
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+import { trpc } from './utils/trpc';
+
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000/trpc',
+    }),
+  ],
+});
+
+function App() {
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {/* Your app components */}
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+```
+
+4. Use tRPC in your components:
+
+```tsx
+import { trpc } from '../utils/trpc';
+
+function UsersList() {
+  const { data: users, isLoading } = trpc.users.getAll.useQuery();
+  const createUser = trpc.users.create.useMutation();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {users?.map(user => (
+        <div key={user.id}>{user.name}</div>
+      ))}
+      <button
+        onClick={() => createUser.mutate({ 
+          email: 'test@example.com', 
+          name: 'Test User' 
+        })}
+      >
+        Create User
+      </button>
+    </div>
+  );
+}
+```
+*/