@nsprt/ai-sdk

A React component library for building AI chat interfaces with a modern, clean design.

Installation

Using npm:

npm install @nsprt/ai-sdk

Using pnpm:

# Install the package
pnpm add @nsprt/ai-sdk

# Install peer dependencies
pnpm add react@^18.0.0 react-dom@^18.0.0

Using yarn:

yarn add @nsprt/ai-sdk

Peer Dependencies

This package has the following peer dependencies that need to be installed in your project:

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

When using pnpm, you need to explicitly install peer dependencies as they are not automatically installed.

Requirements

This package requires:

• React 18 or higher
• Tailwind CSS for styling

Basic Usage

Here's a complete example of how to create a chat interface:

import { useState } from "react";
import {
  ChatContainer,
  ChatInput,
  ChatMessage,
  StopGenerationButton,
  RegenerateButton,
  ChatSuggestions,
} from "@nsprt/ai-sdk";

export default function ChatInterface() {
  const [messages, setMessages] = useState<
    Array<{ role: "user" | "assistant"; content: string }>
  >([]);
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;

    // Add user message
    const newMessages = [...messages, { role: "user", content: input }];
    setMessages(newMessages);
    setInput("");
    setIsLoading(true);

    try {
      // Simulate AI response - replace with your actual API call
      const response = await new Promise((resolve) =>
        setTimeout(() => resolve("This is a simulated AI response."), 1000)
      );

      setMessages([
        ...newMessages,
        { role: "assistant", content: response as string },
      ]);
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleStopGeneration = () => {
    setIsLoading(false);
    // Implement your stop generation logic here
  };

  const handleRegenerate = async () => {
    if (messages.length === 0) return;
    setIsLoading(true);
    // Implement your regenerate logic here
    setIsLoading(false);
  };

  return (
    <div className='flex flex-col h-screen max-w-3xl mx-auto'>
      <ChatContainer className='flex-1 p-4'>
        {messages.map((message, index) => (
          <ChatMessage
            key={index}
            role={message.role}
            content={message.content}
          />
        ))}
        {isLoading && (
          <ChatMessage role='assistant' content='' isLoading={true} />
        )}
      </ChatContainer>

      <div className='p-4'>
        <form onSubmit={handleSubmit}>
          <ChatInput
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder='Type a message...'
            disabled={isLoading}
          >
            <div className='flex items-center gap-2'>
              {isLoading ? (
                <StopGenerationButton onClick={handleStopGeneration} />
              ) : (
                messages.length > 0 && (
                  <RegenerateButton onClick={handleRegenerate} />
                )
              )}
            </div>
          </ChatInput>
        </form>

        <ChatSuggestions
          type='common'
          onSelect={(suggestion) => setInput(suggestion.text)}
          className='mt-4'
        />
      </div>
    </div>
  );
}

Components

ChatContainer

A scrollable container for chat messages with auto-scroll functionality.

<ChatContainer autoScroll={true}>{/* Chat messages */}</ChatContainer>

ChatMessage

Displays a chat message with support for markdown content.

<ChatMessage
  role='assistant' // 'user' | 'assistant'
  content='Hello, how can I help you?'
  isLoading={false}
/>

ChatInput

A textarea component with auto-expanding height and a toolbar section.

<ChatInput
  value={input}
  onChange={(e) => setInput(e.target.value)}
  placeholder='Type a message...'
  disabled={false}
>
  {/* Optional toolbar items */}
</ChatInput>

ChatSuggestions

Displays suggestion chips for common queries or follow-up questions.

<ChatSuggestions
  type='common' // 'common' | 'followUp'
  onSelect={(suggestion) => handleSuggestion(suggestion)}
/>

Styling

This package uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project and configure it properly.

License

MIT