Electric AI Chat

AI chat application using Electric for resumeability, interruptability, multi-user and multi-agent sync. See the Building AI apps on sync blog post for more context.

ElectricSQL

Electric is a Postgres sync engine. It solves the hard problems of sync for you, including partial replication, fan-out, and data delivery. See https://electric-sql.com for more information.

Building AI apps on sync

This is a demo application that shows how to build collaborative AI apps that use Electric to keep both agents and users in sync. It shows:

• real-time multi-agent, multi-user and multi-device sync
• live streaming of AI sessions with seamless resumeability and session continuity
• real-time streaming of LLM tool responses

The demo is deployed at electric-ai-chat.examples.electric-sql.com. See the blog post for more information.

Getting Started

Pre-reqs

• Node.js (v18 or higher)
• pnpm (v8 or higher)
• Docker and Docker Compose (for local development environment)
• An OpenAI API key

Install

Clone the repository and install dependencies:

git clone https://github.com/electric-sql/electric-ai-chat.git
cd electric-ai-chat
pnpm install

Develop

1. Start Postgres and Electric using Docker:

docker compose up -d

1. Start the backend API:

export OPENAI_API_KEY=<your-openai-api-key>
pnpm dev:api

1. Build and serve the frontend app:

pnpm dev:app

Open in your browser at http://localhost:5173

Code structure

electric-ai-chat/
├── packages/
│   ├── app/       # React frontend application
│   │   ├── src/   # Source code
│   │   └── ...    # Configuration files
│   └── api/       # Backend API server
│       ├── src/   # API source code
│       ├── ai/    # AI integration and tools
│       └── ...    # Configuration files
├── db/            # Database initialization scripts
│   └── schema.sql # Database schema
├── docker-compose.yaml # Docker configuration for development
└── pnpm-workspace.yaml # Workspace configuration

Stack

1. Front-end

2. React 19

3. TypeScript
4. Vite
5. TanStack Router

6. Radix UI

7. Back-end:

8. Node.js

9. Hono (web framework)

10. TypeScript

11. Database:

12. Postgres

13. ElectricSQL for sync

14. AI:

15. OpenAI API with tool calling capabilities

Tools

The demo app implements several LLM tools to enhance the AI assistant capabilities:

1. ElectricSQL Tools

2. Fetch and utilize ElectricSQL documentation

3. Provide context-aware answers about ElectricSQL features and best practices

4. Database Tools

5. Query database schema information

6. Execute read-only PostgreSQL queries and return results

7. Safely handle database connections with proper authentication

8. File Management Tools

9. Create, read, edit, delete, and rename files within chat sessions

10. Support various file types with MIME type handling

11. Persist files in the database for cross-session access

12. Chat Management Tools

13. Automatically generate descriptive chat names based on content

14. Rename chats with user-specified names

15. Pin/unpin chats for easier organization

16. Todo List Tools

17. Create, update, delete, and manage collaborative todo lists
18. Bidirectional real-time synchronization of todo items across all clients
19. LLM-powered todo processing with the ability to:
    • Process entire todo lists automatically
    • Watch lists for new items and process them as they're added
    • Respond to task completion status changes in real-time
    • Use ElectricSQL's shape streams to monitor tasks without polling
20. Todo items can be created by users or the AI, demonstrating real-time collaboration
21. Demonstrates practical uses of ElectricSQL for:
    • Event-driven architectures with shape streams
    • Real-time UI updates across multiple clients
    • Reactive programming patterns with AI integrations
    • Resumable operations that can survive page reloads or connection interruptions