This app is a starter template for client-side React and server-side Hono, now featuring an AI chat interface using Vercel's AI SDK.

• ✅ React frontend with TypeScript
• ✅ Hono backend API
• ✅ AI Chat powered by OpenAI GPT-4o-mini
• ✅ Real-time streaming responses
• ✅ Tailwind CSS styling

Get a copy of this starter template by clicking the Remix button in the top-right.

• The entrypoint is /backend/index.ts. That's the backend HTTP server, which also serves the all the frontend assets.

• The client-side entrypoint is /frontend/index.html

  • which in turn imports /frontend/index.tsx
  • which in turn imports the React app from /frontend/components/App.tsx.

• The chat feature uses:

  • /frontend/components/Chat.tsx - React component with useChat hook
  • /api/chat endpoint in /backend/index.ts - Streaming AI responses

So if you wanted to get a sense of how this app comes together, we suggest reading the files in this order:

/backend/index.ts -> /frontend/index.html -> /frontend/index.tsx -> /frontend/components/App.tsx -> /frontend/components/Chat.tsx

The chat feature uses Vercel's AI SDK:

• useChat hook handles message state and streaming
• OpenAI integration via Val Town's standard library
• Streaming responses for real-time chat experience
• Tailwind CSS for responsive design

• React Hono Example is a bigger example project, with a SQLite database table, queries, client-side CSS, a favicon, and shared code that runs on both client and server.
• Vercel AI SDK Documentation for more chat features and customization options.