Add API development server (#504)

Co-authored-by: Eric Lau <[email protected]>

Author: CoveMB

.gitignore

@@ -4,4 +4,6 @@ node_modules
 
 .env
 .env.local
-.vscode/
+.vscode/settings.json
+
+*deno.lock

.vscode/example.settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "deno.enablePaths": [
+    "packages/ui/api",
+    "packages/ui/scripts/development-server.ts"
+  ],
+  "deno.enable": true,
+  "deno.path": "/opt/homebrew/bin/deno" // Update this to your Deno path
+}

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "denoland.vscode-deno",
+    "ms-vscode.vscode-typescript-tslint-plugin",
+  ]
+}

CONTRIBUTING.md

@@ -0,0 +1,61 @@
+Contributing to OpenZeppelin Contracts Wizard
+=======
+
+Contributions to OpenZeppelin Contracts Wizard are welcome. Please review the information below to test out and contribute your changes.
+
+## Project layout
+
+- `packages/core` contains the code generation logic for each language under separately named subfolders.
+- `packages/ui` is the interface built in Svelte.
+
+## Building and testing the project
+
+### Prerequisites
+The following prerequisites are required to build the project locally:
+- [Node.js](https://nodejs.org/)
+- [Yarn](https://yarnpkg.com/getting-started/install)
+
+If you want to run the local API server for the AI Assistant, you also need to install [Deno](https://github.com/denoland/deno?tab=readme-ov-file#installation).
+
+### Installing dependencies
+From the root directory:
+- ```yarn install```
+
+The dependencies must be installed at least once before proceeding to any of the below.
+
+### Running tests
+From each language's subfolder under `packages/core`:
+- ```yarn test```
+
+Ensure that all tests pass.  If you are adding new functionality, include testcases as appropriate.
+If tests fail due to snapshots not matching and the new behavior is expected, run `yarn test:update-snapshots` to update AVA snapshots and commit the changes.
+
+> [!TIP]
+> From the root directory, you can use `yarn run:core` to run specific commands within `core/{language}` folders.
+> For example, running `yarn run:core cairo test` from the root directory will run tests for Cairo.
+
+### Running linter
+From the root directory:
+- ```yarn lint```
+
+If linting errors or warnings occur, run `yarn lint --fix` to attempt to auto-fix issues.  If there are remaining issues that cannot be auto-fixed, manually address them and re-run the command to ensure it passes.
+
+### Running the UI
+From the `packages/ui` directory:
+- Run `yarn dev` to start a local server for the UI.
+  - Default port is 8080. To use another port, set the environment variable `PORT`, for example: `PORT=800 yarn dev`
+
+### Running the AI Assistant (Optional)
+Create a `.env` file at the root directory, set the environment variable `OPENAI_API_KEY` using your OpenAI API key, and configure your OpenAI project limits to allow the `gpt-4o-mini` model or set the environment variable `OPENAI_MODEL` to a specific model.
+
+Then from the `packages/ui` directory:
+- In one terminal, start the UI according to the above section if the UI isn't already running.
+- In another terminal, run `yarn dev:api` to start a local API server which handles AI Assistant functions.
+  - Default port is 3000. To use another port, set the environment variable `API_PORT`
+
+> [!TIP]
+> You can also start both the UI and API servers simultaneously by running `yarn dev` from the root directory.
+
+## Creating Pull Requests (PRs)
+
+As a contributor, we ask that you fork this repository, work on your own fork and then submit pull requests. The pull requests will be reviewed and eventually merged into the main repo. See ["Fork-a-Repo"](https://help.github.com/articles/fork-a-repo/) for how this works.

README.md

@@ -8,22 +8,9 @@ Contracts Wizard is a web application to interactively build a contract out of c
 
 [![](./screenshot.png)](https://wizard.openzeppelin.com/)
 
-## Development
+## Contributing
 
-Install dependencies with `yarn install`.
-
-`packages/core` contains the code generation logic for each language under separately named subfolders. From each language's subfolder:
-- Run `yarn test` to run the tests.
-- Run `yarn test:update-snapshots` to update AVA snapshots and run the tests.
-- Run `yarn lint` to run the linter across the codebase (optionally `yarn lint --fix` will automatically fix fixable issues, like formatting issues).
-
-`packages/ui` is the interface built in Svelte. From the `packages/ui` directory, run `yarn dev` to spin up a local server to develop the UI.
-- By default, the local server runs on port 8080. To use another port, set the environment variable `PORT`, for example: `PORT=800 yarn dev`
-
-You'll need to supply your own environment variables if you want to enable Wizard AI Assistant (OPENAI_API_KEY) and/or logging (REDIS_URL, REDIS_TOKEN).
-
-You can run yarn commands directly into `core/{language}` folders with `yarn run:core`.
-For example, running `yarn run:core cairo test` from the root directory will run tests for Cairo.
+See our [contributing guidelines](CONTRIBUTING.md).
 
 ## Embedding
 

package.json

@@ -5,6 +5,8 @@
     "prepare": "wsrun -m prepare",
     "lint": "eslint",
     "dev:ui": "yarn --cwd ./packages/ui dev",
+    "dev:api": "yarn --cwd ./packages/ui dev:api",
+    "dev": "concurrently --kill-others-on-fail --names \"ui,api\" --prefix-colors \"magenta.bold,green.bold\" \"yarn dev:ui\" \"yarn dev:api\"",
     "run:core": "node ./scripts/run-command.mjs"
   },
   "workspaces": {
@@ -19,6 +21,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "concurrently": "^9.1.2",
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
@@ -28,4 +31,4 @@
     "typescript-eslint": "^8.24.1",
     "wsrun": "^5.2.4"
   }
-}
+}

packages/ui/api/ai.ts

@@ -1,5 +1,4 @@
-import OpenAI from 'https://esm.sh/[email protected]';
-import { OpenAIStream, StreamingTextResponse } from 'https://esm.sh/[email protected]';
+import { OpenAIStream } from 'https://esm.sh/[email protected]';
 import {
   erc20Function,
   erc721Function,
@@ -9,28 +8,16 @@ import {
   governorFunction,
   customFunction,
 } from '../src/solidity/wiz-functions.ts';
-import { Redis } from 'https://esm.sh/@upstash/[email protected]';
+import { getRedisInstance } from './services/redis.ts';
+import { getOpenAiInstance } from './services/open-ai.ts';
+import { getEnvironmentVariableOr } from './utils/env.ts';
 
-export default async (req: Request) => {
+export default async (req: Request): Promise<Response> => {
   try {
     const data = await req.json();
-    const apiKey = Deno.env.get('OPENAI_API_KEY');
 
-    const redisUrl = Deno.env.get('REDIS_URL');
-    const redisToken = Deno.env.get('REDIS_TOKEN');
-
-    if (!redisUrl || !redisToken) {
-      throw new Error('missing redis credentials');
-    }
-
-    const redis = new Redis({
-      url: redisUrl,
-      token: redisToken,
-    });
-
-    const openai = new OpenAI({
-      apiKey: apiKey,
-    });
+    const redis = getRedisInstance();
+    const openai = getOpenAiInstance();
 
     const validatedMessages = data.messages.filter((message: { role: string; content: string }) => {
       return message.content.length < 500;
@@ -49,7 +36,7 @@ export default async (req: Request) => {
     ];
 
     const response = await openai.chat.completions.create({
-      model: 'gpt-4-1106-preview',
+      model: getEnvironmentVariableOr('OPENAI_MODEL', 'gpt-4o-mini'),
       messages,
       functions: [
         erc20Function,
@@ -87,7 +74,14 @@ export default async (req: Request) => {
         await redis.hset(`chat:${id}`, payload);
       },
     });
-    return new StreamingTextResponse(stream);
+
+    return new Response(stream, {
+      headers: new Headers({
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+        'Content-Type': 'text/html; charset=utf-8',
+      }),
+    });
   } catch (e) {
     console.error('Could not retrieve results:', e);
     return Response.json({

packages/ui/api/services/dev-mocks/redis.ts

@@ -0,0 +1,32 @@
+// deno-lint-ignore-file require-await
+import type { Redis } from 'https://esm.sh/@upstash/[email protected]';
+
+export default class RedisMock implements Pick<Redis, 'exists' | 'hset'> {
+  private store: Record<
+    string,
+    {
+      [field: string]: unknown;
+    }
+  > = {};
+
+  async exists(key: string) {
+    return this.store[key] ? 1 : 0;
+  }
+
+  async hset(
+    key: string,
+    kv: {
+      [field: string]: unknown;
+    },
+  ) {
+    this.store[key] = this.store[key] || {};
+
+    const newFields = Object.entries(kv).filter(([field]) => !(field in this.store[key]));
+
+    newFields.forEach(([field, value]) => {
+      this.store[key][field] = value;
+    });
+
+    return newFields.length;
+  }
+}

packages/ui/api/services/open-ai.ts

@@ -0,0 +1,10 @@
+import OpenAI from 'https://esm.sh/[email protected]';
+import { getEnvironmentVariablesOrFail } from '../utils/env.ts';
+
+export const getOpenAiInstance = () => {
+  const { OPENAI_API_KEY } = getEnvironmentVariablesOrFail('OPENAI_API_KEY');
+
+  return new OpenAI({
+    apiKey: OPENAI_API_KEY,
+  });
+};

packages/ui/api/services/redis.ts

@@ -0,0 +1,14 @@
+import { Redis } from 'https://esm.sh/@upstash/[email protected]';
+import RedisMock from './dev-mocks/redis.ts';
+import { getEnvironmentVariableOr, getEnvironmentVariablesOrFail } from '../utils/env.ts';
+
+export const getRedisInstance = () => {
+  if (getEnvironmentVariableOr('ENV', 'production') === 'dev') return new RedisMock();
+
+  const { REDIS_URL, REDIS_TOKEN } = getEnvironmentVariablesOrFail(['REDIS_URL', 'REDIS_TOKEN']);
+
+  return new Redis({
+    url: REDIS_URL,
+    token: REDIS_TOKEN,
+  });
+};