The objective of this project is to create an interactive experience for exploring the Art Institute of Chicago's collection through a modern web interface and an AI-powered chat assistant. Artic-Catalog is a web application for viewing the artwork collection of the Art Institute of Chicago. Additionally, this project provided an opportunity to learn about and implement Model Context Protocol (MCP) to explore the developer experience.

Artic Catalog Preview

• Browse the extensive artwork collection
• Art Catalog Assistant: An AI-powered chat interface for artwork discovery and information
• Detailed artwork information and high-resolution images

Artic Catalog Search

Artic Catalog Assistant

• Frontend: React with TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• MCP Server: artic-mcp
• AI Integration: Custom chat implementation of Anthropic's Claude API

• Node.js (v18 or higher)
• npm or yarn

1. Clone the repository

git clone https://github.com/code-qtzl/artic-catalog.git
cd artic-catalog

2. Install dependencies

npm install

3. Create a .env file in the root directory

cp .env

4. Add Anthropic API Key

"server": ANTHROPIC_API_KEY=_APIKEYHERE_ NODE_ENV=development tsx watch src/server/index.ts"

5. Start the server

npm run server

6. Start the development server

npm run dev

The application will be available at http://localhost:5173

Required environment variables:

• Base URL found here: https://api.artic.edu/docs/
• Anthropic API key: https://docs.anthropic.com/en/home

Once the server is running, the AI chat assistant will be available in the application interface. You can interact with it to:

• Search for artworks
• Get artwork details
• Discover related pieces

Questions, feedback, or want to see a working demo? Reach out here.

• a.a.zepeda003[at]gmail.com