Creating the Sabrina AI Website

The Sabrina AI project represents a significant achievement in my development career: creating a sophisticated AI-powered platform that seamlessly blends intuitive UI/UX design with advanced 3D visualization capabilities.

As the lead developer for Sabrina AI, I built a next-generation website that showcases AI capabilities while providing an immersive user experience. The platform features intelligent chat interactions, 3D model visualization, and a sleek, modern interface that adapts to both desktop and mobile environments.

The project required a comprehensive tech stack to handle both the AI integration and advanced visualization needs.

Next.js 14 and React

Next.js 14 provided the foundation for the application, offering server-side rendering capabilities that optimize performance and ensure excellent SEO. The React ecosystem enabled the creation of reusable, dynamic components across the platform.

Example: Page Layout Structure

export default function Home() {
  return (
    <PageLayout className="flex flex-col overflow-auto">
      {/* Hero section with enhanced visual appeal */}
      <div className="relative overflow-hidden">
        <Hero />
        <div className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-slate-50 to-transparent" />
      </div>

      {/* Features with visual separator */}
      <div className="relative">
        <div className="absolute top-0 inset-x-0 h-40 bg-gradient-to-b from-slate-50 to-white -z-10" />
        <Features />
      </div>

      {/* Team section with enhanced styling */}
      <div className="relative">
        <div className="absolute top-0 inset-x-0 h-40 bg-gradient-to-b from-white to-slate-50 -z-10" />
        <Team />
      </div>

      {/* Request demo with improved visual appeal */}
      <RequestDemo />
    </PageLayout>
  );
}

Tailwind CSS for Responsive Design

Tailwind CSS was instrumental in creating a responsive, visually consistent interface that adapts seamlessly to various screen sizes and devices.

Example: Responsive Component Styling

const FeatureCard = ({ 
  icon, 
  title, 
  description, 
  className 
}: FeatureCardProps) => {
  return (
    <div className={cn(
      "flex flex-col items-center text-center p-6 rounded-xl bg-white shadow-sm border border-slate-100 transition-all duration-200 hover:shadow-md",
      className
    )}>
      <div className="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-primary/10 text-primary">
        {icon}
      </div>
      <h3 className="text-xl font-semibold mb-2">{title}</h3>
      <p className="text-slate-600">{description}</p>
    </div>
  );
};

React Three Fiber for 3D Visualization

One of the standout features of the Sabrina AI website is the interactive 3D visualization system, implemented using React Three Fiber and Drei.

Example: 3D Model Viewer Implementation

export default function ModelViewer({
  selectedLayers,
  activeRoom = ROOMS[0],
  className,
  onRoomChange,
}: ModelViewerProps) {
  const [isLocked, setIsLocked] = useState(false);
  const [minimapVisible, setMinimapVisible] = useState(true);

  const handleRoomSelect = (room: Room) => {
    setIsLocked(false);
    if (onRoomChange) {
      onRoomChange(room);
    }
  };

  return (
    <div className={cn("relative w-full h-full", className)}>
      <Canvas shadows camera={{ position: [5, 5, 5], fov: 50 }}>
        <ambientLight intensity={0.8} />
        <directionalLight
          position={[10, 10, 5]}
          intensity={1}
          castShadow
          shadow-mapSize-width={2048}
          shadow-mapSize-height={2048}
        />
        <Suspense fallback={null}>
          {selectedLayers.map((layer, index) => {
            if (layer.type === "floor") {
              return (
                <FloorPlan
                  key={index}
                  url={layer.url}
                  position={layer.position}
                  rotation={layer.rotation}
                  scale={layer.scale}
                />
              );
            } else if (layer.type === "furniture" && layer.isFurniture) {
              return (
                <Furniture
                  key={index}
                  url={layer.url}
                  position={layer.position}
                  rotation={layer.rotation}
                  scale={layer.scale}
                />
              );
            } else if (layer.type === "pointcloud") {
              return (
                <PointCloud
                  key={index}
                  url={layer.url}
                  position={layer.position}
                  rotation={layer.rotation}
                  scale={layer.scale}
                />
              );
            } else {
              return (
                <Model
                  key={index}
                  url={layer.url}
                  position={layer.position}
                  rotation={layer.rotation}
                  scale={layer.scale}
                  collision={layer.collision}
                />
              );
            }
          })}
        </Suspense>
        <RoomCamera activeRoom={activeRoom} isLocked={isLocked} />
        <Grid infiniteGrid />
      </Canvas>

      {minimapVisible && (
        <Minimap
          rooms={ROOMS}
          activeRoom={activeRoom}
          onRoomSelect={handleRoomSelect}
        />
      )}
    </div>
  );
}

