diff --git a/library/core/reacord-discord-js.ts b/library/core/reacord-discord-js.ts
index 488591c..dc90959 100644
--- a/library/core/reacord-discord-js.ts
+++ b/library/core/reacord-discord-js.ts
@@ -7,7 +7,7 @@ import type { ReacordConfig, ReacordInstance } from "./reacord"
 import { Reacord } from "./reacord"
 
 export class ReacordDiscordJs extends Reacord {
-  constructor(client: Discord.Client, config: ReacordConfig = {}) {
+  constructor(private client: Discord.Client, config: ReacordConfig = {}) {
     super(config)
 
     client.on("interactionCreate", (interaction) => {
@@ -19,35 +19,56 @@ export class ReacordDiscordJs extends Reacord {
     })
   }
 
-  override send(channel: Discord.TextBasedChannel): ReacordInstance {
-    return this.createChannelRendererInstance({
-      send: async (options) => {
-        const message = await channel.send(getDiscordMessageOptions(options))
-        return createReacordMessage(message)
+  override send(
+    channelId: string,
+    initialContent?: React.ReactNode,
+  ): ReacordInstance {
+    return this.createChannelRendererInstance(
+      {
+        send: async (options) => {
+          const channel =
+            this.client.channels.cache.get(channelId) ??
+            (await this.client.channels.fetch(channelId)) ??
+            raise(`Channel ${channelId} not found`)
+
+          if (!channel.isText()) {
+            raise(`Channel ${channelId} is not a text channel`)
+          }
+
+          const message = await channel.send(getDiscordMessageOptions(options))
+          return createReacordMessage(message)
+        },
       },
-    })
+      initialContent,
+    )
   }
 
-  override reply(interaction: Discord.CommandInteraction): ReacordInstance {
-    return this.createCommandReplyRendererInstance({
-      type: "command",
-      id: interaction.id,
-      channelId: interaction.channelId,
-      reply: async (options) => {
-        const message = await interaction.reply({
-          ...getDiscordMessageOptions(options),
-          fetchReply: true,
-        })
-        return createReacordMessage(message as Discord.Message)
+  override reply(
+    interaction: Discord.CommandInteraction,
+    initialContent?: React.ReactNode,
+  ): ReacordInstance {
+    return this.createCommandReplyRendererInstance(
+      {
+        type: "command",
+        id: interaction.id,
+        channelId: interaction.channelId,
+        reply: async (options) => {
+          const message = await interaction.reply({
+            ...getDiscordMessageOptions(options),
+            fetchReply: true,
+          })
+          return createReacordMessage(message as Discord.Message)
+        },
+        followUp: async (options) => {
+          const message = await interaction.followUp({
+            ...getDiscordMessageOptions(options),
+            fetchReply: true,
+          })
+          return createReacordMessage(message as Discord.Message)
+        },
       },
-      followUp: async (options) => {
-        const message = await interaction.followUp({
-          ...getDiscordMessageOptions(options),
-          fetchReply: true,
-        })
-        return createReacordMessage(message as Discord.Message)
-      },
-    })
+      initialContent,
+    )
   }
 }
 
diff --git a/library/core/reacord.ts b/library/core/reacord.ts
index ba3c0bc..bdf0a02 100644
--- a/library/core/reacord.ts
+++ b/library/core/reacord.ts
@@ -32,9 +32,12 @@ export abstract class Reacord {
 
   constructor(private readonly config: ReacordConfig = {}) {}
 
-  abstract send(channel: unknown): ReacordInstance
+  abstract send(channel: unknown, initialContent?: ReactNode): ReacordInstance
 
-  abstract reply(commandInteraction: unknown): ReacordInstance
+  abstract reply(
+    commandInteraction: unknown,
+    initialContent?: ReactNode,
+  ): ReacordInstance
 
   protected handleComponentInteraction(interaction: ComponentInteraction) {
     for (const renderer of this.renderers) {
@@ -46,17 +49,27 @@ export abstract class Reacord {
     return this.config.maxInstances ?? 50
   }
 
-  protected createChannelRendererInstance(channel: Channel) {
-    return this.createInstance(new ChannelMessageRenderer(channel))
+  protected createChannelRendererInstance(
+    channel: Channel,
+    initialContent?: ReactNode,
+  ) {
+    return this.createInstance(
+      new ChannelMessageRenderer(channel),
+      initialContent,
+    )
   }
 
   protected createCommandReplyRendererInstance(
     commandInteraction: CommandInteraction,
+    initialContent?: ReactNode,
   ): ReacordInstance {
-    return this.createInstance(new CommandReplyRenderer(commandInteraction))
+    return this.createInstance(
+      new CommandReplyRenderer(commandInteraction),
+      initialContent,
+    )
   }
 
-  private createInstance(renderer: Renderer) {
+  private createInstance(renderer: Renderer, initialContent?: ReactNode) {
     if (this.renderers.length > this.maxInstances) {
       this.deactivate(this.renderers[0]!)
     }
@@ -65,6 +78,10 @@ export abstract class Reacord {
 
     const container = reconciler.createContainer(renderer, 0, false, {})
 
+    if (initialContent !== undefined) {
+      reconciler.updateContainer(initialContent, container)
+    }
+
     return {
       render: (content: ReactNode) => {
         reconciler.updateContainer(content, container)
diff --git a/playground/command-handler.ts b/playground/command-handler.ts
index 791828e..2b49ad0 100644
--- a/playground/command-handler.ts
+++ b/playground/command-handler.ts
@@ -19,7 +19,6 @@ export function createCommandHandler(client: Client, commands: Command[]) {
         )
       }
     }
-    console.info("ready 💖")
   })
 
   client.on("interactionCreate", async (interaction) => {
diff --git a/playground/main.tsx b/playground/main.tsx
index 0972c52..f50dcf9 100644
--- a/playground/main.tsx
+++ b/playground/main.tsx
@@ -12,36 +12,28 @@ const client = new Client({
 
 const reacord = new ReacordDiscordJs(client)
 
-// client.on("ready", async () => {
-//   const now = new Date()
+client.on("ready", () => {
+  console.info("ready 💖")
 
-//   function UptimeCounter() {
-//     const [uptime, setUptime] = React.useState(0)
+  // const now = new Date()
 
-//     React.useEffect(() => {
-//       const interval = setInterval(() => {
-//         setUptime(Date.now() - now.getTime())
-//       }, 5000)
-//       return () => clearInterval(interval)
-//     }, [])
+  // function UptimeCounter() {
+  //   const [uptime, setUptime] = React.useState(0)
 
-//     return (
-//       <Embed>this bot has been running for {prettyMilliseconds(uptime)}</Embed>
-//     )
-//   }
+  //   React.useEffect(() => {
+  //     const interval = setInterval(() => {
+  //       setUptime(Date.now() - now.getTime())
+  //     }, 5000)
+  //     return () => clearInterval(interval)
+  //   }, [])
 
-//   const channelId = "671787605624487941"
+  //   return (
+  //     <Embed>this bot has been running for {prettyMilliseconds(uptime)}</Embed>
+  //   )
+  // }
 
-//   const channel =
-//     client.channels.cache.get(channelId) ||
-//     (await client.channels.fetch(channelId))
-
-//   if (!channel?.isText()) {
-//     throw new Error("channel is not text")
-//   }
-
-//   reacord.send(channel).render(<UptimeCounter />)
-// })
+  // reacord.send("671787605624487941", <UptimeCounter />)
+})
 
 createCommandHandler(client, [
   {
@@ -56,7 +48,7 @@ createCommandHandler(client, [
     name: "select",
     description: "shows a select",
     run: (interaction) => {
-      reacord.reply(interaction).render(<FruitSelect />)
+      reacord.reply(interaction, <FruitSelect />)
     },
   },
 ])