@ottocode/web-sdk

Reusable React components, hooks, and utilities for building ottocode web interfaces.

Installation

npm install @ottocode/web-sdk
# or
bun add @ottocode/web-sdk

Setup

Tailwind CSS Configuration

The components in this package use Tailwind CSS classes. You must configure Tailwind to scan the web-sdk package for class names.

In your tailwind.config.js (or tailwind.config.ts):

export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    // ⚠️ IMPORTANT: Include web-sdk package
    './node_modules/@ottocode/web-sdk/dist/**/*.{js,jsx}',
    // Or if using a monorepo with workspace:*
    '../../packages/web-sdk/src/**/*.{js,ts,jsx,tsx}',
  ],
  // ... rest of your config
};

CSS Variables

The components use CSS custom properties for theming. Add these to your global CSS:

@layer base {
  :root {
    --background: 220 25% 95%;
    --foreground: 220 10% 15%;
    --card: 220 25% 98%;
    --card-foreground: 220 10% 15%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --border: 220 15% 89%;
    --input: 220 15% 89%;
    --ring: 222.2 84% 4.9%;
    /* ... other variables */
  }

  .dark {
    --background: 240 10% 8%;
    --foreground: 0 0% 98%;
    /* ... dark theme variables */
  }
}

See the apps/web/src/index.css file for the complete set of CSS variables.

Usage

Components

import { 
  ChatInput, 
  ChatInputContainer,
  MessageThread,
  SessionListContainer 
} from '@ottocode/web-sdk/components';

function MyApp() {
  return (
    <div>
      <SessionListContainer 
        activeSessionId={sessionId}
        onSelectSession={handleSelect}
      />
      <MessageThread messages={messages} />
      <ChatInputContainer sessionId={sessionId} />
    </div>
  );
}

Hooks

import { 
  useSessions, 
  useMessages, 
  useSessionStream,
  useTheme 
} from '@ottocode/web-sdk/hooks';

function MyComponent() {
  const { data: sessions } = useSessions();
  const { data: messages } = useMessages(sessionId);
  const { theme, toggleTheme } = useTheme();
  
  // ...
}

Stores

import { useGitStore, useSidebarStore } from '@ottocode/web-sdk/stores';

function MyComponent() {
  const gitFiles = useGitStore((state) => state.files);
  const isSidebarCollapsed = useSidebarStore((state) => state.collapsed);
  
  // ...
}

Utilities

import { apiClient, SSEClient } from '@ottocode/web-sdk/lib';

// Use the API client
const sessions = await apiClient.getSessions();

// Use the SSE client for streaming
const sseClient = new SSEClient('/v1/sessions/123/stream');
sseClient.onMessage((data) => console.log(data));

Features

• 🎨 Pre-built Components - Chat interface, message threads, session management
• 🪝 Custom Hooks - React Query hooks for sessions, messages, and real-time streaming
• 🗄️ State Management - Zustand stores for git and sidebar state
• 🛠️ Utilities - API client and SSE client for backend communication
• 📘 TypeScript - Full type definitions included
• 🎨 Tailwind CSS - Styled with Tailwind utility classes

Package Structure

@ottocode/web-sdk/
├── components/     # React components
├── hooks/          # React hooks
├── lib/            # Utilities (API client, SSE client, config)
├── stores/         # Zustand stores
└── types/          # TypeScript type definitions

Troubleshooting

Styles not working

If the components appear unstyled:

1. Check Tailwind content paths: Make sure your tailwind.config.js includes the web-sdk package
2. Verify CSS variables: Ensure you've added the required CSS custom properties
3. Import global styles: Make sure you're importing your global CSS file with Tailwind directives
4. Restart dev server: After config changes, restart your development server

Component not found

Make sure you're importing from the correct path:

// ✅ Correct
import { Button } from '@ottocode/web-sdk/components';

// ❌ Wrong
import { Button } from '@ottocode/web-sdk';

Related Packages

• @ottocode/web-ui - Pre-built static web app
• @ottocode/sdk - Node.js SDK for ottocode
• @ottocode/api - API client types
• @ottocode/server - Backend server

License

MIT