diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000000000000000000000000000000000000..5c6935393a7575f61c01805af1abb8ed26e5fad3
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,62 @@
+FROM node:18 AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+ elif [ -f package-lock.json ]; then npm ci; \
+ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+ else echo "Lockfile not found." && exit 1; \
+ fi
+
+# Uncomment the following lines if you want to use a secret at buildtime,
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true \
+# $(cat /run/secrets/HF_EXAMPLE_SECRET)
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+# RUN yarn build
+
+# If you use yarn, comment out this line and use the line above
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+CMD ["node", "server.js"]
\ No newline at end of file
diff --git a/README.md b/README.md
index 260b776596352b9e9eeff106b8b9fbe89cad3c13..f9fe512c1ade7ccb6358249b8b535bbdb9d3efd4 100644
--- a/README.md
+++ b/README.md
@@ -3,27 +3,12 @@ title: Codetree
emoji: 🎳🌲
colorFrom: purple
colorTo: yellow
-sdk: static
+sdk: docker
+app_port: 3000
pinned: false
-app_file: out/index.html
---
-
- Next-gen online editor Playground, built with Next and hosted with Vercel
-
-
-
-
-
-
-
-# Codetree : Standalone version
-
-Codetree is a lightning fast ⚡️⚡️⚡️ code playground with automatic module detection as main feature. Unlike https://codepen.io/, Codetree is built on top of WebAssembly using esbuild, the code is compiled directly in your browser, without any backend and converted into machine language, allowing extremely fast execution and offline-mode.
-
-## Usage
-
-No need to install any npm package manually, codetree automatically detects the presence of import/require syntax in your file, downloads and installs npm package for you, for example just type `import React from "react"` for installing React library.
+# Codetree
## Features
diff --git a/components/Playground/index.tsx b/components/Playground/index.tsx
index da89e1c064a07dbbb00d071d5118de1d284684ee..b57b2d5c1e17b041672ccd552bc4c88be23e83e3 100644
--- a/components/Playground/index.tsx
+++ b/components/Playground/index.tsx
@@ -1,6 +1,5 @@
import React, { useMemo, useRef, useEffect, useState, ChangeEvent, FormEvent } from "react";
-import { useChat, Message } from "ai/react";
-import { FunctionCallHandler, nanoid } from "ai";
+import { useChat } from "ai/react";
import { useAppDispatch, useAppSelector } from "../../store/hook";
import {
compiler_state,
@@ -105,7 +104,7 @@ const Playground = () => {
className="relative w-full"
>
-