Genesis Studio Frontend

A React-based frontend package for Genesis Studio, built on top of Langflow. This package provides a complete visual flow builder and AI agent creation interface that can be integrated into other applications.

🚀 Quick Start

Installation

npm install genesis-studio-v2

Basic Usage

import React from 'react';
import { GenesisStudioRouter } from 'genesis-studio-v2';

function App() {
  return (
    <GenesisStudioRouter
      baseName="/studio"
      envVariables={{
        apiBaseUrl: "https://your-api-url.com",
        genesisBaseUrl: "https://your-app-url.com", 
        chatBundleUrl: "https://your-chat-bundle-url.com",
        token: localStorage.getItem("accessToken") || "",
      }}
    />
  );
}

📋 Environment Variables

The package requires runtime environment configuration to work properly with different backends and environments.

Required Variables

| Variable | Description | Example | | ---------------- | ------------------------- | ---------------------------------- | | apiBaseUrl | Langflow backend API URL | https://api-langflow.example.com | | genesisBaseUrl | Genesis frontend base URL | https://genesis.example.com | | chatBundleUrl | Chat widget bundle URL | https://chat.example.com | | token | Authentication token | eyJhbGciOiJIUzI1NiIs... |

Integration Example

// In your parent application (e.g., genesis-frontend)
import { GenesisStudioRouter } from 'genesis-studio-v2';
import { envConfig } from './config/env';

<GenesisStudioRouter
  baseName="/genesis-studio-container"
  envVariables={{
    apiBaseUrl: envConfig.langflowServiceUrl,
    genesisBaseUrl: envConfig.apiBaseUrl,
    chatBundleUrl: envConfig.chatBundleUrl,
    token: localStorage.getItem("accessToken") || "",
  }}
/>

🛠️ Development

Prerequisites

• Node.js 18+
• npm or pnpm
• Access to a Langflow backend instance

Local Development Setup

1. Clone and install dependencies:

   git clone <repository-url>
   cd genesis-studio-frontend
   npm install

2. Start development server:

   # Using default local backend
   npm run dev:local
      
   # Using custom backend URL
   VITE_BACKEND_URL=https://your-api-url.com npm run dev:local

3. Open browser:

   • Navigate to http://localhost:3000
   • The console will show environment configuration debug info

Available Scripts

| Command | Description | | ---------------------- | -------------------------------------------- | | npm start | Start development server (same as dev:local) | | npm run dev:local | Start with local backend configuration | | npm run build | Build production npm package | | npm run serve | Preview production build | | npm run format | Format code with Prettier | | npm run check-format | Check code formatting | | npm run type-check | Run TypeScript type checking |

Environment Variables for Development

# .env.local example
VITE_BACKEND_URL=http://localhost:7860
VITE_PROXY_TARGET=http://localhost:7860

📦 Building & Publishing

Build for NPM

npm run build

This creates:

• dist/ - Built package files
• dist/types/ - TypeScript declarations
• Library builds optimized for npm distribution

Package Structure

dist/
├── index.es.js      # ES modules build
├── index.umd.js     # UMD build  
└── types/           # TypeScript declarations
    └── index.d.ts

Publishing

# Version bump
npm version patch|minor|major

# Publish to npm
npm publish

🔧 Configuration & Customization

Styling

The package includes comprehensive styling that can be customized:

• Tailwind CSS - Main styling framework
• CSS Variables - For theme customization
• Component Classes - For specific component styling

API Integration

The package automatically handles:

• Authentication via bearer tokens
• Request/Response interceptors
• Error handling and retries
• Streaming responses for real-time updates

🔍 Debugging & Troubleshooting

Environment Debug Mode

In development, the package automatically logs environment configuration:

// Console output
🚀 Genesis Studio Frontend - Local Development Mode
📋 Environment Variables: { apiBaseUrl: "...", ... }
🔍 Genesis Studio Environment Configuration Debug
  ✅ Environment config successfully loaded
  📊 Dynamic URL Getters:
    🔗 API Base URL: https://api-langflow.example.com
    🔐 Auth Token: ***PRESENT***

Common Issues

1. API calls to localhost instead of configured URL

   • Verify envVariables.apiBaseUrl is set correctly
   • Check browser network tab for actual request URLs

2. Authentication errors

   • Ensure envVariables.token contains valid access token
   • Check token expiration and refresh logic

3. Build errors

   • Run npm run type-check to identify TypeScript issues
   • Ensure all peer dependencies are installed

4. Package import errors

   • Verify correct import: import { GenesisStudioRouter } from 'genesis-studio-v2'
   • Check that React 18+ is installed as peer dependency

Debug Tools

• Browser Console - Environment configuration logs
• Network Tab - Verify API request URLs
• React DevTools - Component state inspection

📚 Documentation

• Environment Variables Guide - Detailed configuration documentation
• API Reference - Component props and methods (if available)
• Development Guide - Local development setup (if available)

🤝 Integration Examples

With Genesis Frontend

// genesis-frontend integration
import { GenesisStudioPackageContainer } from './containers';

// Container component that provides environment variables
const GenesisStudioPackageContainer = () => {
  const accessToken = localStorage.getItem("accessToken") || "";
  
  return (
    <GenesisStudioRouter
      baseName="/genesis-studio-container"
      envVariables={{
        apiBaseUrl: envConfig.langflowServiceUrl,
        genesisBaseUrl: envConfig.apiBaseUrl, 
        chatBundleUrl: envConfig.chatBundleUrl,
        token: accessToken,
      }}
    />
  );
};

Standalone Usage

// Standalone React app
import React from 'react';
import ReactDOM from 'react-dom/client';
import { GenesisStudioRouter } from 'genesis-studio-v2';

const App = () => (
  <GenesisStudioRouter
    envVariables={{
      apiBaseUrl: process.env.REACT_APP_API_URL,
      genesisBaseUrl: process.env.REACT_APP_GENESIS_URL,
      chatBundleUrl: process.env.REACT_APP_CHAT_URL,
      token: "",
    }}
  />
);

ReactDOM.createRoot(document.getElementById('root')).render(<App />);

🔧 Technical Architecture

• Framework: React 18 with TypeScript
• Build Tool: Vite with library mode
• Styling: Tailwind CSS + CSS-in-JS
• State Management: Zustand
• HTTP Client: Axios with interceptors
• Flow Editor: @xyflow/react (ReactFlow)
• UI Components: Radix UI + Custom components

📄 License

This project is licensed under the MIT License.

🆘 Support

For issues and support:

1. Check the troubleshooting section above
2. Review environment variables documentation
3. Open an issue in the project repository
4. Contact the development team

Genesis Studio Frontend - Empowering visual AI agent creation and flow building. 🚀