Architektur

app/start/
├── page.tsx              # Hauptseite mit Providern
├── components/
│   ├── TopHeader.tsx     # Navigations-Header
│   ├── LeftSidebar.tsx   # Prompt und Einstellungen
│   ├── TldrawCanvas.tsx  # tldraw-Integration
│   ├── SandboxPanel.tsx  # Vorschau und Terminal
│   ├── SeemodAIPanel.tsx # KI-Chat-Interface
│   ├── ModelSelector.tsx # KI-Modell-Auswahl
│   └── brainstorm/       # Plan-Modus Komponenten
└── lib/
    ├── sandbox-context.tsx
    ├── generation-context.tsx
    └── editor-context.tsx

// lib/sandbox/factory.ts
export function createSandboxProvider(): SandboxProvider {
  const provider = process.env.SANDBOX_PROVIDER || 'modal';
  
  switch (provider) {
    case 'modal':
      return new ModalProvider();
    case 'e2b':
      return new E2BProvider();
    case 'vercel':
      return new VercelProvider();
    default:
      throw new Error(`Unbekannter Anbieter: ${provider}`);
  }
}

// Mit @opencode-ai/sdk
const client = createOpencodeClient({ baseUrl: opencodeUrl });

// Session-Verwaltung
const session = await client.session.create({
  body: { title: 'Seemodo Session' }
});

// Prompt senden
await client.session.prompt({
  path: { id: session.id },
  body: { 
    parts: [{ type: 'text', text: message }],
    model: { providerID: 'vercel', modelID: 'claude-sonnet-4' }
  }
});

// Event-Stream
const eventSource = new EventSource(`${opencodeUrl}/event`);
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // Tool-Aufrufe, Text, Fehler verarbeiten
};

seemodo-app/
├── app/                        # Next.js App Router
│   ├── page.tsx               # Startseite
│   ├── layout.tsx             # Root-Layout
│   ├── start/                 # Visueller Canvas
│   │   ├── page.tsx
│   │   ├── components/
│   │   └── lib/
│   ├── generation/            # Code-IDE
│   ├── account/               # Benutzer-Account
│   └── api/                   # API-Routen
├── components/                 # Gemeinsame Komponenten
│   ├── ui/                    # Basis-UI-Komponenten
│   └── shared/                # Gemeinsame Features
├── lib/                       # Utilities und Logik
│   ├── sandbox/               # Sandbox-Anbieter
│   ├── ai/                    # KI-Konfiguration
│   ├── subscription/          # Credits-System
│   └── contexts/              # React-Contexts
├── config/                    # Konfiguration
│   └── app.config.ts
├── modal-backend/             # Modal Sandbox-Code
│   ├── main.py               # Modal-App
│   ├── server.py             # FastAPI-Server
│   ├── agent.py              # KI-Agent
│   └── vite-app/             # Template-Projekt
├── styles/                    # CSS und Design-System
└── types/                     # TypeScript-Typen