diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 99a0d8b..e62ba59 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -4,8 +4,6 @@ module.exports = {
     plugins: ['@typescript-eslint'],
     root: true,
     ignorePatterns: [
-        "src/api/library_checker.ts",
-        "src/api/library_checker.client.ts",
-        "src/api/google/*"
+        "src/proto/*",
     ]
 };
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 9dc8dd5..8b222ab 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -23,7 +23,9 @@ jobs:
         run: |
           npm ci
       - name: Generate protoc
-        run: npx protoc --ts_out src/api/ --proto_path ./library-checker-judge/api/proto ./library-checker-judge/api/proto/library_checker.proto
+        run: npm run protoc
+        env:
+          PROTO_PATH: ./library-checker-judge/api/proto
       - name: Prettier
         run: |
           npm run prettier:check
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 5c850c9..e1d98ba 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -48,7 +48,9 @@ jobs:
         run: npm ci
 
       - name: Generate protoc
-        run: npx protoc --ts_out src/api/ --proto_path ./library-checker-judge/api/proto ./library-checker-judge/api/proto/library_checker.proto
+        run: npm run protoc
+        env:
+          PROTO_PATH: ./library-checker-judge/api/proto
 
       - name: Run npm build
         run: npm run build -- --mode ${{ (inputs.env == 'prod' && 'production') || 'staging' }}
diff --git a/.gitignore b/.gitignore
index 3c931f3..cda0b1f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 /node_modules
 /dist
-/src/api/library_checker.ts
-/src/api/library_checker.client.ts
-/src/api/google/
\ No newline at end of file
+/src/proto/*
+!/src/proto/.gitkeep
diff --git a/.prettierignore b/.prettierignore
index b06c40c..125b96c 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1 @@
-src/api/library_checker.ts
-src/api/library_checker.client.ts
-src/api/google/*
\ No newline at end of file
+src/proto/*
\ No newline at end of file
diff --git a/README.md b/README.md
index 880dbf9..f0c8e84 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,8 @@
 ```sh
 npm install # or npm ci
 
-npx protoc --ts_out src/api/ --proto_path ../library-checker-judge/api/proto ../library-checker-judge/api/proto/library_checker.proto
+# generate API client code from protoc
+PROTO_PATH=../library-checker-judge/api/proto npm run protoc
 
 # access to the API server of local (you must launch api server in local)
 npm run dev
diff --git a/package.json b/package.json
index 5b50d2a..95a8e00 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,8 @@
     "preview": "vite preview",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettier": "prettier --write \"src/**/*.{ts,js,tsx,jsx}\"",
-    "prettier:check": "prettier --check \"src/**/*.{ts,js,tsx,jsx}\""
+    "prettier:check": "prettier --check \"src/**/*.{ts,js,tsx,jsx}\"",
+    "protoc": "protoc --ts_out src/proto --proto_path ${PROTO_PATH} ${PROTO_PATH}/library_checker.proto"
   },
   "browserslist": {
     "production": [
diff --git a/src/api/client_wrapper.ts b/src/api/client_wrapper.ts
index 9fba7b5..a159eca 100644
--- a/src/api/client_wrapper.ts
+++ b/src/api/client_wrapper.ts
@@ -4,7 +4,7 @@ import {
   UseQueryResult,
 } from "@tanstack/react-query";
 import { AuthState } from "../contexts/AuthContext";
-import { LibraryCheckerServiceClient } from "./library_checker.client";
+import { LibraryCheckerServiceClient } from "../proto/library_checker.client";
 import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
 import { RpcOptions } from "@protobuf-ts/runtime-rpc";
 import {
@@ -16,7 +16,7 @@ import {
   SubmissionInfoResponse,
   SubmissionListResponse,
   UserInfoResponse,
-} from "./library_checker";
+} from "../proto/library_checker";
 
 export const authMetadata = (state: AuthState): RpcOptions | undefined => {
   if (!state.token) {
diff --git a/src/components/ProblemList.tsx b/src/components/ProblemList.tsx
index 78fed50..378b788 100644
--- a/src/components/ProblemList.tsx
+++ b/src/components/ProblemList.tsx
@@ -5,7 +5,7 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
 import React from "react";
-import { Problem } from "../api/library_checker";
+import { Problem } from "../proto/library_checker";
 import { Link } from "react-router-dom";
 import { lightGreen, cyan } from "@mui/material/colors";
 import KatexTypography from "./katex/KatexTypography";
diff --git a/src/components/SubmissionTable.tsx b/src/components/SubmissionTable.tsx
index 4504a77..31c69fd 100644
--- a/src/components/SubmissionTable.tsx
+++ b/src/components/SubmissionTable.tsx
@@ -11,10 +11,10 @@ import "katex/dist/katex.min.css";
 import React from "react";
 import { Link } from "react-router-dom";
 import { useLangList } from "../api/client_wrapper";
-import { SubmissionOverview } from "../api/library_checker";
+import { SubmissionOverview } from "../proto/library_checker";
 import KatexTypography from "./katex/KatexTypography";
 import { styled } from "@mui/system";
-import { Timestamp } from "../api/google/protobuf/timestamp";
+import { Timestamp } from "../proto/google/protobuf/timestamp";
 
 interface Props {
   overviews: SubmissionOverview[];
diff --git a/src/pages/ProblemInfo.tsx b/src/pages/ProblemInfo.tsx
index 29023a5..cfdc128 100644
--- a/src/pages/ProblemInfo.tsx
+++ b/src/pages/ProblemInfo.tsx
@@ -14,7 +14,7 @@ import library_checker_client, {
   useLangList,
   useProblemInfo,
 } from "../api/client_wrapper";
-import { ProblemInfoResponse } from "../api/library_checker";
+import { ProblemInfoResponse } from "../proto/library_checker";
 import SourceEditor from "../components/SourceEditor";
 import { AuthContext } from "../contexts/AuthContext";
 import { GitHub, FlashOn, Person } from "@mui/icons-material";
diff --git a/src/pages/Problems.tsx b/src/pages/Problems.tsx
index 40fea71..e59e9f0 100644
--- a/src/pages/Problems.tsx
+++ b/src/pages/Problems.tsx
@@ -7,7 +7,7 @@ import {
   useProblemList,
   useUserInfo,
 } from "../api/client_wrapper";
-import { SolvedStatus } from "../api/library_checker";
+import { SolvedStatus } from "../proto/library_checker";
 import ProblemList from "../components/ProblemList";
 import { AuthContext } from "../contexts/AuthContext";
 import {
diff --git a/src/pages/SubmissionInfo.tsx b/src/pages/SubmissionInfo.tsx
index dc91db6..d9e7b69 100644
--- a/src/pages/SubmissionInfo.tsx
+++ b/src/pages/SubmissionInfo.tsx
@@ -26,7 +26,7 @@ import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
 import { LibraryBooks } from "@mui/icons-material";
 import { Collapse, Container, Divider, IconButton } from "@mui/material";
-import { SubmissionCaseResult } from "../api/library_checker";
+import { SubmissionCaseResult } from "../proto/library_checker";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 
diff --git a/src/proto/.gitkeep b/src/proto/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/ProblemCategorizer.ts b/src/utils/ProblemCategorizer.ts
index ba4e727..58e1b64 100644
--- a/src/utils/ProblemCategorizer.ts
+++ b/src/utils/ProblemCategorizer.ts
@@ -1,4 +1,4 @@
-import { Problem, ProblemCategory } from "../api/library_checker";
+import { Problem, ProblemCategory } from "../proto/library_checker";
 
 export type CategorisedProblems = {
   name: string;