@cloudwarriors-ai/studio-frontend

Embeddable React component library for Studio AI code generation service.

Overview

This package provides React components and hooks that allow any React application to integrate with the Studio API for AI-powered code generation. The components are framework-agnostic and work with any React setup (Vite, Next.js, Create React App, etc.).

Features

• Zero Framework Coupling: No Redux, no assumptions about your backend
• Standalone Service Model: Components talk to Studio's API, not your backend
• Type-Safe: Full TypeScript support with exported types
• SSE Streaming: Real-time progress updates during code generation
• Voice Input: Optional speech-to-text integration
• Customizable: Use the full StudioPage or build your own UI with our hooks

Installation

npm install @cloudwarriors-ai/studio-frontend

Quick Start

import { StudioProvider, StudioPage } from "@cloudwarriors-ai/studio-frontend";

function App() {
  return (
    <StudioProvider
      config={{
        studioApiUrl: "http://localhost:8100/api",
        projectId: "proj_abc123",
        apiKey: "sk_studio_xyz789",
        user: {
          email: "[email protected]",
          name: "User Name",
        },
      }}
    >
      <StudioPage />
    </StudioProvider>
  );
}

API

StudioProvider

The root component that provides Studio configuration to all child components.

Props:

• config: StudioConfig - Configuration object with Studio connection details

StudioConfig

interface StudioConfig {
  studioApiUrl: string; // e.g. 'http://localhost:8100/api'
  projectId: string; // Studio project ID
  apiKey: string; // Studio API key
  user: {
    email: string;
    name: string;
  };
  theme?: {
    // Optional theme customization
    primary?: string;
    background?: string;
    card?: string;
  };
}

Hooks

useStudioClient()

Returns the Studio API client instance for making requests.

const client = useStudioClient();

// Submit a change request
const request = await client.submitRequest({
  mode: "designer",
  request_text: "Add a dark mode toggle",
});

// Get all requests
const requests = await client.getRequests();

useSSE(url, options)

Connect to Server-Sent Events stream for real-time updates.

const { disconnect, reconnect } = useSSE(
  client.getRequestStreamUrl(requestId),
  {
    onMessage: (event) => console.log("SSE event:", event),
    onError: (error) => console.error("SSE error:", error),
    onOpen: () => console.log("SSE connected"),
  },
);

useVoiceRecognition(options)

Web Speech API hook for voice input.

const {
  isListening,
  transcript,
  interimTranscript,
  startListening,
  stopListening,
} = useVoiceRecognition({
  language: "en-US",
  onTranscript: (text, isFinal) => {
    if (isFinal) console.log("Final:", text);
  },
});

Components

StudioPage

Complete UI for Studio - mode selector, request form, and request list.

<StudioPage />

ThinkingIndicator

Animated "thinking" indicator with random messages.

<ThinkingIndicator variant="default" />

VoiceInput

Microphone button with live transcription.

<VoiceInput
  onTranscriptAppend={(text) => setMessage(prev => prev + ' ' + text)}
  disabled={isSubmitting}
/>

Building Custom UIs

You can build your own UI using our hooks:

import { useStudioClient } from '@cloudwarriors-ai/studio-frontend';

function CustomStudioUI() {
  const client = useStudioClient();

  const handleSubmit = async (text: string) => {
    const request = await client.submitRequest({
      mode: 'developer',
      request_text: text
    });
    // Handle request...
  };

  return (
    // Your custom UI...
  );
}

Architecture

Studio Frontend follows these principles:

1. No Backend Assumptions: Components only talk to Studio's API
2. Provider Pattern: Single StudioProvider for configuration
3. Composable: Use full StudioPage or individual components
4. Type-Safe: All API calls and data structures are typed

License

MIT