Contextual AI Bar

A bar with icons and an input field that toggles between them. It uses smooth animations for transitions. It shows tools or an AI input based on its state. Use it when needing a dynamic, interactive UI element for AI or tool access.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/contextual-ai-bar

npx layro-cli add @watermeloncorp/contextual-ai-bar

npx layro-cli add @watermeloncorp/contextual-ai-bar

bunx layro-cli add @watermeloncorp/contextual-ai-bar

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { ArrowRight } from 'lucide-react';

export interface ContextualAIBarProps {
  defaultExpanded?: boolean;
  placeholder?: string;
  tools?: React.ReactNode[];
  musicIcon: React.ReactNode;
  sparkleIcon: React.ReactNode;
}