AI Inputs

AI Inputs are advanced, client-side textareas designed for LLM prompts, chat interfaces, streaming responses, and voice recognition integrations.

Interactive Showcase

Browse all the interactive AI input designs and variants included in Synapse UI.

Ai input 01

Press Enter to send, Shift+Enter for newline

Ai input 02

Ai input 03

Ai input 04

Ai input 05

Your message

Ai input 06

synapse-ai — terminal

AI ready

❯return

quick:

Ai input 07

screenshot.png2.4 MB

report.pdf1.2 MB

2 files

Ai input 08

Add context:

Ai input 09

Ai input 10

Only you can see this

Ai input 11

Ai input 12

500 left

Ai input 13

AI Assistant

Online

Web search on

Ai input 14

Ai input 15

Ai input 16

Tap to start speaking

Ai input 17

Ai input 18

Shift+Enter for newline

Ai input 19

AI Assistant

live

Ai input 20

~0/2000

⌘+Enterto send·Enterfor newline

Installation

Install any of the AI Input components directly into your project via the CLI:

CODE

# Install AI Input 09 (Streaming Gradient Border)
npx shadcn@latest add http://localhost:3000/r/ai-input-09.json

# Install AI Input 15 (Spinning Glow Background)
npx shadcn@latest add http://localhost:3000/r/ai-input-15.json

# Install AI Input 16 (Voice Visualizer Waveform)
npx shadcn@latest add http://localhost:3000/r/ai-input-16.json

Usage Examples

Here are some common ways to use these AI Input components in your LLM application layouts:

1. Simple Streaming Input

Integrate an input that displays a custom gradient border and a bouncing loading indicator during text generation:

CODE

import { AIInput09 } from "@/components/ui/ai-input-09";
import { useState } from "react";

export default function ChatBox() {
  const [value, setValue] = useState("");
  const [isStreaming, setIsStreaming] = useState(false);

  const handleSubmit = (text: string) => {
    setIsStreaming(true);
    // Mock API Call
    setTimeout(() => setIsStreaming(false), 3000);
  };

  return (
    <AIInput09
      value={value}
      onChange={setValue}
      onSubmit={handleSubmit}
      isStreaming={isStreaming}
      placeholder="Ask about our documentation..."
    />
  );
}

2. Multi-mode input (Voice and Text)

Allows toggling between a typing textarea and an active voice recorder Visualizer:

CODE

import { AIInput16 } from "@/components/ui/ai-input-16";

export default function AssistantInput() {
  return (
    <AIInput16
      placeholder="Speak or type your prompt..."
      onSubmit={(prompt) => console.log("Prompt sent:", prompt)}
    />
  );
}

Interactive Showcase

Browse all the interactive AI input designs and variants included in Synapse UI.

Ai input 01

Press Enter to send, Shift+Enter for newline

Ai input 02

Ai input 03

Ai input 04

Ai input 05

Your message

Ai input 06

synapse-ai — terminal

AI ready

❯return

quick:

Ai input 07

screenshot.png2.4 MB

report.pdf1.2 MB

2 files

Ai input 08

Add context:

Ai input 09

Ai input 10

Only you can see this

Ai input 11

Ai input 12

500 left

Ai input 13

AI Assistant

Online

Web search on

Ai input 14

Ai input 15

Ai input 16

Tap to start speaking

Ai input 17

Ai input 18

Shift+Enter for newline

Ai input 19

AI Assistant

live

Ai input 20

~0/2000

⌘+Enterto send·Enterfor newline

Installation

Install any of the AI Input components directly into your project via the CLI:

CODE

# Install AI Input 09 (Streaming Gradient Border)
npx shadcn@latest add http://localhost:3000/r/ai-input-09.json

# Install AI Input 15 (Spinning Glow Background)
npx shadcn@latest add http://localhost:3000/r/ai-input-15.json

# Install AI Input 16 (Voice Visualizer Waveform)
npx shadcn@latest add http://localhost:3000/r/ai-input-16.json

Usage Examples

Here are some common ways to use these AI Input components in your LLM application layouts:

1. Simple Streaming Input

Integrate an input that displays a custom gradient border and a bouncing loading indicator during text generation:

CODE

import { AIInput09 } from "@/components/ui/ai-input-09";
import { useState } from "react";

export default function ChatBox() {
  const [value, setValue] = useState("");
  const [isStreaming, setIsStreaming] = useState(false);

  const handleSubmit = (text: string) => {
    setIsStreaming(true);
    // Mock API Call
    setTimeout(() => setIsStreaming(false), 3000);
  };

  return (
    <AIInput09
      value={value}
      onChange={setValue}
      onSubmit={handleSubmit}
      isStreaming={isStreaming}
      placeholder="Ask about our documentation..."
    />
  );
}

2. Multi-mode input (Voice and Text)

Allows toggling between a typing textarea and an active voice recorder Visualizer:

CODE

import { AIInput16 } from "@/components/ui/ai-input-16";

export default function AssistantInput() {
  return (
    <AIInput16
      placeholder="Speak or type your prompt..."
      onSubmit={(prompt) => console.log("Prompt sent:", prompt)}
    />
  );
}