#Dev

8 messages · Page 1 of 1 (latest)

obtuse portalBOT
#

Hi @desert cliff. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

I'll help you create a chat application with Convex. Based on the knowledge sources, here's how you can build a real-time chat app:

Creating a Chat App with Convex

1. Set up your project

First, create a new project or clone a starter template:

git clone <https://github.com/get-convex/convex-tutorial.git>
cd convex-tutorial
npm install

2. Initialize Convex

Run the development server which will set up Convex:

npm run dev

This will prompt you to sign in with GitHub and create a new Convex project.

3. Create your schema and functions

Create a file convex/chat.ts with a mutation function to send messages:

import { mutation, query } from "./_generated/server";
import { v } from "convex/values";

export const sendMessage = mutation({
  args: {
    user: v.string(),
    body: v.string(),
  },
  handler: async (ctx, args) => {
    await ctx.db.insert("messages", {
      user: args.user,
      body: args.body,
    });
  },
});

export const getMessages = query({
  args: {},
  handler: async (ctx) => {
    // Get most recent messages first
    const messages = await ctx.db.query("messages").order("desc").take(50);
    // Reverse the list so that it's in chronological order
    return messages.reverse();
  },
});

4. Connect to your frontend

In your React component (e.g., src/App.tsx), use Convex hooks:

import { useQuery, useMutation } from "convex/react";
import { api } from "../convex/_generated/api";
#

export default function App() {
const messages = useQuery(api.chat.getMessages);
const sendMessage = useMutation(api.chat.sendMessage);
const [newMessageText, setNewMessageText] = useState("");

return (
<main>
{messages && messages.map((message, i) => (
<p key={i}>
<span>{message.user}: </span>
<span>{message.body}</span>
</p>
))}
<form onSubmit={async (e) => {
e.preventDefault();
await sendMessage({ user: "YourName", body: newMessageText });
setNewMessageText("");
}}>
<input
value={newMessageText}
onChange={e => setNewMessageText(e.target.value)}
placeholder="Write a message…"
/>
<input type="submit" value="Send" disabled={!newMessageText} />
</form>
</main>
);
}


### 5. Set up the Convex Provider

In your main file (e.g., `main.jsx`), wrap your app with the Convex provider:

import { ConvexProvider, ConvexReactClient } from "convex/react";

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<ConvexProvider client={convex}>
<App />
</ConvexProvider>
</React.StrictMode>,
);


That's it! You now have a basic real-time chat application. The magic of Convex is that all connected clients will automatically receive updates when new messages are added to the database, without you having to implement any websocket or polling logic.
#

@desert cliff Kapa.ai is still learning and improving, please let me know how I did by reacting below.

desert cliff
#

How can I make my chat with convex

#

@obtuse portal

desert cliff