OpenAI Integration for Intelligent Interactions

The core of Sabrina AI is its intelligent chat system, implemented using the OpenAI SDK.

Example: Chat Implementation

export default function Chat() {
  const [currentProject, setCurrentProject] = useState<Project>(DEFAULT_PROJECT);
  const [chatKey, setChatKey] = useState<number>(0);
  const [hydrated, setHydrated] = useState(false);
  const [isDesktop, setIsDesktop] = useState(false);
  const [chatWidthRatio, setChatWidthRatio] = useState(DEFAULT_CHAT_WIDTH_RATIO);
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [files, setFiles] = useState<File[]>([]);

  // UseChat hook from AI SDK to handle chat interactions
  const chatConfig = useChat({
    api: "/api/chat",
    body: {
      projectId: currentProject.id,
      fileIds: files.map(file => file.name),
    },
    id: currentProject.id,
    initialMessages: [],
    onResponse: (response) => {
      if (response.status === 401) {
        // Handle unauthorized
      }
    },
    onError: (error) => {
      console.error("Chat error:", error);
    },
  });

  // Callbacks and UI logic for handling chat interactions
  // ...
}

The Sabrina AI project came with unique challenges, particularly in integrating AI capabilities with interactive 3D visualizations.

User-Centric Development

The development focused on creating an intuitive experience, with user feedback guiding iteration at each stage. This ensured that the complex features remained accessible to users of all technical backgrounds.

Performance Optimization

Rendering 3D models while maintaining AI responsiveness required careful optimization:

// Performance optimization for 3D rendering
const PointCloud = memo(({ url, position, rotation, scale }: LayerProps) => {
  const [points, setPoints] = useState<THREE.BufferGeometry | null>(null);
  
  useEffect(() => {
    const loader = new CustomPLYLoader();
    loader.load(url, (geometry) => {
      geometry.computeVertexNormals();
      setPoints(geometry);
    });
  }, [url]);

  if (!points) return null;

  return (
    <points position={position} rotation={rotation} scale={scale}>
      <bufferGeometry attach="geometry" {...points} />
      <pointsMaterial
        attach="material"
        size={0.01}
        sizeAttenuation
        color="#ffffff"
      />
    </points>
  );
});

Intelligent Chat Interface

The AI-powered chat system allows users to interact naturally with Sabrina, receiving context-aware responses and assistance.

Interactive 3D Model Visualization

Users can explore 3D models of spaces with features like:

• Room navigation
• Interactive minimap
• Custom furniture placement
• Responsive controls for both desktop and mobile

Responsive Design System

The interface adapts seamlessly across devices while maintaining visual consistency and usability.

Example: Responsive Layout Adjustment

// Responsive handler for different devices
useEffect(() => {
  const checkIfDesktop = () => {
    setIsDesktop(window.innerWidth >= 768);
    if (window.innerWidth < 768) {
      // On mobile, we default to the chat taking up the full screen
      setChatWidthRatio(1);
      setIsCollapsed(false);
    } else {
      // On desktop, we revert to the default ratio if the chat is full screen
      if (chatWidthRatio === 1) {
        setChatWidthRatio(DEFAULT_CHAT_WIDTH_RATIO);
      }
    }
  };

  checkIfDesktop();
  window.addEventListener("resize", checkIfDesktop);
  return () => window.removeEventListener("resize", checkIfDesktop);
}, [chatWidthRatio]);

Leading the development of the Sabrina AI website allowed me to push the boundaries of what's possible with modern web technologies. Balancing advanced 3D rendering with AI integration required innovative approaches, deep technical knowledge, and a focus on performance optimization.

This project represents not just a showcase of technical skills but also a demonstration of my ability to create seamless user experiences that blend cutting-edge technologies in an accessible way. The Sabrina AI platform stands as a testament to my capabilities as a lead developer and my passion for creating exceptional digital experiences.