v1 working

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -0,0 +1,19 @@
+# Llama Coder
+
+This project is a simple Claude Artifacts clone using Llama 3.1 405b.
+
+## How it works
+
+Takes the user's query, adds a system promt, and sends it to Llama 405b to code. After doing some parsing, it displays it to Sandpack to be viewed as an interactive code editor.
+
+## TODOs - hassan
+
+- [ ] Finish styling main hero – mostly GitHub at top right
+- [ ] Make README nice
+- [ ] Edit the footer to look nicer
+- [ ] Add extra input (for followups) w/ messages support
+- [ ] Add the plus-sign for new chat + github icon
+
+## Future TODOs
+
+- [ ] Fix "Open Sandbox" button by making it open with the tailwindcss external resource

app/api/generateCode/route.ts

@@ -0,0 +1,41 @@
+import {
+  TogetherAIStream,
+  TogetherAIStreamPayload,
+} from "@/utils/TogetherAIStream";
+import { z } from "zod";
+
+export async function POST(req: Request) {
+  let json = await req.json();
+
+  let { prompt, model } = z
+    .object({
+      prompt: z.string(),
+      model: z.string(),
+    })
+    .parse(json);
+
+  const payload: TogetherAIStreamPayload = {
+    model,
+    messages: [
+      {
+        role: "system",
+        content:
+          "You are an expert frontend React engineer. Create a React component for whatever the user is asking you to create and make sure it can run by itself by using a default export. Use TypeScript as the language. Use Tailwind classes for styling, but do not use arbitrary values (e.g. h-[600px]). Please make sure the React app is interactive and functional by creating state when needed. ONLY return the React code, nothing else. Its very important for my job that you only return the React code. I will tip you $1 million if you only return code. DO NOT START WITH ```typescript or ```javascript or ```tsx or ```. Just the code.",
+      },
+      {
+        role: "user",
+        content:
+          prompt +
+          "\n Please ONLY return code, NO backticks or language names.",
+      },
+    ],
+    stream: true,
+  };
+  const stream = await TogetherAIStream(payload);
+
+  return new Response(stream, {
+    headers: new Headers({
+      "Cache-Control": "no-cache",
+    }),
+  });
+}

app/globals.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Bold.ttf");
+  font-weight: 700;
+  font-style: normal;
+}

app/layout.tsx

@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import Image from "next/image";
+import bgImg from "@/public/halo.png";
+import PlausibleProvider from "next-plausible";
+
+let title = "Llama Coder – AI Code Generator";
+let description = "Generate your next app with Llama 3.1 405B";
+let url = "https://llamacoder.io/";
+let ogimage = "https://llamacoder.io/og-image.png";
+let sitename = "llamacoder.io";
+
+export const metadata: Metadata = {
+  metadataBase: new URL(url),
+  title,
+  description,
+  icons: {
+    icon: "/favicon.ico",
+  },
+  openGraph: {
+    images: [ogimage],
+    title,
+    description,
+    url: url,
+    siteName: sitename,
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [ogimage],
+    title,
+    description,
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <head>
+        <PlausibleProvider domain="llamacoder.io" />
+      </head>
+      <body className="bg-brand antialiased">
+        <div className="absolute inset-x-0 flex justify-center">
+          <Image
+            src={bgImg}
+            alt=""
+            className="w-full max-w-[1200px] mix-blend-screen"
+            priority
+          />
+        </div>
+        <div className="isolate">{children}</div>
+      </body>
+    </html>
+  );
+}