Unscrolled

A UI for AI assistants with collapsible responses that makes it easier to navigate long exchanges.

Watch the demo video on Vimeo

Motivation

For complex inquiries I often need to ask an AI assistant multiple questions. The information I want is scattered between the responses. Gathering up the pieces leaves me scrolling through verbose responses. This demo UI collapses all the previous responses from the assistant so you can more efficiently navigate chat history according to your side of the interaction.

It seems likely that Anthropic and OpenAI will achieve AGI sooner than they provide a UX for Claude and ChatGPT with the basic functionality commonly available on websites by 2010. I guess this is a good example of ruthless prioritization in the innovation ecosystem. I don't plan to make this project production grade, but I hope it might motivate some people to iterate on the existing UIs.

Prerequisites

Unscrolled is a lightweight wrapper around the Anthropic Claude API. It is built with Rust, Yew (frontend), and Axum (backend).

• Rust: Install from rustup.rs
• Trunk: Install with cargo install trunk
• Anthropic API Key: Sign up at console.anthropic.com to get your API key

Setup

1. Clone the Repository

git clone https://github.com/fox-daniel/unscrolled.git
cd unscrolled

2. Configure Environment Variables

Create a .env file in the backend/ directory:

cd backend
echo "ANTHROPIC_API_KEY=your_api_key_here" > .env

Replace your_api_key_here with your actual Anthropic API key.

3. Install Dependencies

From the project root, build all workspace members:

cargo build

Running the Application

The application consists of two services that need to be running simultaneously:

Terminal 1: Backend Server

cd backend
./run.sh

The backend will start on http://127.0.0.1:8000 by default. To use a different port:

PORT=3001 ./run.sh

Terminal 2: Frontend Development Server

cd frontend
./run.sh

The frontend will start on http://127.0.0.1:8080 and automatically open in your browser.

Development

Backend Development

The backend uses cargo-watch for automatic rebuilds. Start the development server with:

cd backend
cargo watch -x run

Frontend Development

For frontend development with auto-reload:

cd frontend
trunk serve --open

Full Development Workflow

From the project root, you can use the development helper script:

./dev_help.sh

This runs cargo watch -c -x fmt -x clippy -s "trunk build" to automatically format, lint, and build on file changes.

Project Structure

unscrolled/
├── backend/          # Axum web server
├── frontend/         # Yew WASM application  
├── shared/           # Shared data models and API definitions
└── dev_help.sh       # Development workflow script

API Endpoints

• GET /health - Health check endpoint
• POST /api/messages - Send messages to Claude API

Configuration

Backend Configuration

Environment variables (set in backend/.env):

• ANTHROPIC_API_KEY - Your Anthropic API key (required)
• PORT - Server port (default: 8000)
• RUST_LOG - Log level (default: info)

Frontend Configuration

The frontend automatically connects to:

• Development: http://127.0.0.1:8000
• Production: https://api.unscrolled.com

Features

• Real-time chat with Claude API
• Collapsible assistant responses for better navigation
• Responsive design
• Auto-collapse previous responses when sending new messages
• Loading states and error handling

Troubleshooting

Port Already in Use

If you see "Address already in use" errors:

# Use a different port for backend
PORT=8001 ./backend/run.sh

# Use a different port for frontend  
trunk serve --port 8081

Missing API Key

Ensure your .env file in the backend/ directory contains:

ANTHROPIC_API_KEY=your_actual_api_key

Build Issues

Clean and rebuild:

cargo clean
cargo build

⚠️ Disclaimer

The code was generated by Claude, except for that one closing curly bracket that it refused to generate.