CometChat Chat Starter for Replit

A working chat app built on CometChat, with the CometChat Agent Skills pre-installed. Remix it, add your CometChat credentials, and you have real-time chat running. Then ask Replit Agent to add features, and publish.

What's included:

• Chats, Users and Groups tabs, with one-to-one and group messaging
• Thread replies, read receipts, typing indicators, reactions and media messages (from the CometChat UI Kit)
• Sample-user login, so you can chat between two users right away (use a private window or a second browser for the other user)
• Setup screen when no credentials are set
• Mobile layout, and light/dark mode that follows your device

Built with React + Vite and the CometChat React UI Kit v7.

1. Get it running

1. Remix this Repl, or import cometchat/cometchat-replit-template from GitHub.
2. Create a CometChat app: sign up free, then create an app and open its Credentials.
3. Add three Secrets to the Repl: VITE_COMETCHAT_APP_ID, VITE_COMETCHAT_REGION (us, eu or in) and VITE_COMETCHAT_AUTH_KEY. You can also skip this and type the three values into the app's setup screen; they're saved in that browser only.
4. Press Run.
5. Log in as a sample user (cometchat-uid-1…cometchat-uid-5 exist in every new app). To chat between two users, open the app as the second user in a private/incognito window or another browser — tabs in the same browser share one CometChat login.

2. Add features with Replit Agent

Replit Agent reads the CometChat skills in .agents/skills/ automatically. Ask in plain language, for example:

• "Add voice and video calling"
• "Add message search"
• "Match my brand colors" or "use a dark theme"
• "Add push notifications"
• "Set up production authentication with auth tokens"

The skills know the CometChat UI Kit, so the Agent writes working code instead of guessing. Some features (for example search, translation and AI features) also need to be switched on in your CometChat dashboard; the Agent tells you when.

3. Publish

Press Publish in Replit (static deployment). Add the same three Secrets to the deployment.

Before real users: the Auth Key is for development only, because it's visible in the browser. Ask the Agent to "set up production authentication with auth tokens" so your server creates a login token for each user.

Recommended: CometChat Docs MCP

The Docs MCP gives the Agent live CometChat docs for deeper customization. In Replit, add it as a custom MCP server for the Agent, with this URL:

https://mcp.cometchat.com/mcp

No authentication required.

Project layout

src/
├── main.jsx                  Entry point; loads the UI Kit styles
├── App.jsx                   Setup → login → chat flow, top bar
├── app.css                   Layout for the app shell
└── cometchat/
    ├── credentials.js        Reads Secrets, or the setup screen's saved values
    ├── session.js            CometChat init, login and logout
    ├── SetupScreen.jsx       Credentials form
    ├── LoginScreen.jsx       Sample-user picker
    ├── ChatApp.jsx           Chats / Users / Groups, messages and threads
    └── hooks.js              Mobile and dark-mode helpers
.agents/skills/               CometChat Agent Skills (v5) for Replit Agent

Keep the skills current

npm run sync-skills

This reinstalls .agents/skills/ from the published @cometchat/skills package. Pin a version with SKILLS_VERSION=5.1.0 npm run sync-skills.

Source

• Skills: github.com/cometchat/cometchat-skills
• Agent Skills docs: cometchat.com/docs/agent-skills
• UI Kit docs: cometchat.com/docs

License

MIT