Simple AI

The simple-ai library provides three main categories of resources for building AI applications:

• UI Components: Low-level building blocks like chat interfaces, markdown rendering, and model selectors.
• App Blocks: High-level, complete chat applications and generative UI examples.
• AI Agent Workflows: Visual workflow builders for designing AI agent systems.

Technical specifications:

• Styling: Built on shadcn/ui with Tailwind CSS (Dark mode ready).
• Logic: Integrated with Vercel AI SDK and React Flow (for workflows).
• Type Safety: Full TypeScript support.

The Blocks components are built on top of the Vercel AI SDK. To use them effectively, your project should be prepared to use:

• useChat hook for client-side chat state management.
• streamText for server-side streaming responses.
• An AI provider, such as @ai-sdk/openai for accessing models like GPT-4.

The simple-ai components are designed to work seamlessly with the Vercel AI SDK. They provide a UI layer specifically for AI-powered applications, handling:

• Streaming responses
• Loading states
• Complex chat interactions

The project is organized into the following directory structure to separate concerns between the frontend, backend, and database:

• src/app/: Contains the Next.js App Router pages and routing logic.
• src/hono/: Contains the HonoJS backend routes and RPC definitions.
• src/db/: Contains the Drizzle ORM database schema and database services.
• src/components/: Contains reusable UI components (built with shadcn/ui).
• src/lib/: Contains shared utility functions and configuration files.

The state prop controls the visual appearance and interactivity of the renderer. Use these states to match the lifecycle of your UI (e.g., during AI generation or when a component is disabled).

• interactive: (Default) Full interactivity.
• disabled: Reduces opacity and disables pointer events.
• read-only: Disables pointer events but maintains full visibility.
• streaming: Shows a pulsing animation with reduced opacity (useful for AI text/UI streaming).
• error: Adds a red border to indicate a rendering error.

simple-ai follows a 'copy and paste' philosophy similar to shadcn/ui. Instead of being installed as a rigid dependency, components are intended to be copied directly into your project. This approach provides:

1. Full Ownership: You have complete control over the component code, allowing for deep customization of styles and logic.
2. Ease of Customization: Start with battle-tested defaults and modify them to fit your specific UI/UX needs.
3. Performance: Components are optimized for chat interfaces, ensuring they remain performant even with large message histories.

The ChatMessageArea uses a sophisticated auto-scrolling system built on use-stick-to-bottom to handle streaming content and user interaction:

• Smart Auto-scroll: Automatically scrolls to new messages only if the user is already at the bottom.
• Interaction Awareness: Auto-scroll is automatically disabled when a user scrolls up to read previous messages.
• Re-engagement: Auto-scroll re-enables automatically when the user manually scrolls back to the bottom.
• Mobile Optimization: On touch devices, auto-scroll pauses while the user's finger is on the screen.
• Navigation: A ChatMessageAreaScrollButton is provided to allow users to quickly jump back to the bottom when they are not currently scrolled there.

The Tool Invocation component is designed to display tool calls from an AI model with visual indicators for different execution states. It provides collapsible sections to inspect the input arguments passed to the tool and the resulting output.

Supported states include:

• Streaming/Loading: Visual feedback while the tool is being executed.
• Available/Completed: Displays the tool call along with its input arguments and the final output results.
• Error: Displays an error state if the tool execution fails.

You can install the jsx-renderer component using the shadcn CLI or by manual installation.

Using shadcn CLI

npx shadcn@latest add jsx-renderer

Manual Installation

1. Install the required dependencies:

npm install react-jsx-parser react-error-boundary

2. Copy the jsx-renderer.tsx source code into your project.
3. Update the import paths within the file to match your project's directory structure.

To test the package as a globally installed tool, use npm link. This allows you to run the create-simple-ai command from any directory on your system.

# From the create-simple-ai directory
npm link

# Now test from anywhere
create-simple-ai my-test-app --database postgres --yes

# Unlink when done
npm unlink -g create-simple-ai