# Create directory
mkdir bookstore-mcp
cd bookstore-mcp

# Initialize npm
npm init -y

# Create directories
mkdir -p src/ui
mkdir -p src/server
mkdir -p dist/ui
mkdir -p dist/server

# Create files (copy from artifacts)
touch src/server/index.ts
touch src/server/database.ts
touch src/server/types.ts
touch src/ui/BookListWidget.tsx
touch src/ui/BookDetailWidget.tsx
touch src/ui/CartWidget.tsx
touch src/ui/OrderHistoryWidget.tsx
touch package.json
touch tsconfig.json

# Install production dependencies
npm install @fractal-mcp/oai-hooks@latest @fractal-mcp/oai-server@latest zod

# Install dev dependencies
npm install --save-dev \
  @fractal-mcp/cli@latest \
  @types/node \
  @types/react \
  @types/react-dom \
  react \
  react-dom \
  typescript \
  vite

# Build React widgets first (creates HTML files)
npm run build:ui

# Build TypeScript server
npm run build:server

# Or build all at once
npm run build

chmod +x fix-widgets.sh
./fix-widgets.sh

dist/
├── ui/
│   ├── book-list/index.html
│   ├── book-detail/index.html
│   ├── cart/index.html
│   └── order-history/index.html
└── server/
    ├── index.js
    ├── database.js
    └── types.js

npm start

🚀 Starting BookStore MCP Server...

╔════════════════════════════════════════════════════════════╗
║  📚 BOOKSTORE MCP SERVER                                   ║
║  Status: ✅ Running                                        ║
║  Port: 8000                                                ║
╚════════════════════════════════════════════════════════════╝

npm start

# Test health endpoint
curl http://localhost:8000/health

# Open in browser
open http://localhost:8000

# Initialize git
git init
git add .
git commit -m "Initial commit: BookStore MCP"

# Create repo on GitHub, then:
git remote add origin https://github.com/YOUR_USERNAME/bookstore-mcp.git
git branch -M main
git push -u origin main

https://bookstore-mcp-xxxx.onrender.com

1. "Tìm sách về Programming"
2. "Tìm sách TypeScript giá dưới $50"
3. "Cho tôi xem chi tiết sách có ID là 1"
4. "Thêm sách ID 2 vào giỏ hàng"
5. "Thêm 3 cuốn sách ID 3 vào giỏ"
6. "Xem giỏ hàng của tôi"
7. "Thanh toán đơn hàng"
8. "Xem lịch sử đơn hàng"

# Clean và rebuild
npm run clean
npm install
npm run build

# Verify widget HTML files exist
ls -la dist/ui/*/index.html

# Should output:
# dist/ui/book-list/index.html
# dist/ui/book-detail/index.html
# dist/ui/cart/index.html
# dist/ui/order-history/index.html

npm run build:ui

curl https://your-app.onrender.com/health
# Should return JSON with status: ok

curl https://your-app.onrender.com/mcp
# Should return SSE stream

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

┌─────────────┐
│   ChatGPT   │  User asks: "Tìm sách TypeScript"
└──────┬──────┘
       │ calls MCP tool: search-books
       ↓
┌─────────────────────┐
│   MCP Server        │
│   (src/server)      │
│   • Register tools  │
│   • Process request │
│   • Return data     │
└──────┬──────────────┘
       │ returns structuredContent
       ↓
┌─────────────────────┐
│  React Widget UI    │
│  (dist/ui/*.html)   │
│  • useWidgetProps() │
│  • Render UI        │
│  • User interacts   │
└─────────────────────┘

{
  id: '9',
  title: 'Your Book Title',
  author: 'Author Name',
  price: 39.99,
  category: 'Programming',
  // ... other fields
}

registerOpenAIWidget(
  server,
  {
    id: "your-tool",
    title: "Your Tool",
    // ... config
  },
  async (args) => {
    // Handler logic
  }
);

npm run build:ui