@umituz/react-native-google-stitch-sdk 1.0.2 → 1.0.3

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@umituz/react-native-google-stitch-sdk",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React Native wrapper for Google Labs Stitch SDK with TypeScript support",
+  "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "sideEffects": false,
@@ -34,6 +35,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@google/stitch-sdk": "^0.0.3"
+  },
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-native": ">=0.74.0"

package/src/domain/entities/index.ts

@@ -3,4 +3,16 @@
  * @description Core entity definitions for Stitch SDK
  */
 
-export type { StitchProject, StitchProjectCreateInput, StitchProjectUpdateInput } from './stitch.entity';
+export type {
+  StitchProject,
+  StitchScreen,
+  DeviceType,
+  ModelId,
+  CreativeRange,
+  VariantAspect,
+  VariantOptions,
+  ScreenGenerateInput,
+  ScreenEditInput,
+  ScreenVariantsInput,
+  ScreenOutput,
+} from './stitch.entity';

package/src/domain/entities/stitch.entity.ts

@@ -1,15 +1,85 @@
 /**
- * Stitch Project Entity
- * @description Represents a Google Labs Stitch SDK project
+ * Stitch Entities
+ * @description Domain entities matching Google Labs Stitch SDK structure
  */
 
+/**
+ * Device types for screen generation
+ */
+export type DeviceType = 'MOBILE' | 'DESKTOP' | 'TABLET' | 'AGNOSTIC';
+
+/**
+ * Model IDs for generation
+ */
+export type ModelId = 'GEMINI_3_PRO' | 'GEMINI_3_FLASH';
+
+/**
+ * Creative range for variants
+ */
+export type CreativeRange = 'REFINE' | 'EXPLORE' | 'REIMAGINE';
+
+/**
+ * Variant aspects
+ */
+export type VariantAspect = 'LAYOUT' | 'COLOR_SCHEME' | 'IMAGES' | 'TEXT_FONT' | 'TEXT_CONTENT';
+
+/**
+ * Represents a Stitch project containing screens
+ */
 export interface StitchProject {
   readonly id: string;
-  readonly name: string;
-  readonly description?: string;
-  readonly createdAt: Date;
-  readonly updatedAt: Date;
+  readonly projectId: string;
+}
+
+/**
+ * Represents a generated UI screen
+ */
+export interface StitchScreen {
+  readonly id: string;
+  readonly screenId: string;
+  readonly projectId: string;
 }
 
-export type StitchProjectCreateInput = Omit<StitchProject, 'id' | 'createdAt' | 'updatedAt'>;
-export type StitchProjectUpdateInput = Partial<StitchProjectCreateInput>;
+/**
+ * Options for generating variants
+ */
+export interface VariantOptions {
+  readonly variantCount?: number;
+  readonly creativeRange?: CreativeRange;
+  readonly aspects?: VariantAspect[];
+}
+
+/**
+ * Input for screen generation
+ */
+export interface ScreenGenerateInput {
+  readonly prompt: string;
+  readonly deviceType?: DeviceType;
+}
+
+/**
+ * Input for screen editing
+ */
+export interface ScreenEditInput {
+  readonly prompt: string;
+  readonly deviceType?: DeviceType;
+  readonly modelId?: ModelId;
+}
+
+/**
+ * Input for variant generation
+ */
+export interface ScreenVariantsInput {
+  readonly prompt: string;
+  readonly options?: VariantOptions;
+  readonly deviceType?: DeviceType;
+  readonly modelId?: ModelId;
+}
+
+/**
+ * Screen output with URLs
+ */
+export interface ScreenOutput {
+  readonly htmlUrl: string;
+  readonly imageUrl: string;
+}

package/src/domain/interfaces/stitch-service.interface.ts

@@ -3,31 +3,73 @@
  * @description Contract for Stitch SDK service implementations
  */
 
