diff --git a/packages/website/.env b/packages/website/.env
new file mode 100644
index 000000000..7f9e6cf09
--- /dev/null
+++ b/packages/website/.env
@@ -0,0 +1,2 @@
+NODE_ENV=production
+VITE_APP_ROOT=https://api.bgm.tv
\ No newline at end of file
diff --git a/packages/website/package.json b/packages/website/package.json
index 02589db74..4314bc2d3 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
diff --git a/packages/website/src/App.tsx b/packages/website/src/App.tsx
index ae775ed0b..8d846db9e 100644
--- a/packages/website/src/App.tsx
+++ b/packages/website/src/App.tsx
@@ -1,9 +1,16 @@
-import React, { useState, FC } from 'react'
+import React, { useState, FC, useEffect } from 'react'
 import { Button } from '@bangumi/design'
 import style from './App.module.css'
-
+import { getCharacterDetail } from './api/character'
+import { CharacterDetail } from './types/common'
 const App: FC = () => {
   const [count, setCount] = useState(0)
+  const [detail, setDetail] = useState<CharacterDetail|null>(null)
+  useEffect(() => {
+    getCharacterDetail('39115').then(res => {
+      setDetail(res.data)
+    })
+  }, [])
   return (
     <div className={style.main}>
       <div className={style.count}>
@@ -16,6 +23,24 @@ const App: FC = () => {
         Increase
       </Button>
       <Button disabled>Disabled</Button>
+      { detail
+        ? <div>
+        <h1>{detail.name}</h1>
+            {
+              detail.infobox.map(el =>
+                <tr key={el.key}>
+                  <td>{el.key}</td>
+                  <tr>
+                    { Array.isArray(el.value)
+                      ? el.value.map(val => <p key={val.k}>{`${val.k}:${val.v}`}</p>)
+                      : el.value }
+                  </tr>
+                </tr>
+              )
+            }
+        <p>{detail.summary}</p>
+        </div>
+        : <div>loading</div>}
     </div>
   )
 }
diff --git a/packages/website/src/api/character.ts b/packages/website/src/api/character.ts
new file mode 100644
index 000000000..dc2d95944
--- /dev/null
+++ b/packages/website/src/api/character.ts
@@ -0,0 +1,9 @@
+import { request } from './request'
+import { CharacterDetail } from '../types/common'
+import { AxiosPromise } from 'axios'
+
+type CharacterId = string;
+
+export const getCharacterDetail = (characterId:CharacterId):AxiosPromise<CharacterDetail> => {
+  return request(`/v0/characters/${characterId}`)
+}
diff --git a/packages/website/src/api/request.ts b/packages/website/src/api/request.ts
new file mode 100644
index 000000000..a2a5e4438
--- /dev/null
+++ b/packages/website/src/api/request.ts
@@ -0,0 +1,24 @@
+import axios from 'axios'
+
+const baseURL = 'https://api.bgm.tv'
+export const request = axios.create({
+  // baseURL: import.meta.env.VITE_APP_ROOT as string,
+  // import.meta无法通过jest https://github.com/facebook/jest/issues/4842 可能需要改一下jest配置
+  baseURL,
+  timeout: 6000 // 请求超时时间
+})
+
+// 异常拦截处理器
+const errorHandler = (error:any) => {
+  console.log(error)
+
+  return Promise.reject(error)
+}
+
+request.interceptors.request.use(config => {
+  return config
+}, errorHandler)
+
+request.interceptors.response.use((response) => {
+  return response
+}, errorHandler)
diff --git a/packages/website/src/types/common.ts b/packages/website/src/types/common.ts
new file mode 100644
index 000000000..7bca68125
--- /dev/null
+++ b/packages/website/src/types/common.ts
@@ -0,0 +1,31 @@
+type infoBox = {
+  key:string,
+  value:string | {
+    k:string
+    v:string
+  }[]
+}[]
+
+export type CharacterDetail={
+  id: number
+  name: string
+  type: number
+  images: {
+    large: string
+    medium: string
+    small: string
+    grid: string
+  },
+  summary: string
+  locked: boolean
+  infobox: infoBox
+  gender: string
+  blooType: number
+  birthYear: number
+  birthMon: number
+  birthDay: number
+  stat: {
+    comments: number
+    collects: number
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d7c939624..1e4af75cc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,12 +75,14 @@ importers:
       '@types/react': ^17.0.33
       '@types/react-dom': ^17.0.10
       '@vitejs/plugin-react': ^1.0.7
+      axios: ^0.24.0
       react: ^17.0.2
       react-dom: ^17.0.2
       typescript: ^4.4.4
       vite: ^2.7.10
       vite-plugin-style-import: ^1.4.1
     dependencies:
+      axios: 0.24.0
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
     devDependencies:
@@ -1994,6 +1996,14 @@ packages:
     resolution: {integrity: sha1-x57Zf380y48robyXkLzDZkdLS3k=}
     dev: true
 
+  /axios/0.24.0:
+    resolution: {integrity: sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==}
+    dependencies:
+      follow-redirects: 1.14.7
+    transitivePeerDependencies:
+      - debug
+    dev: false
+
   /babel-jest/27.4.6_@babel+core@7.16.7:
     resolution: {integrity: sha512-qZL0JT0HS1L+lOuH+xC2DVASR3nunZi/ozGhpgauJHgmI7f8rudxf6hUjEHympdQ/J64CdKmPkgfJ+A3U6QCrg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -2821,6 +2831,16 @@ packages:
       path-exists: 4.0.0
     dev: true
 
+  /follow-redirects/1.14.7:
+    resolution: {integrity: sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      debug: '*'
+    peerDependenciesMeta:
+      debug:
+        optional: true
+    dev: false
+
   /form-data/3.0.1:
     resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
     engines: {node: '>= 6'}