feat: tanstack chat example for solid

Author: jherr

templates/solid/example/tanchat/README.md

@@ -0,0 +1,52 @@
+# TanStack Chat Application
+
+Am example chat application built with TanStack Start, TanStack Store, and Claude AI.
+
+## Sidecar service
+
+This applicaton requires a sidecar microservice to be running. The server is located in the `ai-streaming-service` directory.
+
+In that directory you should edit the `.env.local` file to add your Anthropic API key:
+
+```env
+ANTHROPIC_API_KEY=your_anthropic_api_key
+```
+
+Then run the server:
+
+```bash
+cd ai-streaming-service
+npm install
+npm run dev
+```
+
+## ✨ Features
+
+### AI Capabilities
+
+- 🤖 Powered by Claude 3.5 Sonnet
+- 📝 Rich markdown formatting with syntax highlighting
+- 🎯 Customizable system prompts for tailored AI behavior
+- 🔄 Real-time message updates and streaming responses (coming soon)
+
+### User Experience
+
+- 🎨 Modern UI with Tailwind CSS and Lucide icons
+- 🔍 Conversation management and history
+- 🔐 Secure API key management
+- 📋 Markdown rendering with code highlighting
+
+### Technical Features
+
+- 📦 Centralized state management with TanStack Store
+- 🔌 Extensible architecture for multiple AI providers
+- 🛠️ TypeScript for type safety
+
+## Architecture
+
+### Tech Stack
+
+- **Routing**: TanStack Router
+- **State Management**: TanStack Store
+- **Styling**: Tailwind CSS
+- **AI Integration**: Anthropic's Claude API

templates/solid/example/tanchat/assets/ai-streaming-server/README.md

@@ -0,0 +1,110 @@
+# AI Streaming Server
+
+An Express server with TypeScript that provides a streaming API endpoint for Anthropic's Claude AI model.
+
+## Setup
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Copy `.env.example` to `.env` and add your Anthropic API key:
+   ```bash
+   cp .env.example .env
+   ```
+4. Edit `.env` and replace `your_api_key_here` with your actual Anthropic API key
+
+## Development
+
+Run in development mode with auto-reload:
+
+```bash
+npm run dev
+```
+
+Type checking:
+
+```bash
+npm run typecheck
+```
+
+## Production
+
+Build the TypeScript code:
+
+```bash
+npm run build
+```
+
+Run in production mode:
+
+```bash
+npm start
+```
+
+## API Usage
+
+### POST /api/chat
+
+Endpoint that accepts chat messages and returns a streaming response from Claude.
+
+#### Request Body
+
+```typescript
+interface ChatMessage {
+  role: "user" | "assistant";
+  content: string;
+}
+
+interface ChatRequest {
+  messages: ChatMessage[];
+}
+```
+
+Example request:
+
+```json
+{
+  "messages": [{ "role": "user", "content": "Hello, how are you?" }]
+}
+```
+
+#### Response
+
+The endpoint returns a Server-Sent Events (SSE) stream. Each event contains a chunk of the response from Claude.
+
+Example usage with JavaScript/TypeScript:
+
+```typescript
+const response = await fetch("http://localhost:3000/api/chat", {
+  method: "POST",
+  headers: {
+    "Content-Type": "application/json",
+  },
+  body: JSON.stringify({
+    messages: [{ role: "user", content: "Hello, how are you?" }],
+  }),
+});
+
+const reader = response.body!.getReader();
+const decoder = new TextDecoder();
+
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) break;
+
+  const chunk = decoder.decode(value);
+  const lines = chunk.split("\n");
+
+  for (const line of lines) {
+    if (line.startsWith("data: ")) {
+      const data = JSON.parse(line.slice(6));
+      if (data === "[DONE]") break;
+
+      // Handle the streaming response chunk
+      console.log(data);
+    }
+  }
+}
+```

templates/solid/example/tanchat/assets/ai-streaming-server/_dot_env.example

@@ -0,0 +1 @@
+ANTHROPIC_API_KEY=your_api_key_here 

templates/solid/example/tanchat/assets/ai-streaming-server/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "ai-streaming-server",
+  "version": "1.0.0",
+  "description": "Express server for streaming Anthropic AI chat responses",
+  "main": "dist/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsx watch src/index.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.18.0",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.18.3"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/node": "^20.11.24",
+    "tsx": "^4.7.1",
+    "typescript": "^5.3.3"
+  }
+}

templates/solid/example/tanchat/assets/ai-streaming-server/src/index.ts

@@ -0,0 +1,102 @@
+import express, { Request, Response } from 'express'
+import cors from 'cors'
+import dotenv from 'dotenv'
+import Anthropic from '@anthropic-ai/sdk'
+
+// Load environment variables
+dotenv.config()
+
+const app = express()
+const port = process.env.PORT || 8080
+
+// Middleware
+app.use(cors())
+app.use(express.json())
+
+// Initialize Anthropic client
+const anthropic = new Anthropic({
+  apiKey: process.env.ANTHROPIC_API_KEY,
+})
+
+// Define types for the request body
+interface ChatMessage {
+  role: 'user' | 'assistant'
+  content: string
+}
+
+interface ChatRequest {
+  messages: ChatMessage[]
+}
+
+// Streaming chat endpoint
+app.post(
+  '/api/chat',
+  async (req: Request<{}, {}, ChatRequest>, res: Response) => {
+    try {
+      const { messages } = req.body
+
+      if (!messages || !Array.isArray(messages)) {
+        return res.status(400).json({ error: 'Messages array is required' })
+      }
+
+      // Validate message format
+      const isValidMessages = messages.every(
+        (msg): msg is ChatMessage =>
+          typeof msg === 'object' &&
+          (msg.role === 'user' || msg.role === 'assistant') &&
+          typeof msg.content === 'string',
+      )
+
+      if (!isValidMessages) {
+        return res.status(400).json({
+          error:
+            "Invalid message format. Each message must have 'role' and 'content'",
+        })
+      }
+
+      // Set up SSE headers
+      res.setHeader('Content-Type', 'text/event-stream')
+      res.setHeader('Cache-Control', 'no-cache')
+      res.setHeader('Connection', 'keep-alive')
+
+      // Create the message stream
+      const stream = await anthropic.messages.create({
+        messages: messages.map((msg) => ({
+          role: msg.role,
+          content: msg.content,
+        })),
+        model: 'claude-3-opus-20240229',
+        max_tokens: 4096,
+        stream: true,
+      })
+
+      // Stream the response
+      for await (const chunk of stream) {
+        if (chunk.type === 'content_block_delta') {
+          res.write(`data: ${JSON.stringify(chunk)}\n\n`)
+        }
+      }
+
+      // End the stream
+      res.write('data: [DONE]\n\n')
+      res.end()
+    } catch (error) {
+      console.error('Error:', error)
+      // If headers haven't been sent yet, send error response
+      if (!res.headersSent) {
+        res.status(500).json({ error: 'Internal server error' })
+      } else {
+        // If streaming has started, send error event
+        const errorMessage =
+          error instanceof Error ? error.message : 'Unknown error'
+        res.write(`data: ${JSON.stringify({ error: errorMessage })}\n\n`)
+        res.end()
+      }
+    }
+  },
+)
+
+// Start the server
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`)
+})

templates/solid/example/tanchat/assets/ai-streaming-server/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}