A React TypeScript contact-reception experience with an eight-expression Cloudia avatar. Conversations run through corsweb's server-side contact gateway; the browser never receives an AI provider credential.
- VRM Model Integration: Loads and displays 3D VRM characters (currently featuring Cloudia)
- Emotional Expressions: 8 PNG faces (HAPPY, ANGRY, SAD, ENJOYING, SURPRISED, SHY, THINKING, PROUD)
- Real-time Animation: Smooth transitions between emotional states during conversations
- Server-side AI: Both intake and ambassador modes use
/api/contact/chat - Company Knowledge Base: Company context and system instructions are assembled by the Worker
- Emotion Detection: AI automatically determines appropriate emotions for responses
- Real-time Sync: Connects to Google Calendar via iCal URL
- Event Display: Shows upcoming events in chat responses
- Japanese Support: Full UTF-8 encoding support for Japanese calendar events
- Smart Filtering: Displays relevant upcoming events (next 30 days)
- Multi-language Support: Japanese and English interface
- Dynamic Language Switching: Real-time language toggling
- Localized Content: Company information and UI elements support multiple languages
- Frontend: React 18 with TypeScript and Vite
- 3D Graphics: Three.js with VRM model support
- AI Integration: Vertex Gemini behind the corsweb contact-chat Worker
- Styling: Tailwind CSS for responsive design
- State Management: React Context for language and app state
- ES Modules with Import Maps: Native ES modules loaded from esm.sh CDN instead of bundling
- Ref-based 3D Updates: Character expression updates bypass React re-renders for performance
- Gateway Architecture: Same-origin contact API with no browser-side AI credentials
- Character Encoding: Advanced UTF-8 handling for Japanese calendar integration
- Node.js (v18 or higher)
- Access to a running corsweb contact-chat Worker
- Google Calendar with public iCal URL (optional)
npm installCreate a .env.local file with the following variables:
VITE_CONTACT_API_BASE=https://your-contact-worker.example.com
GOOGLE_CALENDAR_ICAL_URL=your_google_calendar_ical_urlNo Gemini or Vertex credential belongs in .env.local. Local Cloudia development calls the configured contact-chat Worker, or uses VITE_CONTACT_CHAT_MOCK=1 for UI-only work.
Calendar Setup (Optional):
- Open Google Calendar
- Go to Settings > Calendar Settings
- Find "Integrate calendar" section
- Copy the public iCal URL
Company knowledge used by the model is configured server-side in corsweb. The Markdown files in this repository are retained as reference content and are not sent directly from the browser.
npm run devnpm run buildThe production build is mounted at /contact/chat/, so its CSS, JavaScript,
favicon, and public assets are emitted with that prefix. Local development
keeps the root (/) base path. Deploy the production artifact to the Pages
main branch so the cor-jp.com edge route receives it:
npx wrangler pages deploy dist --project-name cloudia-contact --branch mainnpm run previewsrc/
├── components/ # React components
│ ├── ExpressionAvatar.tsx # 8-expression icon avatar (image + CSS fallback)
│ ├── ChatInput.tsx # User input component
│ ├── ChatMessage.tsx # Message display component
│ └── KnowledgeInput.tsx # Knowledge base editor
├── services/ # Core services
│ ├── contactChatClient.ts # Server-side chat gateway client
│ ├── (avatar images under public/assets/avatar/)
│ ├── calendarService.ts # Calendar integration
│ ├── companyWebSearch.ts # Web search functionality
│ └── knowledgeLoader.ts # Company knowledge loader
├── contexts/ # React contexts
│ └── LanguageContext.tsx # Language management
├── api/ # Legacy calendar endpoint only
│ └── calendar.ts # Calendar API proxy
└── company-info/ # Company knowledge base
└── company.md # Company information in Markdown
- Start Chatting: Type your questions in the chat input
- Watch Emotions: Observe how the 3D character's expression changes based on responses
- Language Toggle: Switch between Japanese and English using the language selector
- Company Queries: Ask about company information, events, or schedules
- VRM Loading: Loads
.vrmfiles with bone structure validation - Expression Mapping: Maps AI emotions to 3D character expressions
- Performance Optimization: Direct bone manipulation without React re-renders
- Contact Gateway: Sends bounded conversation history plus mode, locale, and intent
- Context Management: Company knowledge and provider prompts stay on the server
- Safe Errors: Provider and infrastructure details are not rendered to users
- iCal Parsing: Custom parser for Google Calendar iCal format
- Encoding Handling: Advanced UTF-8 support for Japanese content
- Date Filtering: Smart filtering for relevant upcoming events
The production contact experience is mounted on corsweb and calls the same-origin /api/contact/* Worker routes. netlify.toml remains only for the legacy calendar preview path; there is no Netlify AI function.
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
© 2025 Cor.inc. All rights reserved.
For issues or questions:
- Create an issue in the repository
- Contact: Cor.inc Support
- Email: Contact via company website
Last updated: June 2025
- intents (ADR-0014, 7 keys): see
constants/intents.tsincludingcontract-dev - API:
services/contactChatClient.ts→POST /api/contact/chatand/submit - Env:
VITE_CONTACT_API_BASE— e.g. empty for same-origin, or Preview Worker originVITE_CONTACT_CHAT_MOCK=1— mock chat/submit for local UI QAVITE_FALLBACK_CONTACT_URL— defaulthttps://cor-jp.com/contact/
- Embed: open with
?embed=1for compact header (iframe /corsweb #254) - LINE UI: left Cloudia avatar + bubble, right user bubble; plain-text replies