AI Prompt Input

An enhanced textarea for AI prompts with context chips, model selection, character/token counting, and keyboard shortcuts.

Preview

Install Summary

This kit will add the following files and dependencies to your project.

Component Files

File	Path
ai-prompt-input.tsx	components/ai-assist/ai-prompt-input/ai-prompt-input.tsx
context-chip.tsx	components/ai-assist/ai-prompt-input/context-chip.tsx
model-selector.tsx	components/ai-assist/ai-prompt-input/model-selector.tsx
types.ts	components/ai-assist/ai-prompt-input/types.ts
index.ts	components/ai-assist/ai-prompt-input/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add textarea button select badge

Terminal

bash

npm install @phosphor-icons/react

Installation

Component Files

The component consists of the following files:

1. ai-prompt-input.tsx

ai-prompt-input.tsx

tsx

"use client";

import { useState, useRef, useEffect, useCallback } from "react";
import {
  PaperPlaneTilt,

2. context-chip.tsx

context-chip.tsx

tsx

"use client";

import { X } from "@phosphor-icons/react";
import { cn } from "@/lib/utils";
import type { ContextChip as ContextChipType } from "./types";

3. model-selector.tsx

model-selector.tsx

tsx

"use client";

import {
  Select,
  SelectContent,

4. types.ts

types.ts

tsx

export interface ContextChip {
  id: string;
  label: string;
  type?: "file" | "data" | "selection" | "custom";
  // eslint-disable-next-line @typescript-eslint/no-explicit-any

5. index.ts

index.ts

tsx

export { AIPromptInput } from "./ai-prompt-input";
export type {
  AIPromptInputProps,
  ContextChip,
  ModelOption,
  AttachedFile,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/page.tsx

tsx

"use client";

import { AIPromptInput, type ContextChip } from "@/components/ai-assist";
import { File } from "@phosphor-icons/react";
import { useState } from "react";