4const app = new Hono();
5
6app.route("/api", backend);
7app.get("/", async (c) => {
8 return c.html(
39 }
40
41 const { messages, project, branchId, anthropicApiKey, images } = await c.req.json();
42
43 console.log("Original messages:", JSON.stringify(messages, null, 2));
110 }
111
112 let apiKey;
113 if (!anthropicApiKey) {
114 return Response.json({
115 error: "Anthropic API key is required. Please log out and add your Anthropic API key to use this app.",
116 }, { status: 400 });
117 } else if (anthropicApiKey === Deno.env.get("PASSWORD")) {
118 apiKey = Deno.env.get("PROVIDED_ANTHROPIC_API_KEY");
119 } else {
120 apiKey = anthropicApiKey;
121 }
122
123 const anthropic = createAnthropic({
124 apiKey,
125 });
126
43
44 try {
45 const response = await fetch("/api/create-branch", {
46 method: "POST",
47 headers: {
112 project,
113 bearerToken,
114 anthropicApiKey,
115 setProject,
116}: {
117 project: any;
118 bearerToken: string;
119 anthropicApiKey: string;
120 setProject: (project: any) => void;
121}) {
158 status,
159 } = useChat({
160 api: "/api/send-message",
161 body: {
162 project,
163 branchId,
164 anthropicApiKey,
165 images: images
166 .filter((img): img is string => {
247 }, [handleStop]);
248
249 // Show a warning message if no anthropicApiKey is provided
250 const showAnthropicKeyWarning = !anthropicApiKey;
251
252 return (
281 {showAnthropicKeyWarning && (
282 <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 rounded">
283 <p className="font-bold">Anthropic API Key Missing</p>
284 <p>Please log out and add your Anthropic API key to use this app.</p>
285 </div>
286 )}
37 setIsLoadingBranches(true);
38 try {
39 const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
40 headers: {
41 "Authorization": `Bearer ${bearerToken}`,
107 const fetchBranches = async () => {
108 try {
109 const response = await fetch(`/api/project-branches?projectId=${projectId}`, {
110 headers: {
111 "Authorization": `Bearer ${bearerToken}`,
16export function App() {
17 const [bearerToken, setBearerToken] = useLocalStorage("bearer", "");
18 const [anthropicApiKey, setAnthropicApiKey] = useLocalStorage("anthropic_api_key", "");
19 const [projectJSON, setProjectJSON] = useLocalStorage("project", "");
20 const [project, setProject_] = useState(safeParse(projectJSON));
27 function handleLogout() {
28 setBearerToken("");
29 // Keep the anthropic API key in case the user wants to reuse it
30 }
31
46 <Chat
47 bearerToken={bearerToken}
48 anthropicApiKey={anthropicApiKey}
49 project={project}
50 setProject={setProject}
2import querystring from "npm:querystring";
3
4const NOW_PLAYING_ENDPOINT = "https://api.spotify.com/v1/me/player/currently-playing";
5const TOKEN_ENDPOINT = "https://accounts.spotify.com/api/token";
6
7const client_id = Deno.env.get("spotify_client_id");
1import { fetch } from "https://esm.town/v/std/fetch";
2
3export async function postHogAPICapture({ key, event, properties, distinct_id }: {
4 key: string;
5 event: string;
8}) {
9 const body = {
10 "api_key": key,
11 "event": event,
12 "properties": properties,
11 },
12 {
13 "prompt": "weather dashboard for nyc using open-meteo API for NYC with icons",
14 "title": "Weather App",
15 "code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>NYC Weather</title>\n <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n <style>\n .weather-icon {\n font-size: 48px;\n margin-bottom: 16px;\n }\n </style>\n</head>\n<body class=\"h-screen bg-blue-100 flex justify-center items-center p-4\">\n <div class=\"bg-white p-8 rounded-md shadow-md w-full max-w-sm md:p-12 lg:p-16 xl:p-20\">\n <h1 class=\"text-2xl font-bold mb-4 text-center text-blue-500\">NYC Weather</h1>\n <div id=\"weather\" class=\"mb-4 p-4 text-center\">\n <div id=\"temperature\" class=\"text-4xl font-bold mb-4\"></div>\n <div id=\"condition\" class=\"text-xl font-medium mb-4\"></div>\n <div id=\"humidity\" class=\"text-lg font-light mb-2\">Humidity: <span id=\"humidity-value\"></span>%</div>\n <div id=\"wind\" class=\"text-lg font-light mb-2\">Wind: <span id=\"wind-value\"></span> mph</div>\n <i id=\"weather-icon\" class=\"weather-icon text-blue-500\"></i>\n </div>\n </div>\n <p class=\"fixed bottom-0 left-0 right-0 text-center p-4 text-gray-600 md:p-6 lg:p-8 xl:p-10\">\n Built on <a class=\"text-blue-600\" href=\"https://cerebrascoder.com\">Cerebras Coder</a>\n </p>\n\n <script>\n // Sample weather data\n const weatherData = {\n temperature: 75,\n condition: 'Sunny',\n humidity: 60,\n wind: 10,\n icon: 'sun'\n };\n\n document.getElementById('temperature').innerText = `${weatherData.temperature}°F`;\n document.getElementById('condition').innerText = weatherData.condition;\n document.getElementById('humidity-value').innerText = weatherData.humidity;\n document.getElementById('wind-value').innerText = weatherData.wind;\n\n // Map weather icon\n const weatherIcons = {\n 'sun': '☀',\n 'cloud': '☀',\n 'rain': '☃',\n 'snow': '☄'\n };\n\n document.getElementById('weather-icon').innerHTML = weatherIcons[weatherData.icon] || '';\n </script>\n</body>\n</html>",
8
91. Sign up for [Cerebras](https://cloud.cerebras.ai/)
102. Get a Cerebras API Key
113. Save it in your project env variable called `CEREBRAS_API_KEY`
