Rafael Porto

AI Assistant Interface

AI chats 467

About

An AI chat interface, with input, file uploads, suggestions and an animated logo

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Assistant Interface to your project and fits it to your theme.

Code

How AI Assistant Interface is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react"
import { AIAssistantInterface } from "@/components/ui/ai-assistant-interface"

export function Demo() {
  return (
    <div className="w-screen">
      <AIAssistantInterface />
    </div>
  )
}

Dependencies

More by Rafael Porto

View all
  • To-do card

    To-do card

    240
  • Command Palette

    Command Palette

    216
  • Publish Button

    Publish Button

    127
  • Sign In

    Sign In

    98
  • AI Assistant Panel

    AI Assistant Panel

  • Sign In Card

    Sign In Card

  • Hold to delete Button

    Hold to delete Button

More in AI chats

View all
  • AI Actions

    AI Actions

    324
  • Color Picker

    Color Picker

    96
  • Agent Chat

    Agent Chat

    18
  • Environment Variables

    Environment Variables

    12
  • Commit

    Commit

    19
  • AI Task List

    AI Task List

    162
  • Prompt with Model Picker

    Prompt with Model Picker

    2
  • System Message

    System Message

    57