CODITECT Development Studio

A general-purpose AI development UI with chat interface and visualization capabilities, designed for building and visualizing development artifacts.

Features

Chat Interface (Left Panel)

• Multi-session chat management
• Message history with timestamps
• Token and duration metadata
• Quick action suggestions
• File and image attachment support

Visualization Panel (Right Panel)

• Multiple visualization types:
  • Workflow diagrams
  • Code/json viewers
  • Markdown rendering
  • Image previews
  • Custom previews
• Navigation history (back/forward)
• Download and export options
• Tag-based organization

Layout Modes

• Split View: Chat and visualization side by side
• Chat Only: Focus on conversation
• Visualization Only: Full focus on output
• Fullscreen: Open visualization in separate tab

Resizable Panels

• Drag the handle between panels to resize
• Minimum width constraints for usability
• Persisted layout preferences

Getting Started

Installation

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

Usage

1. Open the app at http://localhost:3456
2. Start chatting in the left panel
3. Visualizations will appear in the right panel
4. Use the panel mode buttons to change layout
5. Click the fullscreen button to open visualization in a new tab

Architecture

Technology Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• State: Zustand with persistence
• UI Components: Radix UI primitives

Project Structure

src/
├── app/                    # Next.js app routes
│   ├── page.tsx           # Main split-view layout
│   ├── viz/page.tsx       # Fullscreen visualization
│   ├── layout.tsx         # Root layout
│   └── globals.css        # Global styles
├── components/
│   ├── ui/                # Shared UI components
│   ├── chat/              # Chat panel components
│   └── visualization/     # Visualization panel
├── lib/
│   ├── utils.ts           # Utility functions
│   ├── store.ts           # Zustand state management
│   └── demo-data.ts       # Sample data
└── types/
    └── index.ts           # TypeScript types

State Management

The app uses Zustand for state management with the following structure:

interface AppState {
  // Chat
  sessions: ChatSession[];
  currentSessionId: string | null;
  isLoading: boolean;
  
  // Visualization
  currentVisualization: Visualization | null;
  visualizationHistory: Visualization[];
  
  // UI State
  panelMode: 'split' | 'chat-only' | 'viz-only';
  chatWidth: number;
  sidebarCollapsed: boolean;
}

Customization

Theming

The UI uses a dark theme inspired by GxP LIMS:

• Background: Dark navy (hsl(222, 47%, 11%))
• Primary: Green accent (hsl(142, 71%, 45%))
• Accent: Gold highlights (hsl(45, 93%, 47%))

Edit tailwind.config.ts to customize colors.

Adding New Visualization Types

1. Add type to VisualizationType in src/types/index.ts
2. Add icon mapping in viz-panel.tsx
3. Create renderer component
4. Add to VisualizationContent switch statement

Integration

Connecting to LLM API

Replace the simulated response in store.ts:

sendMessage: async (content: string) => {
  // Add user message
  // ...
  
  // Call your LLM API
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ message: content }),
  });
  
  const data = await response.json();
  
  // Add assistant message with visualization
  // ...
}

Adding Visualizations from API

// In your API response handler
const visualization: Visualization = {
  id: generateId(),
  type: 'workflow',
  title: 'Generated Workflow',
  content: apiResponse.workflowData,
  metadata: {
    source: 'API',
    version: '1.0.0',
  },
};

useAppStore.getState().pushVisualization(visualization);

Keyboard Shortcuts

Shortcut	Action
Enter	Send message
Shift+Enter	New line in message
Esc	Close fullscreen visualization

License

Proprietary - CODITECT