-import type { StitchProject, StitchProjectCreateInput, StitchProjectUpdateInput } from '../entities';
+import type {
+  StitchProject,
+  StitchScreen,
+  ScreenGenerateInput,
+  ScreenEditInput,
+  ScreenVariantsInput,
+  ScreenOutput,
+} from '../entities';
 
 export interface IStitchService {
   /**
-   * Read a project by ID
+   * List all accessible projects
    */
-  readProject(_projectId: string): Promise<StitchProject>;
+  listProjects(): Promise<StitchProject[]>;
 
   /**
-   * Write/create a new project
+   * Get a project reference by ID (no API call)
    */
-  writeProject(_input: StitchProjectCreateInput): Promise<StitchProject>;
+  getProject(projectId: string): StitchProject;
 
   /**
-   * Update an existing project
+   * List all screens in a project
    */
-  updateProject(_projectId: string, _input: StitchProjectUpdateInput): Promise<StitchProject>;
+  listScreens(projectId: string): Promise<StitchScreen[]>;
 
   /**
-   * Delete a project
+   * Get a specific screen by ID
    */
-  deleteProject(_projectId: string): Promise<void>;
+  getScreen(projectId: string, screenId: string): Promise<StitchScreen>;
 
   /**
-   * List all projects
+   * Generate a screen from a text prompt
    */
-  listProjects(): Promise<StitchProject[]>;
+  generateScreen(projectId: string, input: ScreenGenerateInput): Promise<StitchScreen>;
+
+  /**
+   * Edit a screen with a text prompt
+   */
+  editScreen(projectId: string, screenId: string, input: ScreenEditInput): Promise<StitchScreen>;
+
+  /**
+   * Generate design variants of a screen
+   */
+  generateVariants(projectId: string, screenId: string, input: ScreenVariantsInput): Promise<StitchScreen[]>;
+
+  /**
+   * Get the screen's HTML download URL
+   */
+  getScreenHtml(projectId: string, screenId: string): Promise<string>;
+
+  /**
+   * Get the screen's screenshot download URL
+   */
+  getScreenImage(projectId: string, screenId: string): Promise<string>;
+
+  /**
+   * Get both HTML and image URLs for a screen
+   */
+  getScreenOutput(projectId: string, screenId: string): Promise<ScreenOutput>;
+
+  /**
+   * Create a new project using MCP tool
+   */
+  createProject(title: string): Promise<{ projectId: string }>;
+
+  /**
+   * Call MCP tool directly
+   */
+  callTool<T = unknown>(name: string, args: Record<string, unknown>): Promise<T>;
 }

package/src/domains/core/index.ts

@@ -7,8 +7,16 @@
 // Domain entities
 export type {
   StitchProject,
-  StitchProjectCreateInput,
-  StitchProjectUpdateInput,
+  StitchScreen,
+  DeviceType,
+  ModelId,
+  CreativeRange,
+  VariantAspect,
+  VariantOptions,
+  ScreenGenerateInput,
+  ScreenEditInput,
+  ScreenVariantsInput,
+  ScreenOutput,
 } from '../../domain/entities';
 
 // Infrastructure services
@@ -20,4 +28,4 @@ export { useStitch } from '../../presentation/hooks';
 export type { UseStitchConfig, UseStitchReturn } from '../../presentation/hooks';
 
 // Constants
-export { STITCH_DEFAULT_CONFIG, STITCH_ERROR_MESSAGES } from '../../infrastructure/constants';
+export { STITCH_ERROR_MESSAGES } from '../../infrastructure/constants';

package/src/index.ts

@@ -13,6 +13,5 @@
  * - /init: Initialization utilities
  */
 
-// Re-export everything for backward compatibility
 export * from './domains/core';
 export * from './init';

package/src/infrastructure/constants/index.ts

@@ -3,4 +3,4 @@
  * @description Configuration constants
  */
 
-export { STITCH_DEFAULT_CONFIG, STITCH_ERROR_MESSAGES } from './stitch.constants';
+export { STITCH_ERROR_MESSAGES } from './stitch.constants';

package/src/infrastructure/constants/stitch.constants.ts

@@ -3,13 +3,8 @@
  * @description Configuration constants for Stitch SDK
  */
 
-export const STITCH_DEFAULT_CONFIG = {
-  API_TIMEOUT: 30000,
-  MAX_RETRIES: 3,
-} as const;
-
 export const STITCH_ERROR_MESSAGES = {
   NOT_INITIALIZED: 'StitchService not initialized. Call initialize() first.',
   INVALID_PROJECT_ID: 'Invalid project ID provided.',
-  NETWORK_ERROR: 'Network error occurred while communicating with Stitch SDK.',
 } as const;
+

package/src/infrastructure/services/stitch.service.ts

