Sign in Subscribe
By PINB in context7 —

Anti-Gravity에서 Context 7 MCP 서버를 활용하기

Context 7 MCP 서버는 AI가 무엇을 알고 있느냐에 따라 결과물이 천차만별인 바이브 코딩 과정에서 AI에게 필요한 컨텍스트를 전달하기 위해 활용되는 중간 단계(MCP 서버)이다.

이 서버를 활용하면 AI가 디자인 시스템, 컨텍스트, 혹은 로직과 같은 툴들을 훨씬 더 쉽게 사용할 수 있게 된다.

1단계: Context 7 계정 설정 및 API 키 발급

  1. 로그인 및 키 생성: Context 7 서버 웹사이트에 접속하여 구글 또는 GitHub 계정으로 로그인한다.
Context7 - Up-to-date documentation for LLMs and AI code editors
Generate context with up-to-date documentation for LLMs and AI code editors
Context7
  1. 로그인이 완료되면 대시보드 화면에서 API 키 생성 버튼을 눌러 키를 생성한다.
    처음 생성하는 API키에는 API Key Name을 입력하고 만들기 버튼을 눌러준다.
  1. 생성된 API 키는 해당 창을 끄면 다시 볼 수 없으므로, 반드시 키를 복사하여 다른 곳에 기록해 두어야 한다.

2단계: Anti-Gravity에 Context 7 서버 추가

  1. Anti-Gravity 설정 접속: Anti-Gravity로 돌아가 우측에 열려 있는 에이전트 탭에서 설정(... 표시)를 누른 다음, MCP 서버 메뉴를 클릭한다..

Context 7 서버는 현재 Anti-Gravity에서 지원되는 MCP Store 리스트에 등록되어 있지 않다. 따라서 직접 Context 7 MCP 서버를 추가해줘야 한다.

  1. 설정 파일 열기: MCP Store 옆에 Manage MCP Servers 버튼을 클릭한다.

'Config File'을 보는 버튼을 클릭한다. 이 공간에 코드들을 적을 수 있다.

3. 설정 코드 붙여넣기 및 API 키 교체: 설정 json 파일에 직접 context 7 항목을 추가한다. 그리고 아까 받은 API Key를 입력한다.

{
	"mcpServers": {
		"context7": {
			"command": "npx",
			"args": [
				"-y",
				"@upstash/context7-mcp",
				"--api-key",
				"발급받은 API 키 입력"
			]
    	},
	"GitKraken": {
			"args": [
				"mcp",
				"--host=antigravity",
				"--source=gitlens",
				"--scheme=antigravity"
			],
			"command": "Antigravity\\User\\globalStorage\\eamodio.gitlens\\gk.exe",
			"type":    "stdio"
		}
	}
}
  1. 저장 및 확인: Ctrl + S를 눌러 저장한 후, 리프레시 버튼을 누르면 Context 7이라는 MCP 서버가 추가된 것을 확인할 수 있다.

음... 연결은 된 거 같은데 Node.js 설치를 하지 않아서 그런지, 시스템에서 npx 명령을 찾을 수 없다는 에러가 발생했다.

일단 윈도우 환경이므로 Node.js를 다운 받아서 설치했다.

Node.js — Node.js® 다운로드
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
# 환경변수 등록
C:\Program Files\nodejs\
C:\Users\PINB\AppData\Roaming\npm

# 설치된 버전 확인 (cmd or power shell)
node -v
npm -v
npx -v

설치 완료 후, Anti-Gravity를 재시작하여 Refresh 버튼을 눌러주면 정상적으로 설치된 것을 확인할 수 있다.

3단계: Context 7 활용하여 프롬프트 실행하기

Context 7 MCP 서버가 성공적으로 추가되었다면 이제 에이전트 탭에서 프롬프트를 입력할 때 이를 활용할 수 있다.

  1. 프롬프트 입력 방식: 입력하고자 하는 핵심 프롬프트 앞에 Context 7 서버를 활용하도록 지시하는 내용을 추가한다.
# 예시
Context7에서 내가 원하는 문서들을 확인해서 어떤 동작들을 실행해

Context7을 사용하여 PINBlog의 Theme를 Cyberpunk 스타일로 변경해 달라고 했는데 나름 잘 된 거 같기도...?

root@cyberpunk:~#