@@ -1,86 +1,228 @@
 /**
  * Stitch Service
  * @description Main service implementation for Google Labs Stitch SDK wrapper
- * @note This is a placeholder implementation. Replace with actual SDK calls when available.
  */
 
 import type { IStitchService } from '../../domain/interfaces';
-import type { StitchProject, StitchProjectCreateInput, StitchProjectUpdateInput } from '../../domain/entities';
+import type {
+  StitchProject,
+  StitchScreen,
+  DeviceType,
+  ModelId,
+  ScreenGenerateInput,
+  ScreenEditInput,
+  ScreenVariantsInput,
+  ScreenOutput,
+} from '../../domain/entities';
+import { STITCH_ERROR_MESSAGES } from '../constants';
+import { stitch, type Project as SDKProject } from '@google/stitch-sdk';
 
 export interface StitchServiceConfig {
   apiKey?: string;
   baseUrl?: string;
 }
 
+type DeviceTypeSDK = 'MOBILE' | 'DESKTOP' | 'TABLET' | 'AGNOSTIC';
+type ModelIdSDK = 'GEMINI_3_PRO' | 'GEMINI_3_FLASH';
+
+const DEVICE_TYPES_SDK: Record<DeviceType, DeviceTypeSDK> = {
+  MOBILE: 'MOBILE',
+  DESKTOP: 'DESKTOP',
+  TABLET: 'TABLET',
+  AGNOSTIC: 'AGNOSTIC',
+};
+
+const MODEL_IDS_SDK: Record<ModelId, ModelIdSDK> = {
+  GEMINI_3_PRO: 'GEMINI_3_PRO',
+  GEMINI_3_FLASH: 'GEMINI_3_FLASH',
+};
+
 class StitchService implements IStitchService {
   private config: StitchServiceConfig | null = null;
 
   initialize(config: StitchServiceConfig): void {
     this.config = config;
+    // SDK uses environment variable STITCH_API_KEY by default
   }
 
   isInitialized(): boolean {
     return this.config !== null;
   }
 
-  async readProject(projectId: string): Promise<StitchProject> {
+  private ensureInitialized(): void {
+    if (!this.isInitialized()) {
+      throw new Error(STITCH_ERROR_MESSAGES.NOT_INITIALIZED);
+    }
+  }
+
+  private validateProjectId(projectId: string): void {
+    if (!projectId || projectId.trim().length === 0) {
+      throw new Error(STITCH_ERROR_MESSAGES.INVALID_PROJECT_ID);
+    }
+  }
+
+  private validateScreenId(screenId: string): void {
+    if (!screenId || screenId.trim().length === 0) {
+      throw new Error('Invalid screen ID provided.');
+    }
+  }
+
+  async listProjects(): Promise<StitchProject[]> {
     this.ensureInitialized();
+    const projects = await stitch.projects();
+
+    return projects.map(
+      (p: { id: string; projectId: string }): StitchProject => ({
+        id: p.id,
+        projectId: p.projectId,
+      })
+    );
+  }
+
+  getProject(projectId: string): StitchProject {
+    this.ensureInitialized();
+    this.validateProjectId(projectId);
+
+    const project = stitch.project(projectId);
 
-    // TODO: Replace with actual SDK call
-    // Example: const response = await fetch(`${this.config.baseUrl}/projects/${projectId}`);
     return {
-      id: projectId,
-      name: 'Sample Project',
-      description: 'Placeholder project',
-      createdAt: new Date(),
-      updatedAt: new Date(),
+      id: project.id,
+      projectId: project.projectId,
     };
   }
 
-  async writeProject(input: StitchProjectCreateInput): Promise<StitchProject> {
-    this.ensureInitialized();
+  private async getSDKProject(projectId: string): Promise<SDKProject> {
+    this.validateProjectId(projectId);
+
+    const project = stitch.project(projectId);
+
+    // Force a call to validate the project exists
+    await project.screens();
 
-    // TODO: Replace with actual SDK call
-    const newProject: StitchProject = {
-      id: `project_${Date.now()}`,
-      ...input,
-      createdAt: new Date(),
-      updatedAt: new Date(),
+    return project;
+  }
+
+  async listScreens(projectId: string): Promise<StitchScreen[]> {
+    const project = await this.getSDKProject(projectId);
+    const screens = await project.screens();
+
+    return screens.map(
+      (s: { id: string; screenId: string; projectId: string }): StitchScreen => ({
+        id: s.id,
+        screenId: s.screenId,
+        projectId: s.projectId,
+      })
+    );
+  }
+
+  async getScreen(projectId: string, screenId: string): Promise<StitchScreen> {
+    this.validateScreenId(screenId);
+
+    const project = await this.getSDKProject(projectId);
+    const screen = await project.getScreen(screenId);
+
+    return {
+      id: screen.id,
+      screenId: screen.screenId,
+      projectId: screen.projectId,
     };
+  }
+
+  async generateScreen(projectId: string, input: ScreenGenerateInput): Promise<StitchScreen> {
+    const project = await this.getSDKProject(projectId);
 
-    return newProject;
+    const deviceTypeSDK = input.deviceType ? DEVICE_TYPES_SDK[input.deviceType] : undefined;
+    const screen = await project.generate(input.prompt, deviceTypeSDK);
+
+    return {
+      id: screen.id,
+      screenId: screen.screenId,
+      projectId: screen.projectId,
+    };
   }
 
-  async updateProject(projectId: string, input: StitchProjectUpdateInput): Promise<StitchProject> {
-    this.ensureInitialized();
+  async editScreen(
+    _projectId: string,
+    screenId: string,
+    input: ScreenEditInput
+  ): Promise<StitchScreen> {
+    this.validateScreenId(screenId);
+
+    const project = stitch.project(_projectId);
+    const screen = await project.getScreen(screenId);
+
+    const deviceTypeSDK = input.deviceType ? DEVICE_TYPES_SDK[input.deviceType] : undefined;
+    const modelIdSDK = input.modelId ? MODEL_IDS_SDK[input.modelId] : undefined;
+    const edited = await screen.edit(input.prompt, deviceTypeSDK, modelIdSDK);
 
-    // TODO: Replace with actual SDK call
-    const existing = await this.readProject(projectId);
     return {
-      ...existing,
-      ...input,
-      updatedAt: new Date(),
+      id: edited.id,
+      screenId: edited.screenId,
+      projectId: edited.projectId,
     };
   }
 
-  async deleteProject(_projectId: string): Promise<void> {
-    this.ensureInitialized();
+  async generateVariants(
+    _projectId: string,
+    screenId: string,
+    input: ScreenVariantsInput
+  ): Promise<StitchScreen[]> {
+    this.validateScreenId(screenId);
+
+    const project = stitch.project(_projectId);
+    const screen = await project.getScreen(screenId);
+
+    const deviceTypeSDK = input.deviceType ? DEVICE_TYPES_SDK[input.deviceType] : undefined;
+    const modelIdSDK = input.modelId ? MODEL_IDS_SDK[input.modelId] : undefined;
 
-    // TODO: Replace with actual SDK call
-    // Placeholder: no-op delete operation
+    const variants = await screen.variants(input.prompt, input.options, deviceTypeSDK, modelIdSDK);
+
+    return variants.map(
+      (v: { id: string; screenId: string; projectId: string }): StitchScreen => ({
+        id: v.id,
+        screenId: v.screenId,
+        projectId: v.projectId,
+      })
+    );
   }
 
-  async listProjects(): Promise<StitchProject[]> {
+  async getScreenHtml(_projectId: string, screenId: string): Promise<string> {
+    this.validateScreenId(screenId);
+
+    const project = stitch.project(_projectId);
+    const screen = await project.getScreen(screenId);
+
+    return await screen.getHtml();
+  }
+
+  async getScreenImage(_projectId: string, screenId: string): Promise<string> {
+    this.validateScreenId(screenId);
+
+    const project = stitch.project(_projectId);
+    const screen = await project.getScreen(screenId);
+
+    return await screen.getImage();
+  }
+
+  async getScreenOutput(projectId: string, screenId: string): Promise<ScreenOutput> {
+    const [htmlUrl, imageUrl] = await Promise.all([
+      this.getScreenHtml(projectId, screenId),
+      this.getScreenImage(projectId, screenId),
+    ]);
+
+    return { htmlUrl, imageUrl };
+  }
+
+  async createProject(title: string): Promise<{ projectId: string }> {
     this.ensureInitialized();
+    const result = await stitch.callTool<{ projectId: string }>('create_project', { title });
 
-    // TODO: Replace with actual SDK call
-    return [];
+    return result;
   }
 
-  private ensureInitialized(): void {
-    if (!this.isInitialized()) {
-      throw new Error('StitchService not initialized. Call initialize() first.');
-    }
+  async callTool<T = unknown>(name: string, args: Record<string, unknown>): Promise<T> {
+    this.ensureInitialized();
+    return await stitch.callTool<T>(name, args);
   }
 }
 

package/src/presentation/hooks/useStitch.ts

@@ -4,7 +4,14 @@
  */
 
 import { useCallback, useEffect, useState } from 'react';
-import type { StitchProject, StitchProjectCreateInput, StitchProjectUpdateInput } from '../../domain/entities';
+import type {
+  StitchProject,
+  StitchScreen,
+  ScreenGenerateInput,
+  ScreenEditInput,
+  ScreenVariantsInput,
+  ScreenOutput,
+} from '../../domain/entities';
 import { stitchService } from '../../infrastructure/services';
 
 export interface UseStitchConfig {
@@ -16,11 +23,18 @@ export interface UseStitchConfig {
 export interface UseStitchReturn {
   isLoading: boolean;
   error: Error | null;
-  readProject: (_projectId: string) => Promise<StitchProject>;
-  writeProject: (_input: StitchProjectCreateInput) => Promise<StitchProject>;
-  updateProject: (_projectId: string, _input: StitchProjectUpdateInput) => Promise<StitchProject>;
-  deleteProject: (_projectId: string) => Promise<void>;
   listProjects: () => Promise<StitchProject[]>;
+  getProject: (projectId: string) => StitchProject;
+  listScreens: (projectId: string) => Promise<StitchScreen[]>;
+  getScreen: (projectId: string, screenId: string) => Promise<StitchScreen>;
+  generateScreen: (projectId: string, input: ScreenGenerateInput) => Promise<StitchScreen>;
+  editScreen: (projectId: string, screenId: string, input: ScreenEditInput) => Promise<StitchScreen>;
+  generateVariants: (projectId: string, screenId: string, input: ScreenVariantsInput) => Promise<StitchScreen[]>;
+  getScreenHtml: (projectId: string, screenId: string) => Promise<string>;
+  getScreenImage: (projectId: string, screenId: string) => Promise<string>;
+  getScreenOutput: (projectId: string, screenId: string) => Promise<ScreenOutput>;
+  createProject: (title: string) => Promise<{ projectId: string }>;
+  callTool: <T = unknown>(name: string, args: Record<string, unknown>) => Promise<T>;
 }
 
 export function useStitch(config?: UseStitchConfig): UseStitchReturn {
@@ -31,16 +45,16 @@ export function useStitch(config?: UseStitchConfig): UseStitchReturn {
     if (config?.autoInitialize && config.apiKey) {
       stitchService.initialize({ apiKey: config.apiKey, baseUrl: config.baseUrl });
     }
-  }, [config]);
+  }, [config?.apiKey, config?.baseUrl, config?.autoInitialize]);
 
-  const readProject = useCallback(async (projectId: string) => {
+  const listProjects = useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
-      const project = await stitchService.readProject(projectId);
-      return project;
+      const projects = await stitchService.listProjects();
+      return projects;
     } catch (err) {
-      const error = err instanceof Error ? err : new Error('Failed to read project');
+      const error = err instanceof Error ? err : new Error('Failed to list projects');
       setError(error);
       throw error;
     } finally {
@@ -48,14 +62,18 @@ export function useStitch(config?: UseStitchConfig): UseStitchReturn {
     }
   }, []);
 
-  const writeProject = useCallback(async (input: StitchProjectCreateInput) => {
+  const getProject = useCallback((projectId: string) => {
+    return stitchService.getProject(projectId);
+  }, []);
+
+  const listScreens = useCallback(async (projectId: string) => {
     setIsLoading(true);
     setError(null);
     try {
-      const project = await stitchService.writeProject(input);
-      return project;
+      const screens = await stitchService.listScreens(projectId);
+      return screens;
     } catch (err) {
-      const error = err instanceof Error ? err : new Error('Failed to write project');
+      const error = err instanceof Error ? err : new Error('Failed to list screens');
       setError(error);
       throw error;
     } finally {
@@ -63,14 +81,14 @@ export function useStitch(config?: UseStitchConfig): UseStitchReturn {
     }
   }, []);
 
-  const updateProject = useCallback(async (projectId: string, input: StitchProjectUpdateInput) => {
+  const getScreen = useCallback(async (projectId: string, screenId: string) => {
     setIsLoading(true);
     setError(null);
     try {
-      const project = await stitchService.updateProject(projectId, input);
-      return project;
+      const screen = await stitchService.getScreen(projectId, screenId);
+      return screen;
     } catch (err) {
-      const error = err instanceof Error ? err : new Error('Failed to update project');
+      const error = err instanceof Error ? err : new Error('Failed to get screen');
       setError(error);
       throw error;
     } finally {
@@ -78,13 +96,14 @@ export function useStitch(config?: UseStitchConfig): UseStitchReturn {
     }
   }, []);
 
-  const deleteProject = useCallback(async (projectId: string) => {
+  const generateScreen = useCallback(async (projectId: string, input: ScreenGenerateInput) => {
     setIsLoading(true);
     setError(null);
     try {
-      await stitchService.deleteProject(projectId);
+      const screen = await stitchService.generateScreen(projectId, input);
+      return screen;
     } catch (err) {
-      const error = err instanceof Error ? err : new Error('Failed to delete project');
+      const error = err instanceof Error ? err : new Error('Failed to generate screen');
       setError(error);
       throw error;
     } finally {
@@ -92,14 +111,110 @@ export function useStitch(config?: UseStitchConfig): UseStitchReturn {
     }
   }, []);
 
-  const listProjects = useCallback(async () => {
+  const editScreen = useCallback(
+    async (projectId: string, screenId: string, input: ScreenEditInput) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const screen = await stitchService.editScreen(projectId, screenId, input);
+        return screen;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error('Failed to edit screen');
+        setError(error);
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  const generateVariants = useCallback(
+    async (projectId: string, screenId: string, input: ScreenVariantsInput) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const variants = await stitchService.generateVariants(projectId, screenId, input);
+        return variants;
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error('Failed to generate variants');
+        setError(error);
+        throw error;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    []
+  );
+
+  const getScreenHtml = useCallback(async (projectId: string, screenId: string) => {
     setIsLoading(true);
     setError(null);
     try {
-      const projects = await stitchService.listProjects();
-      return projects;
+      const htmlUrl = await stitchService.getScreenHtml(projectId, screenId);
+      return htmlUrl;
     } catch (err) {
-      const error = err instanceof Error ? err : new Error('Failed to list projects');
+      const error = err instanceof Error ? err : new Error('Failed to get screen HTML');
+      setError(error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const getScreenImage = useCallback(async (projectId: string, screenId: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const imageUrl = await stitchService.getScreenImage(projectId, screenId);
+      return imageUrl;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to get screen image');
+      setError(error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const getScreenOutput = useCallback(async (projectId: string, screenId: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const output = await stitchService.getScreenOutput(projectId, screenId);
+      return output;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to get screen output');
+      setError(error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const createProject = useCallback(async (title: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await stitchService.createProject(title);
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to create project');
+      setError(error);
+      throw error;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const callTool = useCallback(async <T = unknown>(name: string, args: Record<string, unknown>) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await stitchService.callTool<T>(name, args);
+      return result;
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(`Failed to call tool: ${name}`);
       setError(error);
       throw error;
     } finally {
@@ -110,10 +225,17 @@ export function useStitch(config?: UseStitchConfig): UseStitchReturn {
   return {
     isLoading,
     error,
-    readProject,
-    writeProject,
-    updateProject,
-    deleteProject,
     listProjects,
+    getProject,
+    listScreens,
+    getScreen,
+    generateScreen,
+    editScreen,
+    generateVariants,
+    getScreenHtml,
+    getScreenImage,
+    getScreenOutput,
+    createProject,
+    callTool,
   };
 }

package/src/infrastructure/utils/index.ts

@@ -1,6 +0,0 @@
-/**
- * Infrastructure Utils
- * @description Utility functions
- */
-
-// Placeholder for future utility functions

package/src/presentation/components/index.ts

@@ -1,6 +0,0 @@
-/**
- * Presentation Components
- * @description React components for Stitch SDK
- */
-
-// Placeholder for future components

package/src/presentation/stores/index.ts

@@ -1,6 +0,0 @@
-/**
- * Presentation Stores
- * @description State management stores
- */
-
-// Placeholder for future stores